feat(browser): LP to PP release of browser SPA

feat(browser): LP to PP release of browser SPA

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
+---
+
+<Callout variant="important">
+    This feature is in public preview. It will eventually replace the existing browser SPA experience.
+    </Callout> 
+
+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]
+
+<Steps>
+
+    <Step>
+        ### 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).
+
+
+    </Step>
+
+    <Step>
+        ### 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
+                <script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
+                ```
+
+            3. Deploy your app.
+
+        Need to disable this feature? Simply remove the feature flag.
+
+    </Step>
+
+    <Step>
+        ### Confirm data is being sent to New Relic [#confirm-data]
+
+        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.
+
+    </Step>
+
+</Steps>
+
+## Known issues [#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()`](https://docs.newrelic.com/docs/browser/new-relic-browser/browser-apis/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 [#feedback]
+
+[Submit a GitHub issue](https://github.com/newrelic/newrelic-browser-agent/issues) to report any bugs, feature requests, or performance improvements.
+
+For any other feedback, share your thoughts and suggestions by emailing `[email protected]` with a subject line starting with `[SoftNav]: `.

src/nav/browser.yml

@@ -82,6 +82,8 @@ pages:
         path: /docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring
       - title: Install SPA monitoring
         path: /docs/browser/single-page-app-monitoring/get-started/install-single-page-app-monitoring
+      - title: (New) Browser SPA monitoring 2.0
+        path: /docs/browser/single-page-app-monitoring/get-started/browser-spa-v2
       - title: View SPA data in Browser UI
         path: /docs/browser/single-page-app-monitoring/use-spa-data/view-spa-data-browser-ui
       - title: SPA monitoring features