network_log_viewer 1.1.2 copy "network_log_viewer: ^1.1.2" to clipboard
network_log_viewer: ^1.1.2 copied to clipboard

Flutter package to log REST APIs, GraphQL (queries, variables, responses), and SDK events (Insider, Adjust, Amplitude) with an in-app viewer.

requests_inspector #

A Flutter package that captures and displays REST API, GraphQL, analytics, notifications, and deeplink events in one in-app inspector.

Features #

  • REST logging – Logs URL, method, request/response body, headers, status code, and duration via a Dio interceptor.
  • GraphQL logging – Logs endpoint URL, dynamic query/mutation text, variables, operation name, and full response (data + errors) via a graphql Link.
  • SDK event logging – Generic API to log analytics events (e.g. Insider, Adjust, Amplitude) so they appear in the same viewer.
  • In-app viewer – Scrollable list of log entries with expandable tiles; tap to see full request/response, GraphQL query, and payloads.
  • Console output – Optional debugPrint of log summaries in debug mode.
  • Configurable – Max entries, enable/disable, optional console printing.

Screenshots #

Log list Request details (GraphQL) Light mode Options menu
[Log list] [GraphQL detail] [Light mode] [Options menu]

Getting started #

1. Add the dependency #

In your app’s pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  requests_inspector: ^1.1.1
  dio: ^5.0.0   # required if you use REST logging
  graphql: ^5.0.0   # required if you use GraphQL logging

Then run:

flutter pub get

2. Initialize the logger #

Call RequestsInspector once around your app (e.g. in main()):

final navigatorKey = GlobalKey<NavigatorState>();

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    RequestsInspector(
      navigatorKey: navigatorKey,
      child: MaterialApp(
        navigatorKey: navigatorKey,
        home: MyApp(),
      ),
    ),
  );
}

3. Attach REST logging (Dio) #

Add the interceptor to your Dio instance:

final dio = Dio(BaseOptions(baseUrl: 'https://api.example.com'));
dio.interceptors.add(RequestsInspectorInterceptor());

All requests and responses will be logged automatically.

4. Attach GraphQL logging #

Prepend the logger link to your GraphQL link chain:

import 'package:graphql/graphql.dart';

final link = Link.concat(
  GraphQLInspectorLink(HttpLink('https://api.example.com/graphql')),
  HttpLink('https://api.example.com/graphql'),
);
final client = GraphQLClient(link: link, cache: GraphQLCache());

5. Log SDK / analytics events #

Call extension helpers whenever you send custom events:

InspectorController().logAnalyticsEvent(
  tool: 'amplitude',
  eventName: 'screen_view',
  payload: {'screen': 'Home'},
);
InspectorController().logNotificationEvent(
  action: 'notification_tapped',
  channel: 'fcm',
  payload: {'campaignId': 'abc123'},
);

InspectorController().logDeepLinkEvent(
  deepLink: Uri.parse('myapp://product/42?ref=push'),
  action: 'open',
);

6. Add RequestsInspector (no manual routing) #

Wrap your app with RequestsInspector once. Then open logs by double shaking the device:

final navigatorKey = GlobalKey<NavigatorState>();

runApp(
  RequestsInspector(
    navigatorKey: navigatorKey,
    child: MaterialApp(
      navigatorKey: navigatorKey,
      home: MyApp(),
    ),
  ),
);

No extra routes or debug buttons are required. RequestsInspector opens inspector on shake/long-press based on your config without blocking normal app usage.

Usage summary #

What you want What to do
Log REST calls Add RequestsInspectorInterceptor() to your Dio instance.
Log GraphQL operations Wrap link with GraphQLInspectorLink(...).
Log analytics Call InspectorController().logAnalyticsEvent(...).
Log notifications Call InspectorController().logNotificationEvent(...).
Log deeplinks Call InspectorController().logDeepLinkEvent(...).
Show logs in-app Wrap app with RequestsInspector(...) and double shake device.
Clear logs InspectorController().clearAllRequests().

Example app #

The example/ folder contains a minimal Flutter app that:

  • Wraps app with RequestsInspector
  • Uses Dio with RequestsInspectorInterceptor
  • Logs sample custom events
  • Opens inspector via gesture

Run it to try the package and to capture screenshots for pub.dev:

cd example && flutter run

API overview #

  • RequestsInspector(...) – Wrap your app and open inspector by gesture.
  • RequestsInspectorInterceptor – Dio interceptor for REST logging.
  • GraphQLInspectorLink – GraphQL link for operation/response logging.
  • InspectorController().logAnalyticsEvent(...) – Analytics logging helper.
  • InspectorController().logNotificationEvent(...) – Notification logging helper.
  • InspectorController().logDeepLinkEvent(...) – Deeplink logging helper.

Exported types: NetworkLogEntry, NetworkLogType, NetworkLogStore, NetworkLogViewer.

Requirements #

  • Flutter SDK (e.g. >=1.17.0)
  • Dart ^3.10.7
  • For REST logging: add dio to your dependencies.
  • For GraphQL logging: add graphql (and typically gql_http_link) to your dependencies.

License #

See the LICENSE file.

Publishing this package to pub.dev #

See PUBLISHING.md for step-by-step instructions on taking screenshots, updating the README, and publishing to pub.dev.

4
likes
0
points
270
downloads

Publisher

unverified uploader

Weekly Downloads

Flutter package to log REST APIs, GraphQL (queries, variables, responses), and SDK events (Insider, Adjust, Amplitude) with an in-app viewer.

Repository (GitHub)
View/report issues

Topics

#flutter #logging #graphql #rest #analytics

License

unknown (license)

Dependencies

dio, flutter, gql, gql_exec, gql_http_link, gql_link, graphql, provider, sensors_plus, share_plus

More

Packages that depend on network_log_viewer