• English日本語한국어
  • Log inStart now

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!
}
Copyright © 2023 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.