Monitor GraphQL Operations on Browser Applications

Your browser applications may use GraphQL to efficiently fetch data. The Controller enables monitoring of GraphQL operations on your browser applications. In the Controller UI, requests will display the path appended with the GraphQL operation name, for example, /api/graphql/getAllPosts.

By default, Browser Real User Monitoring (BRUM) supports the following headers:

x-apollo-operation-name
x-adeum-graphql-operation
graphql-operation

The following are the examples for different application headers:

Using the Fetch API

Specify the GraphQL operation in the fetch API. This name will be displayed in the Controller UI.

fetch(ENDPOINT, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "x-adeum-graphql-operation": "<operation-name>", // this header is used to identify the GraphQL operation in the AppDynamics dashboard
    },
    body: JSON.stringify({
        query: GRAPHQL_QUERY_STRING,
    }),
})

Using the Apollo Client API

Specify the GraphQL operation in the Apollo Client API. This name will be displayed in the Controller UI.

import { ApolloClient, HttpLink, InMemoryCache, ApolloLink } from "@apollo/client";

// Apollo link (middleware) to set GraphQL operation name in headers
const operationNameLink = new ApolloLink((operation, forward) => {
    operation.setContext({
        headers: {
            "x-adeum-graphql-operation": operation.operationName, // this header is used to identify the GraphQL operation in the AppDynamics dashboard
        }
    });
    return forward(operation);
});

// Apollo client with the operationNameLink link
const client = new ApolloClient({
    link: ApolloLink.from([operationNameLink, new HttpLink({ uri: ENDPOINT })]),
    cache: new InMemoryCache(),
});

// Execute the query as usual
client.query({query: GRAPHQL_QUERY_STRING})

Using the Urql API

Specify the GraphQL operation in the Urql API. This name will be displayed in the Controller UI.

import { Client, fetchExchange, mapExchange } from '@urql/core';

// Urql exchange to set GraphQL operation name in headers
const operationNameExchange = mapExchange({
    onOperation: (operation) => {
        const operationName = operation.query.definitions.find(definition => definition.kind === 'OperationDefinition').name.value;
        operation.context.fetchOptions ||= {};
        if (typeof operation.context.fetchOptions === 'function') {
            operation.context.fetchOptions = operation.context.fetchOptions();
        }
        operation.context.fetchOptions.headers = {
            "x-adeum-graphql-operation": operationName, // this header is used to identify the GraphQL operation in the AppDynamics dashboard
            ...operation.context.fetchOptions.headers,
        }
    }
}); 

// Urql client with operationNameExchange
const client = new Client({
    url: ENDPOINT,
    exchanges: [operationNameExchange, fetchExchange],
    preferGetMethod: false,
});

// Execute the query as usual
const { data } = await client.query({query: GRAPHQL_QUERY_STRING});

Using Custom Headers

If you want to use custom headers, update and inject the JavaScript agent script as follows:

<script charset="UTF-8" type="text/javascript">
window["adrum-start-time"] = new Date().getTime();
(function(config){
    config.appKey = "SM-AFN-CDN";
    config.adrumExtUrlHttp = "http://cdn.appdynamics.com";
    config.adrumExtUrlHttps = "https://cdn.appdynamics.com";
    config.beaconUrlHttp = "http://eum-shadow-master-col.saas.appd-test.com";
    config.beaconUrlHttps = "https://eum-shadow-master-col.saas.appd-test.com";
    config.sessionReplay = {"enabled":true,"sessionReplayUrlHttps":"https://api.eum-appdynamics.com"};
    config.useHTTPSAlways = true;
    config.resTiming = {"bufSize":200,"clearResTimingOnBeaconSend":true};
    config.maxUrlLength = 512;
    config.graphqlOperationHeader = "x-custom-graphql-operation";
})(window["adrum-config"] || (window["adrum-config"] = {}));
</script>
<script src="//cdn.appdynamics.com/adrum/adrum-25.9.0.4694.js"></script>