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!}