Track JS bundle parse time as a Sentry span

src/CONST/index.ts

@@ -1778,7 +1778,11 @@ const CONST = {
         // Span names
         SPAN_OPEN_REPORT: 'ManualOpenReport',
         SPAN_APP_STARTUP: 'ManualAppStartup',
+        SPAN_JS_PARSE_TIME: 'ManualJsParseTime',
         SPAN_NAVIGATE_TO_REPORTS: 'ManualNavigateToReports',
+        SPAN_NAVIGATE_TO_REPORTS_TAB: 'ManualNavigateToReportsTab',
+        SPAN_NAVIGATE_TO_REPORTS_TAB_RENDER: 'ManualNavigateToReportsTabRender',
+        SPAN_ON_LAYOUT_SKELETON_REPORTS: 'ManualOnLayoutSkeletonReports',
         SPAN_NAVIGATE_TO_INBOX_TAB: 'ManualNavigateToInboxTab',
         SPAN_OD_ND_TRANSITION: 'ManualOdNdTransition',
         SPAN_OD_ND_TRANSITION_LOGGED_OUT: 'ManualOdNdTransitionLoggedOut',

src/libs/telemetry/activeSpans.ts

@@ -1,4 +1,4 @@
-import type {StartSpanOptions} from '@sentry/core';
+import type {SpanTimeInput, StartSpanOptions} from '@sentry/core';
 import * as Sentry from '@sentry/react-native';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
@@ -32,7 +32,7 @@ function startSpan(spanId: string, options: StartSpanOptions, extraOptions: Star
     return span;
 }
 
-function endSpan(spanId: string) {
+function endSpan(spanId: string, endTime?: SpanTimeInput) {
     const span = activeSpans.get(spanId);
 
     if (!span) {
@@ -42,7 +42,7 @@ function endSpan(spanId: string) {
     Log.info(`[Sentry][${spanId}] Ending span`, undefined, {spanId, timestamp: Date.now()});
     span.setStatus({code: 1});
     span.setAttribute(CONST.TELEMETRY.ATTRIBUTE_FINISHED_MANUALLY, true);
-    span.end();
+    span.end(endTime);
     activeSpans.delete(spanId);
 }
 

src/setup/telemetry/index.ts

@@ -1,14 +1,17 @@
 import * as Sentry from '@sentry/react-native';
+import {getBundleStartTimestampMs} from '@sentry/react-native/dist/js/tracing/utils';
 import {Platform} from 'react-native';
 import {isDevelopment} from '@libs/Environment/Environment';
-import {startSpan} from '@libs/telemetry/activeSpans';
+import {endSpan, startSpan} from '@libs/telemetry/activeSpans';
 import {breadcrumbsIntegration, browserProfilingIntegration, consoleIntegration, navigationIntegration, tracingIntegration} from '@libs/telemetry/integrations';
 import processBeforeSendTransactions from '@libs/telemetry/middlewares';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import pkg from '../../../package.json';
 import makeDebugTransport from './debugTransport';
 
+const bundleEndMs = Date.now();
+
 export default function (): void {
     // With Sentry enabled in dev mode, profiling on iOS and Android does not work
     // If you want to enable Sentry in dev, set ENABLE_SENTRY_ON_DEV=true in .env
@@ -39,4 +42,16 @@ export default function (): void {
         name: CONST.TELEMETRY.SPAN_APP_STARTUP,
         op: CONST.TELEMETRY.SPAN_APP_STARTUP,
     });
+
+    const bundleStartMs = getBundleStartTimestampMs();
+    if (bundleStartMs) {
+        const durationMs = bundleEndMs - bundleStartMs;
+        console.debug(`[Telemetry] JS parse time: ${durationMs}ms`);
+        startSpan(CONST.TELEMETRY.SPAN_JS_PARSE_TIME, {
+            name: CONST.TELEMETRY.SPAN_JS_PARSE_TIME,
+            op: CONST.TELEMETRY.SPAN_JS_PARSE_TIME,
+            startTime: bundleStartMs / 1000,
+        });
+        endSpan(CONST.TELEMETRY.SPAN_JS_PARSE_TIME, bundleEndMs / 1000);
+    }
 }