NerdGraph tutorial: Browser agent monitoring examples

You can create browser applications using our NerdGraph API instead of using the UI. The advantage to this is that when it's time to instrument your browser application with New Relic, you can programmatically create and retrieve the JavaScript snippet to copy and paste into your browser app.

For how to use npm to set up browser monitoring for multiple applications, see Instrument multiple apps with npm.

Create a new browser application

Here's an example mutation to create a new browser application with default settings.

Mutation:

mutation CreateExampleBrowserApplication(
  $accountId: Int!
  $name: String!
  $settings: AgentApplicationBrowserSettingsInput
) {
  agentApplicationCreateBrowser(
    accountId: $accountId
    name: $name
    settings: $settings
  ) {
    guid
    name
    settings {
      cookiesEnabled
      distributedTracingEnabled
      loaderScript
      loaderType
    }
  }
}

Variables:

{
  "accountId": Int!,
  "name": String!,
  "settings": {
    "cookiesEnabled": Boolean,
    "distributedTracingEnabled": Boolean,
    "loaderType": AgentApplicationBrowserLoader
  }
}

Retrieve the JavaScript snippet

You can retrieve the JavaScript snippet to copy/paste into your application. Note that the returned snippet is a JSON encoded string that will need to be parsed before it can be copy/pasted.

Query:

query FetchBrowserJavaScriptSnippet($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsLoaderScript
        }
      }
    }
  }
}

Variables:

{
  "guid": EntityGuid!
}

Examples of configuring browser monitoring

Browser settings can be configured through NerdGraph. Here is an example mutation that changes the apdex of an application.

Mutation:

mutation UpdateBrowserApdexTarget(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

Variables:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    }
  }
}

For more information on what browser settings can be updated via NerdGraph, reference the following mutation. Documentation for each field can be found in the NerdGraph explorer.

Mutation:

mutation UpdateBrowserSettingsExample($guid: EntityGuid!, settings: AgentApplicationSettingsUpdateInput!) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
      browserMonitoring {
        ajax {
          denyList
        }
        distributedTracing {
          allowedOrigins
          corsEnabled
          corsUseNewrelicHeader
          corsUseTracecontextHeaders
          enabled
          excludeNewrelicHeader
        }
        loader
        privacy {
          cookiesEnabled
        }
      }
      dataManagement {
        sendTransactionEventsToInternalStream
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

Variables:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    },
    "browserMonitoring": {
      "ajax": {
        "denyList": [String!]
      },
      "distributedTracing": {
        "allowedOrigins": [String!],
        "corsEnabled": Boolean,
        "corsUseNewrelicHeader": Boolean,
        "corsUseTracecontextHeaders": Boolean,
        "enabled": Boolean,
        "excludeNewrelicHeader": Boolean
      }
      "loader": AgentApplicationSettingsBrowserLoaderInput,
      "privacy": {
        "cookiesEnabled": Boolean
      }
    }
    "dataManagement": {
      "sendTransactionEventsToInternalStream": Boolean
    }
  }
}

Retrieve the application configuration

You can retrieve the browser application configuration to use with the npm package installation method. Depending on your needs, the configuration can be returned in two different formats: a JSON encoded string for injection into the head element of your webpage and an object that can be used as is in your application source code.

Query:

query FetchBrowserConfiguration($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
          jsConfigScript
        }
      }
    }
  }
}

Variables:

{
  "guid": EntityGuid!
}