feat(tracing): Add JS Bundle Execution to the App Start span

Author: krystofwoldrich

CHANGELOG.md

@@ -35,6 +35,8 @@
 
   Note that the `Sentry.BrowserIntegrations`, `Sentry.Integration` and the Class style integrations will be removed in the next major version of the SDK.
 
+- Added JS Bundle Execution start information to the application start measurements ([#3857](https://github.com/getsentry/sentry-react-native/pull/3857))
+
 ### Fixes
 
 - Remove unused `rnpm` config ([#3811](https://github.com/getsentry/sentry-react-native/pull/3811))

src/js/tracing/reactnativeprofiler.tsx

@@ -1,4 +1,5 @@
-import { getCurrentHub, Profiler } from '@sentry/react';
+import { getClient, getCurrentHub, Profiler } from '@sentry/react';
+import { timestampInSeconds } from '@sentry/utils';
 
 import { createIntegration } from '../integrations/factory';
 import { ReactNativeTracing } from './reactnativetracing';
@@ -13,6 +14,13 @@ const ReactNativeProfilerGlobalState = {
 export class ReactNativeProfiler extends Profiler {
   public readonly name: string = 'ReactNativeProfiler';
 
+  public constructor(props: ConstructorParameters<typeof Profiler>[0]) {
+    const client = getClient();
+    const integration = client && client.getIntegrationByName && client.getIntegrationByName<ReactNativeTracing>('ReactNativeTracing');
+    integration && integration.setRootComponentFirstConstructorCallTimestampMs(timestampInSeconds() * 1000);
+    super(props);
+  }
+
   /**
    * Get the app root mount time.
    */

src/js/tracing/reactnativetracing.ts

@@ -7,6 +7,7 @@ import type {
   Event,
   EventProcessor,
   Integration,
+  Span,
   Transaction as TransactionType,
   TransactionContext,
 } from '@sentry/types';
@@ -23,6 +24,7 @@ import { cancelInBackground, onlySampleIfChildSpans } from './transaction';
 import type { BeforeNavigate, RouteChangeContextData } from './types';
 import {
   adjustTransactionDuration,
+  getBundleStartTimestampMs,
   getTimeOriginMilliseconds,
   isNearToNow,
   setSpanDurationAsMeasurement,
@@ -152,6 +154,7 @@ export class ReactNativeTracing implements Integration {
   private _hasSetTracePropagationTargets: boolean;
   private _hasSetTracingOrigins: boolean;
   private _currentViewName: string | undefined;
+  private _firstConstructorCallTimestampMs: number | undefined;
 
   public constructor(options: Partial<ReactNativeTracingOptions> = {}) {
     this._hasSetTracePropagationTargets = !!(
@@ -294,6 +297,13 @@ export class ReactNativeTracing implements Integration {
     this._appStartFinishTimestamp = endTimestamp;
   }
 
+  /**
+   * Sets the root component first constructor call timestamp.
+   */
+  public setRootComponentFirstConstructorCallTimestampMs(timestamp: number): void {
+    this._firstConstructorCallTimestampMs = timestamp;
+  }
+
   /**
    * Starts a new transaction for a user interaction.
    * @param userInteractionId Consists of `op` representation UI Event and `elementId` unique element identifier on current screen.
@@ -478,17 +488,46 @@ export class ReactNativeTracing implements Integration {
     }
 
     const op = appStart.isColdStart ? APP_START_COLD_OP : APP_START_WARM_OP;
-    transaction.startChild({
+    const appStartSpan = transaction.startChild({
       description: appStart.isColdStart ? 'Cold App Start' : 'Warm App Start',
       op,
       startTimestamp: appStartTimeSeconds,
       endTimestamp: this._appStartFinishTimestamp,
     });
+    this._addJSExecutionBeforeRoot(appStartSpan);
 
     const measurement = appStart.isColdStart ? APP_START_COLD : APP_START_WARM;
     transaction.setMeasurement(measurement, appStartDurationMilliseconds, 'millisecond');
   }
 
+  /**
+   * Adds JS Execution before React Root. If `Sentry.wrap` is not used, create a span for the start of JS Bundle execution.
+   */
+  private _addJSExecutionBeforeRoot(appStartSpan: Span): void {
+    const bundleStartTimestampMs = getBundleStartTimestampMs();
+    if (!bundleStartTimestampMs) {
+      return;
+    }
+
+    if (!this._firstConstructorCallTimestampMs) {
+      logger.warn('Missing the root component first constructor call timestamp.');
+      appStartSpan.startChild({
+        description: 'JS Bundle Execution Start',
+        op: appStartSpan.op,
+        startTimestamp: bundleStartTimestampMs / 1000,
+        endTimestamp: bundleStartTimestampMs / 1000,
+      });
+      return;
+    }
+
+    appStartSpan.startChild({
+      description: 'JS Bundle Execution Before React Root',
+      op: appStartSpan.op,
+      startTimestamp: bundleStartTimestampMs / 1000,
+      endTimestamp: this._firstConstructorCallTimestampMs / 1000,
+    });
+  }
+
   /** To be called when the route changes, but BEFORE the components of the new route mount. */
   private _onRouteWillChange(context: TransactionContext): TransactionType | undefined {
     return this._createRouteTransaction(context);

src/js/tracing/utils.ts

@@ -6,7 +6,9 @@ import {
   spanToJSON,
 } from '@sentry/core';
 import type { Span, TransactionContext, TransactionSource } from '@sentry/types';
-import { timestampInSeconds } from '@sentry/utils';
+import { logger, timestampInSeconds } from '@sentry/utils';
+
+import { RN_GLOBAL_OBJ } from '../utils/worldwide';
 
 export const defaultTransactionSource: TransactionSource = 'component';
 export const customTransactionSource: TransactionSource = 'custom';
@@ -111,3 +113,25 @@ export function setSpanDurationAsMeasurement(name: string, span: Span): void {
 
   setMeasurement(name, (spanEnd - spanStart) * 1000, 'millisecond');
 }
+
+/**
+ * Returns unix timestamp in ms of the bundle start time.
+ *
+ * If not available, returns undefined.
+ */
+export function getBundleStartTimestampMs(): number | undefined {
+  const bundleStartTime = RN_GLOBAL_OBJ.__BUNDLE_START_TIME__;
+  if (!bundleStartTime) {
+    logger.warn('Missing the bundle start time on the global object.');
+    return undefined;
+  }
+
+  if (!RN_GLOBAL_OBJ.nativePerformanceNow) {
+    // bundleStartTime is Date.now() in milliseconds
+    return bundleStartTime;
+  }
+
+  // nativePerformanceNow() is monotonic clock like performance.now()
+  const approxStartingTimeOrigin = Date.now() - RN_GLOBAL_OBJ.nativePerformanceNow();
+  return approxStartingTimeOrigin + bundleStartTime;
+}

src/js/utils/worldwide.ts

@@ -22,6 +22,8 @@ export interface ReactNativeInternalGlobal extends InternalGlobal {
       ___SENTRY_METRO_DEV_SERVER___?: string;
     };
   };
+  __BUNDLE_START_TIME__?: number;
+  nativePerformanceNow?: () => number;
 }
 
 /** Get's the global object for the current JavaScript runtime */