Flutter Libraries for RUM

This page lists integrated libraries you can use for Flutter applications.

Routing and automatic view tracking

If you are using Flutter Navigator v2.0, your setup for automatic view tracking differs depending on your routing middleware. This section explains how to integrate with the most popular routing packages.

go_router

Because go_router uses the same observer interface as Flutter Navigator v1, you can add DatadogNavigationObserver to other observers as a parameter to GoRouter.

final _router = GoRouter(
  routes: [
    // Your route information here
  ],
  observers: [
    DatadogNavigationObserver(datadogSdk: DatadogSdk.instance),
  ],
);
MaterialApp.router(
  routerConfig: _router,
  // Your remaining setup
);

If you are using ShellRoutes, you need to supply a separate observer to each ShellRoute, as shown below. See this bug for more information.

final _router = GoRouter(
  routes: [
    ShellRoute(build: shellBuilder),
    routes: [
      // Additional routes
    ],
    observers: [
      DatadogNavigationObserver(datadogSdk: DatadogSdk.instance),
    ],
  ],
  observers: [
    DatadogNavigationObserver(datadogSdk: DatadogSdk.instance),
  ],
);
MaterialApp.router(
  routerConfig: _router,
  // Your remaining setup
);

Additionally, if you are using GoRoute’s pageBuilder parameter over its builder parameter, ensure that you are passing on the state.pageKey value and the name value to your MaterialPage.

GoRoute(
  name: 'My Home',
  path: '/path',
  pageBuilder: (context, state) {
    return MaterialPage(
      key: state.pageKey,       // Necessary for GoRouter to call Observers
      name: name,               // Needed for Datadog to get the right route name
      child: _buildContent(),
    );
  },
),

AutoRoute

AutoRoute can use a DatadogNavigationObserver provided as one of the navigatorObservers as part of its config method.

return MaterialApp.router(
  routerConfig: _router.config(
    navigatorObservers: () => [
      DatadogNavigationObserver(
        datadogSdk: DatadogSdk.instance,
      ),
    ],
  ),
  // Your remaining setup
);

However, if you are using AutoRoute’s tab routing, you need to extend Datadog’s default observer with AutoRoute’s AutoRouteObserver interface.

class DatadogAutoRouteObserver extends DatadogNavigationObserver
    implements AutoRouterObserver {
  DatadogAutoRouteObserver({required super.datadogSdk});

  // only override to observer tab routes
  @override
  void didInitTabRoute(TabPageRoute route, TabPageRoute? previousRoute) {
    datadogSdk.rum?.startView(route.path, route.name);
  }

  @override
  void didChangeTabRoute(TabPageRoute route, TabPageRoute previousRoute) {
    datadogSdk.rum?.startView(route.path, route.name);
  }
}

This new object replaces the simpler DatadogNavigationObserver.

Beamer

Beamer can use the DatadogNavigationObserver as an argument to BeamerDelegate:

final routerDelegate = BeamerDelegate(
  locationBuilder: RoutesLocationBuilder(
    routes: {
      // Your route config
    },
  ),
  navigatorObservers: [
    DatadogNavigationObserver(DatadogSdk.instance),
  ]
);

Web view tracking

Real User Monitoring allows you to monitor web views and eliminate blind spots in your hybrid mobile applications.

The Datadog Flutter SDK has packages for working with both webview_flutter and flutter_inappwebview. For more information, refer to the Web View Tracking documentation page.

gRPC

Datadog provides datadog_grpc_interceptor for use with the grpc Flutter package. The gRPC interceptor automatically tracks gRPC requests as RUM Resources and enables distributed tracing with APM.

Setup

Add datadog_grpc_interceptor to your pubspec.yaml or by running flutter pub add datadog_grpc_interceptor from your terminal:

dependencies:
  # Other dependencies
  datadog_grpc_interceptor: ^1.1.0

To use this plugin, create an instance of DatadogGrpcInterceptor, then pass it to your generated gRPC client:

import 'package:datadog_grpc_interceptor/datadog_grpc_interceptor.dart'

// Initialize Datadog - be sure to set the [DatadogConfiguration.firstPartyHosts] member
// Enable Datadog Distributed Tracing
final config = DatadogConfiguration(
  // ...
  firstParthHosts = ['localhost']
)

// Create the gRPC channel
final channel = ClientChannel(
  'localhost',
  port: 50051,
  options: ChannelOptions(
    // ...
  ),
);

// Create the gRPC interceptor with the supported channel
final datadogInterceptor = DatadogGrpcInterceptor(DatadogSdk.instance, channel);

// Create the gRPC client, passing in the Datadog interceptor
final stub = GreeterClient(channel, interceptors: [datadogInterceptor]);

Datadog provides datadog_gql_link for use with most GraphQL Flutter libraries, including graphql_flutter and ferry. The link automatically tracks GraphQL requests as RUM resources, adds query names, mutation names, and variables as attributes of the Resource, and enables distributed tracing in APM.

Setup

Add datadog_gql_link to your pubspec.yaml or by running flutter pub add datadog_gql_link from your terminal:

dependencies:
  # Other dependencies
  datadog_gql_link: ^1.0.0

When creating your GraphQL link, add the DatadogGqlLink above your terminating link. For example:

final graphQlUrl = "https://example.com/graphql";

final link = Link.from([
  DatadogGqlLink(DatadogSdk.instance, Uri.parse(graphQlUrl)),
  HttpLink(graphQlUrl),
]);

If you are tracking non-GraphQL network calls with datadog_tracking_http_client, you need to configure the tracking plugin to ignore requests to your GraphQL endpoint. Otherwise, GraphQL resources are reported twice, and APM traces may be broken. Ignore your GraphQL endpoint by using the ignoreUrlPatterns parameter added to datadog_tracking_http_client version 2.1.0.

final datadogConfig = DatadogConfiguration(
    // Your configuration
  )..enableHttpTracking(
      ignoreUrlPatterns: [
        RegExp('example.com/graphql'),
      ],
    );

Further Reading

Additional helpful documentation, links, and articles:

Source code for dd-sdk-flutterSOURCE CODE more more