Integrated Libraries

Docs > RUM & Session Replay > Mobile and TV Monitoring > Integrated Libraries

Overview

This page lists integrated libraries you can use for the following applications:

Android & Android TV Monitoring
React Native
Flutter

Android & Android TV Monitoring

Coil

If you use Coil to load images in your application, see Datadog’s dedicated Coil library.

Fresco

If you use Fresco to load images in your application, see Datadog’s dedicated Fresco library.

Glide

If you use Glide to load images in your application, see Datadog’s dedicated Glide library.

Jetpack Compose

If you use Jetpack Compose in your application, see Datadog’s dedicated Jetpack Compose library.

RxJava

If you use RxJava in your application, see Datadog’s dedicated RxJava library.

Picasso

If you use Picasso, use it with the OkHttpClient that’s been instrumented with the Datadog SDK for RUM and APM information about network requests made by Picasso.

    val picasso = Picasso.Builder(context)
         .downloader(OkHttp3Downloader(okHttpClient))
         // …
         .build()
    Picasso.setSingletonInstance(picasso)

     final Picasso picasso = new Picasso.Builder(context)
         .downloader(new OkHttp3Downloader(okHttpClient))
         // …
         .build();
     Picasso.setSingletonInstance(picasso);

Retrofit

If you use Retrofit, use it with the OkHttpClient that’s been instrumented with the Datadog SDK for RUM and APM information about network requests made with Retrofit.

     val retrofitClient = Retrofit.Builder()
         .client(okHttpClient)
         // …
         .build()

     final Retrofit retrofitClient = new Retrofit.Builder()
         .client(okHttpClient)
         // …
         .build();

SQLDelight

If you use SQLDelight in your application, see Datadog’s dedicated SQLDelight library.

SQLite

Following SQLiteOpenHelper’s generated API documentation, you only have to provide the implementation of the DatabaseErrorHandler -> DatadogDatabaseErrorHandler in the constructor.

Doing this detects whenever a database is corrupted and sends a relevant RUM error event for it.

     class <YourOwnSqliteOpenHelper>: SqliteOpenHelper(
                                     <Context>,
                                     <DATABASE_NAME>,
                                     <CursorFactory>,
                                     <DATABASE_VERSION>,
                                     DatadogDatabaseErrorHandler()) {
         // …

     }

    public class <YourOwnSqliteOpenHelper> extends SqliteOpenHelper {
         public <YourOwnSqliteOpenHelper>(){
             super(<Context>,
                   <DATABASE_NAME>,
                   <CursorFactory>,
                   <DATABASE_VERSION>,
                   new DatadogDatabaseErrorHandler());
         }
    }

Apollo (GraphQL)

If you use Apollo, use it with the OkHttpClient that’s been instrumented with the Datadog SDK for RUM and APM information about all the queries performed through Apollo client.

     val apolloClient = ApolloClient.builder()
         .okHttpClient(okHttpClient)
         .serverUrl(<APOLLO_SERVER_URL>)
         .build()

     ApolloClient apolloClient = new ApolloClient.builder()
         .okHttpClient(okHttpClient)
         .serverUrl(<APOLLO_SERVER_URL>)
         .build();

Android TV (Leanback)

If you use the Leanback API to add actions into your Android TV application, see Datadog’s dedicated Android TV library.

Kotlin Coroutines

If you use Kotlin Coroutines, see Datadog’s dedicated library with extensions for RUM and with extensions for Trace.

React Native

Setup

Note: This package is an integration for react-navigation library, please make sure you first install and setup the core mobile-react-native SDK.

To install with NPM, run:

npm install @datadog/mobile-react-navigation

To install with Yarn, run:

yarn add @datadog/mobile-react-navigation

To track changes in navigation as RUM Views, set the onready callback of your NavigationContainer component as follow. You can use the optional ViewNamePredicate parameter to replace the automatically detected View name with something more relevant to your use case.

Returning null in the ViewNamePredicate prevents the new RUM View from being created. The previous RUM View remains active.

import * as React from 'react';
import { DdRumReactNavigationTracking, ViewNamePredicate } from '@datadog/mobile-react-navigation';
import { Route } from "@react-navigation/native";

const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(route: Route<string, any | undefined>, trackedName: string) {
  return "My custom View Name"
}

function App() {
  const navigationRef = React.useRef(null);
  return (
    <View>
      <NavigationContainer ref={navigationRef} onReady={() => {
        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewNamePredicate)
      }}>
        // …
      </NavigationContainer>
    </View>
  );
}

Note: Only one NavigationContainer can be tracked at the time. If you need to track another container, stop tracking the previous one first, using DdRumReactNavigationTracking.stopTrackingViews().

Note: This package is an integration for react-native-navigation library. Please make sure you first install and setup the core mobile-react-native SDK.

Setup

To install with NPM, run:

npm install @datadog/mobile-react-native-navigation

To install with Yarn, run:

yarn add @datadog/mobile-react-native-navigation

To start tracking your navigation events, add the following lines before setting up your navigation. You can use the optional ViewNamePredicate callback to replace the automatically detected View name with something more relevant to your use case, based on the ComponentDidAppearEvent.

Returning null in the ViewNamePredicate prevents the new RUM View from being created. The previous RUM View remains active.

import { DdRumReactNativeNavigationTracking, ViewNamePredicate }  from '@datadog/mobile-react-native-navigation';
import { ComponentDidAppearEvent } from 'react-native-navigation';

const viewNamePredicate: ViewNamePredicate = function customViewNamePredicate(event: ComponentDidAppearEvent, trackedName: string) {
  return "My custom View Name"
}

DdRumReactNativeNavigationTracking.startTracking(viewNamePredicate);

Apollo Client

Note: This package is an integration for the @apollo/client library. Please make sure you first install and set up the core mobile-react-native SDK.

Setup

To install with NPM, run:

npm install @datadog/mobile-react-native-apollo-client

To install with Yarn, run:

yarn add @datadog/mobile-react-native-apollo-client

Migrate to HttpLink

If you initialize your ApolloClient with the uri parameter, initialize it with a HttpLink:

import { ApolloClient, HttpLink } from '@apollo/client';

// before
const apolloClient = new ApolloClient({
    uri: 'https://my.api.com/graphql'
});

// after
const apolloClient = new ApolloClient({
    link: new HttpLink({ uri: 'https://my.api.com/graphql' })
});

Use the Datadog Apollo Client Link to collect information

Import DatadogLink from @datadog/mobile-react-native-apollo-client and use it in your ApolloClient initialization:

import { ApolloClient, from, HttpLink } from '@apollo/client';
import { DatadogLink } from '@datadog/mobile-react-native-apollo-client';

const apolloClient = new ApolloClient({
    link: from([
        new DatadogLink(),
        new HttpLink({ uri: 'https://my.api.com/graphql' }) // always in last position
    ])
});

For more information on Apollo Client Links, see the official documentation.

Removing GraphQL information

Use a resourceEventMapper in your Datadog configuration to remove sensitive data from GraphQL variables:

const datadogConfiguration = new DatadogProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    '<RUM_APPLICATION_ID>',
    true,
    true,
    true
);

datadogConfiguration.resourceEventMapper = event => {
    // Variables are stored in event.context['_dd.graphql.variables'] as a JSON string when present
    if (event.context['_dd.graphql.variables']) {
        const variables = JSON.parse(event.context['_dd.graphql.variables']);
        if (variables.password) {
            variables.password = '***';
        }
        event.context['_dd.graphql.variables'] = JSON.stringify(variables);
    }

    return event;
};

Flutter

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