Update current state in page load and navigation plugins

packages/core/lib/core.ts

@@ -45,7 +45,7 @@ export interface ClientOptions<S extends CoreSchema, C extends Configuration, T>
   resourceAttributesSource: ResourceAttributeSource<C>
   spanAttributesSource: SpanAttributesSource<C>
   schema: S
-  plugins: (spanFactory: SpanFactory<C>, spanContextStorage: SpanContextStorage) => Array<Plugin<C>>
+  plugins: (spanFactory: SpanFactory<C>, spanContextStorage: SpanContextStorage, setAppState: (appState: AppState) => void, appState: AppState) => Array<Plugin<C>>
   persistence: Persistence
   retryQueueFactory: RetryQueueFactory
   spanContextStorage?: SpanContextStorage
@@ -74,7 +74,7 @@ export function createClient<S extends CoreSchema, C extends Configuration, T> (
   const setAppState = (state: AppState) => {
     appState = state
   }
-  const plugins = options.plugins(spanFactory, spanContextStorage)
+  const plugins = options.plugins(spanFactory, spanContextStorage, setAppState, appState)
 
   return {
     start: (config: C | string) => {
@@ -149,7 +149,7 @@ export function createClient<S extends CoreSchema, C extends Configuration, T> (
       }
 
       for (const plugin of plugins) {
-        plugin.configure(configuration, spanFactory, setAppState)
+        plugin.configure(configuration, spanFactory, setAppState, appState)
       }
     },
     startSpan: (name, spanOptions?: SpanOptions) => {

packages/core/lib/plugin.ts

@@ -3,5 +3,5 @@ import type { AppState } from './core'
 import type { SpanFactory } from './span-factory'
 
 export interface Plugin<C extends Configuration> {
-  configure: (configuration: InternalConfiguration<C>, spanFactory: SpanFactory<C>, setAppState: (state: AppState) => void) => void
+  configure: (configuration: InternalConfiguration<C>, spanFactory: SpanFactory<C>, setAppState: (state: AppState) => void, state?: AppState) => void
 }

packages/platforms/browser/lib/auto-instrumentation/full-page-load-plugin.ts

@@ -6,6 +6,7 @@ import { getPermittedAttributes } from '../send-page-attributes'
 import type { WebVitals } from '../web-vitals'
 import { instrumentPageLoadPhaseSpans } from './page-load-phase-spans'
 import { defaultRouteResolver } from '../default-routing-provider'
+import type { AppState } from '../../../../core/lib/core'
 
 export class FullPageLoadPlugin implements Plugin<BrowserConfiguration> {
   private readonly spanFactory: SpanFactory<BrowserConfiguration>
@@ -14,6 +15,8 @@ export class FullPageLoadPlugin implements Plugin<BrowserConfiguration> {
   private readonly onSettle: OnSettle
   private readonly webVitals: WebVitals
   private readonly performance: PerformanceWithTiming
+  private readonly setAppState: (appState: AppState) => void
+  private readonly appState: AppState
 
   // if the page was backgrounded at any point in the loading process a page
   // load span is invalidated as the browser will deprioritise the page
@@ -26,14 +29,18 @@ export class FullPageLoadPlugin implements Plugin<BrowserConfiguration> {
     webVitals: WebVitals,
     onSettle: OnSettle,
     backgroundingListener: BackgroundingListener,
-    performance: PerformanceWithTiming
+    performance: PerformanceWithTiming,
+    setAppState: (appState: AppState) => void,
+    appState: AppState
   ) {
     this.document = document
     this.location = location
     this.spanFactory = spanFactory
     this.webVitals = webVitals
     this.onSettle = onSettle
     this.performance = performance
+    this.setAppState = setAppState
+    this.appState = appState
 
     backgroundingListener.onStateChange(state => {
       if (!this.wasBackgrounded && state === 'in-background') {
@@ -87,6 +94,9 @@ export class FullPageLoadPlugin implements Plugin<BrowserConfiguration> {
 
       this.webVitals.attachTo(span)
       this.spanFactory.endSpan(span, endTime)
+      if (this.appState === 'starting') {
+        this.setAppState('ready')
+      }
     })
   }
 }

packages/platforms/browser/lib/auto-instrumentation/route-change-plugin.ts

@@ -4,6 +4,7 @@ import type { BrowserConfiguration } from '../config'
 import type { RouteChangeSpanEndOptions, RouteChangeSpanOptions } from '../routing-provider'
 import { getPermittedAttributes } from '../send-page-attributes'
 import { defaultRouteResolver } from '../default-routing-provider'
+import type { AppState } from '../../../../core/lib/core'
 
 // exclude isFirstClass from the route change option schema
 const { startTime, parentContext, makeCurrentContext } = coreSpanOptionSchema
@@ -27,7 +28,8 @@ export class RouteChangePlugin implements Plugin<BrowserConfiguration> {
   constructor (
     private readonly spanFactory: SpanFactory<BrowserConfiguration>,
     private readonly location: Location,
-    private readonly document: Document
+    private readonly document: Document,
+    private readonly setAppState: (appState: AppState) => void
   ) {}
 
   configure (configuration: InternalConfiguration<BrowserConfiguration>) {
@@ -61,7 +63,7 @@ export class RouteChangePlugin implements Plugin<BrowserConfiguration> {
           } satisfies Span
         }
       }
-
+      this.setAppState('navigating')
       // create internal options for validation
       const routeChangeSpanOptions = {
         ...options,
@@ -79,7 +81,6 @@ export class RouteChangePlugin implements Plugin<BrowserConfiguration> {
       // update the span name using the validated route
       cleanOptions.name += route
       const span = this.spanFactory.startSpan(cleanOptions.name, cleanOptions.options)
-
       span.setAttribute('bugsnag.span.category', 'route_change')
       span.setAttribute('bugsnag.browser.page.route', route)
       span.setAttribute('bugsnag.browser.page.previous_route', previousRoute)
@@ -125,6 +126,7 @@ export class RouteChangePlugin implements Plugin<BrowserConfiguration> {
           }
 
           this.spanFactory.toPublicApi(span).end(options.endTime)
+          this.setAppState('ready')
         }
 
       } satisfies Span

packages/platforms/browser/lib/browser.ts

@@ -50,7 +50,7 @@ if (typeof window === 'undefined' || typeof document === 'undefined') {
     deliveryFactory: createFetchDeliveryFactory(window.fetch, clock, backgroundingListener),
     idGenerator,
     schema: createSchema(window.location.hostname, new DefaultRoutingProvider()),
-    plugins: (spanFactory, spanContextStorage) => [
+    plugins: (spanFactory, spanContextStorage, setAppState, appState) => [
       onSettle,
       new FullPageLoadPlugin(
         document,
@@ -59,13 +59,15 @@ if (typeof window === 'undefined' || typeof document === 'undefined') {
         webVitals,
         onSettle,
         backgroundingListener,
-        performance
+        performance,
+        setAppState,
+        appState
       ),
       // ResourceLoadPlugin should always come after FullPageLoad plugin, as it should use that
       // span context as the parent of it's spans
       new ResourceLoadPlugin(spanFactory, spanContextStorage, window.PerformanceObserver),
       new NetworkRequestPlugin(spanFactory, spanContextStorage, fetchRequestTracker, xhrRequestTracker),
-      new RouteChangePlugin(spanFactory, window.location, document)
+      new RouteChangePlugin(spanFactory, window.location, document, setAppState)
     ],
     persistence,
     retryQueueFactory: (delivery, retryQueueMaxSize) => new InMemoryQueue(delivery, retryQueueMaxSize)