Browser SPA monitoring 2.0

Important

This feature is in public preview. It will eventually replace the existing browser SPA experience.

For customers monitoring browser single page applications (SPA), we're excited to announce an overhaul of our SPA monitoring functionality, meant to address numerous pain points:

Unusable latest versions: Frequent conflicts with third-party libraries and unreliable interaction capture plagued the existing agent, often rendering the latest version unusable.
Patchwork solutions: Addressing one issue with SPA patches often introduced another, creating a frustrating cycle of fixes and regressions.
Third-party library conflicts: Global wrapping, particularly around Promises, often disrupted code functionality due to conflicts with other libraries.
Performance bottlenecks: Conflicts with code using timers, RAF, and promise chaining led to performance issues, ranging from slowdowns to freezes.

The updated SPA monitoring experience is designed to eliminate these problems and provide a significantly improved monitoring experience. Key changes include:

Unwrapped execution: By not wrapping core globals, the new SPA experience unleashes execution speed boosts for your application.
Aligned with soft navigation heuristics: The new experience adopts Google Chrome's soft navigation, providing more accurate interaction tracking and improved alignment with browser behavior.
Simplified interaction determination: Interactions are now defined as a UI event (click/keydown/submit -> route change -> DOM modification), offering a clearer and more efficient capture approach.
- Potential event disassociation: You might observe previously associated AjaxRequest and JavascriptError events becoming disassociated from interactions, reflecting the focus on UI-driven interactions.
Focus on key metrics: While reported data remains largely unchanged, the new experience no longer tracks JavaScript execution or callback duration within interactions, streamlining the reported information.
Reduced interaction durations: Expect significantly shorter interaction durations, particularly for route changes. Initial page loads will see a slight reduction.
API updates:
- New optional argument .interaction({waitForEnd: true}) added to the .interaction() function: This allows customization of user interaction end time. The existing .interaction() functionality remains unchanged.
- Deprecated API: The function createTracer: While still functional, the createTracer function is deprecated as it no longer keeps interactions open or times callbacks. Note: If you continue to use createTracer with the new SPA experience,BrowserTiming events will not be created.

Try out the new browser SPA monitoring experience

Review the requirements

This feature is tested and supported in line with our standard browser support statement.

Add the feature flag

If your agent was installed with the APM method, contact our support team and we'll enable the feature flag on your account.

If your agent was installed with NPM or the UI-based, copy/paste method, add the following feature flag your browser agent code:

Find the New Relic browser agent code in your webpage HTML.
In the init configuration object, add the soft_nav feature flag. Here's an example:
```
<script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
```
Deploy your app.
Need to disable this feature? Simply remove the feature flag.

Confirm data is being sent to New Relic

First, check to make sure your interactions follow the heuristic: click/keydown/submit -> route change -> DOM modification.

Next, check the network tab in your browser’s dev tools. Filter for requests going to /events/1/. There should be ones for which the payload begins with bel.7;1, indicating your interactions are being captured and sent.

Finally, interaction data should continue to flow into your browser entity dashboards and charts.

Known issues

API usage:
- newrelic.interaction().end() workaround: If you previously used this to address interaction closure issues, you might now see extra, unnecessary interactions. Review your usage to ensure optimal results.
- createTracer() functionality change: createTracer() no longer keeps interactions open or times callbacks. If you relied on this for tracking JavaScript code, explore alternative approaches.
AjaxRequest association:
- Potential exclusion from interactions: Ajax requests that initiated near the end of previous interactions might now be excluded due to shortened interaction durations.
- Manual extension: If you need a request to be attributed to a specific interaction, use the argument .interaction({waitForEnd: true}) added to the .interaction() function to keep the interaction open until the request fires, then .end() the interaction. This will associate the request to the interaction.

Leave feedback

Submit a GitHub issue to report any bugs, feature requests, or performance improvements.

For any other feedback, share your thoughts and suggestions by emailing browser-agent@newrelic.com with a subject line starting with [SoftNav]: .