network_log_viewer

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
  network_log_viewer: ^1.1.2
  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. Wrap your app with RequestsInspector

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

import 'package:network_log_viewer/requests_inspector.dart';

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'},
);

Auto-log when your analytics call is hit:

await InspectorController().trackAnalyticsEvent(
  tool: 'amplitude',
  eventName: 'checkout_started',
  payload: {'cartSize': 3},
  onTrack: () => amplitude.logEvent('checkout_started'),
);

InspectorController().logNotificationEvent(
  action: 'notification_tapped',
  channel: 'fcm',
  payload: {'campaignId': 'abc123'},
);

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

Auto-log on received streams:

final notificationSub = InspectorController().autoLogNotificationStream(
  firebaseMessaging.onMessage.map((m) => m.data),
  channel: 'fcm',
);

final deeplinkSub = InspectorController().autoLogDeepLinkStream(
  uriLinkStream.whereType<Uri>(),
);

// dispose/cancel when no longer needed
await notificationSub.cancel();
await deeplinkSub.cancel();

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(...).
Auto-log analytics hits Wrap calls with trackAnalyticsEvent(...).
Log notifications Call InspectorController().logNotificationEvent(...).
Auto-log notifications Use autoLogNotificationStream(...).
Log deeplinks Call InspectorController().logDeepLinkEvent(...).
Auto-log deeplinks Use autoLogDeepLinkStream(...).
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 API includes: RequestsInspector, RequestsInspectorInterceptor, GraphQLInspectorLink, InspectorController, RequestDetails, ResponseDetails, RequestMethod, and ShowInspectorOn.

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.

Libraries

requests_inspector