diff --git a/src/content/docs/browser/single-page-app-monitoring/get-started/browser-spa-v2.mdx b/src/content/docs/browser/single-page-app-monitoring/get-started/browser-spa-v2.mdx new file mode 100644 index 00000000000..723827600d4 --- /dev/null +++ b/src/content/docs/browser/single-page-app-monitoring/get-started/browser-spa-v2.mdx @@ -0,0 +1,91 @@ +--- +title: Browser SPA monitoring 2.0 +metaDescription: "The new browser SPA monitoring capability is a streamlined way to monitor your users' experience and app performance." +freshnessValidatedDate: 2024-09-04 +--- + + + 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 upgraded 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()`](https://docs.newrelic.com/docs/browser/new-relic-browser/browser-apis/interaction/) function: This allows customization of user interaction end time. The existing `.interaction()` functionality remains unchanged. + * Deprecated API: The function [`createTracer`](https://docs.newrelic.com/docs/browser/new-relic-browser/browser-apis/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 [#enable-feature] + + + + + ### Review the requirements [#review-requirements] + + This feature is tested and supported in line with our standard [browser support statement](https://docs.newrelic.com/docs/release-notes/new-relic-browser-release-notes/browser-agent-release-notes/#support-statement). + + + + + + ### Add the feature flag [#add-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: + + 1. Find the New Relic browser agent code in your webpage HTML. + + 2. In the `init` configuration object, add the `soft_nav` feature flag. Here's an example: + + ```js +