Browser monitoring features in public preview

New Relic Browser features are released gradually to ensure stability and reliability. However, you can opt in to avail yourself of some features before their GA. These are known as public preview features.

Current public preview features

The following public preview features are available in New Relic Browser:

• Browser Agent v1.272.0 - Automatically track native marks and measures as BrowserPerformance events.
• Browser Agent v1.276.0 - Automatically observe page resource assets as BrowserPerformance events.

Manually opt in to use public preview features

Copy/paste implementation of Browser Performance - Marks, Measures & Resources

1. Ensure you are using a version of the New Relic Browser agent compatible with the preview feature, on a pro or pro+spa equivalent build.
2. Find the New Relic browser agent code in your webpage HTML or JS application.
3. In the init configuration object, add the performance feature configuration. Here's an example that enables both marks and measures detection:

   <script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, performance: {
     capture_marks: true, // enable to capture browser performance marks (default false)
     capture_measures: true // enable to capture browser performance measures (default false)
     resources: {
       enabled: true, // enable to capture browser peformance resource timings (default false)
       asset_types: [], // Asset types to collect -- an empty array will collect all types (default []). See https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorType for the list of types.
       first_party_domains: [], // when included, will decorate any resource as a first party resource if matching (default [])
       ignore_newrelic: true // ignore capturing internal agent scripts and harvest calls (default true)
     }
   } }:

   Copier
4. Deploy your app.

NPM implementation of Browser Performance - Marks, Measures & Resources

1. Ensure you are using a version of the New Relic Browser agent compatible with the preview feature.
2. Find the New Relic browser agent constructor in your application's implementation.
3. In the init configuration object, add the performance feature configuration. Here's an example that enables both marks and measures detection:

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

// Populate using values in copy-paste JavaScript snippet.
const options = {
  init: {
    // ... other configurations
    performance: {
      capture_marks: true, // enable to capture browser performance marks (default false)
      capture_measures: true // enable to capture browser performance measures (default false)
      resources: {
        enabled: true, // enable to capture browser peformance resource timings (default false)
        asset_types: [], // Asset types to collect -- an empty array will collect all types (default []). See https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorType for the list of types.
        first_party_domains: [], // when included, will decorate any resource as a first party resource if matching (default [])
        ignore_newrelic: true // ignore capturing internal agent scripts and harvest calls (default true)
      }
    }
   },
  info: { ... },
  loader_config: { ... } 
}

// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)

See the NPM package documentation for more information on how to configure the agent via NPM.

Opt in for APM injected applications

APM-served web applications can opt-in to enable preview features by reaching out to your support representative, or by filing a help ticket or by emailing browser-agent@newrelic.com with a subject line starting with [Public Preview Features]: .