Flutter Libraries for RUM

문서 > RUM & 세션 재생 > 모바일 및 TV 모니터링 > Integrated Libraries > Flutter Libraries for RUM

이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

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

GraphQL (gql_link)

Datadog provides datadog_gql_link for use with most GraphQL Flutter libraries, including graphql_flutter and ferry.

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 will be 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'),
      ],
    );

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),
  ]
);