@openobserve/mobile-react-native-apollo-client

React-Native Monitoring for @apollo/client

Overview

Monitor your GraphQL resources with Real User Monitoring (RUM) and perform the following:

• Identify GraphQL queries and mutations
• Identify GraphQL variables used in queries and mutations
• Identify the GraphQL query payload
• Capture GraphQL errors from the response

RUM supports GraphQL requests created using @apollo/client.

Setup

Prerequisites

Set up the RUM React Native SDK on your mobile React Native application. For more information, see RUM React Native Monitoring.

Add @apollo/client (v3.0+) and graphql (v15.0+) to your application following the official installation documentation.

Instrument your ApolloClient

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 OpenObserve Apollo Client Link to collect information

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

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

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

Configuration options

You can pass options to the OpenObserveLink constructor to control what data is collected:

new OpenObserveLink({
    trackVariables: true, // track GraphQL operation variables (default: true)
    trackPayload: false, // track the GraphQL query payload (default: false)
    trackErrors: false // track GraphQL errors from the response (default: false)
});

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

Redacting sensitive GraphQL data

Use a resourceEventMapper in your OpenObserve configuration to redact or drop sensitive data from GraphQL attributes. Variables, payload, and errors are all stored as JSON strings in the resource event context.

const datadogConfiguration = new OpenObserveProviderConfiguration(
    '<CLIENT_TOKEN>',
    '<ENVIRONMENT_NAME>',
    TrackingConsent.GRANTED,
    {
        rumConfiguration: {
            applicationId: '<RUM_APPLICATION_ID>',
            trackResources: true
        }
    }
);

datadogConfiguration.resourceEventMapper = event => {
    const context = event.context as Record<string, string>;

    // Redact sensitive variables
    if (context['_oo.graphql.variables']) {
        const variables = JSON.parse(context['_oo.graphql.variables']);
        if (variables.password) {
            variables.password = '***';
        }
        context['_oo.graphql.variables'] = JSON.stringify(variables);
    }

    // Drop the payload entirely for a specific operation
    if (context['_oo.graphql.operation_name'] === 'TestOperation') {
        delete context['_oo.graphql.payload'];
    }

    // Redact error messages
    if (context['_oo.graphql.errors']) {
        const errors = JSON.parse(context['_oo.graphql.errors']);
        for (const error of errors) {
            error.message = error.message.replace(/email=\S+/g, 'email=***');
        }
        context['_oo.graphql.errors'] = JSON.stringify(errors);
    }

    return event;
};