Merge pull request #90667 from margelo/@chrispader/add-startup-network-request-sentry-span

[No QA] feat: Add Sentry span for `OpenApp`/`ReconnectApp` network request on app startup

Author: mountiny

src/CONST/index.ts

@@ -2026,6 +2026,7 @@ const CONST = {
         // Span names
         SPAN_OPEN_REPORT: 'ManualOpenReport',
         SPAN_APP_STARTUP: 'ManualAppStartup',
+        SPAN_APP_STARTUP_NETWORK_REQUEST: 'ManualAppStartupNetworkRequest',
         SPAN_NAVIGATE_TO_REPORTS: 'ManualNavigateToReports',
         SPAN_NAVIGATE_TO_INBOX_TAB: 'ManualNavigateToInboxTab',
         SPAN_OD_ND_TRANSITION: 'ManualOdNdTransition',
@@ -2113,6 +2114,7 @@ const CONST = {
         ATTRIBUTE_IS_MULTI_SCAN: 'is_multi_scan',
         ATTRIBUTE_SOURCE: 'source',
         ATTRIBUTE_ODOMETER_IMAGE_TYPE: 'odometer_image_type',
+        ATTRIBUTE_DURATION_SINCE_NATIVE_APP_STARTUP_MS: 'duration_since_native_app_startup_ms',
         /** Follow-up action after expense submit (action-based; used as submit_follow_up_action in span). */
         SUBMIT_FOLLOW_UP_ACTION: {
             DISMISS_MODAL_AND_OPEN_REPORT: 'dismiss_modal_and_open_report',

src/libs/AppStartupNetworkRequest.ts

@@ -0,0 +1,10 @@
+import {WRITE_COMMANDS} from './API/types';
+
+/**
+ * One of these API requests is executed on every app startup.
+ * We measure the duration from native app startup (before JS runtime is loaded)
+ * to the completion of this request and send the span to Sentry.
+ */
+const APP_STARTUP_NETWORK_REQUEST = new Set<string>([WRITE_COMMANDS.OPEN_APP, WRITE_COMMANDS.RECONNECT_APP]);
+
+export default APP_STARTUP_NETWORK_REQUEST;

src/libs/HttpUtils.ts

@@ -13,6 +13,7 @@ import {getCommandURL} from './ApiUtils';
 import HttpsError from './Errors/HttpsError';
 import {setLoadTestParameters} from './Network/LoadTestState';
 import prepareRequestPayload from './prepareRequestPayload';
+import markAppStartupNetworkRequestEnd from './telemetry/markAppStartupNetworkRequestEnd';
 
 let shouldFailAllRequests = false;
 let shouldForceOffline = false;
@@ -64,6 +65,9 @@ function processHTTPRequest<TKey extends OnyxKey>(
     abortSignal: AbortSignal | undefined = undefined,
 ): Promise<Response<TKey>> {
     const startTime = new Date().valueOf();
+
+    const command = url.match(APICommandRegex)?.[1];
+
     return fetch(url, {
         // We hook requests to the same Controller signal, so we can cancel them all at once
         signal: abortSignal,
@@ -81,8 +85,8 @@ function processHTTPRequest<TKey extends OnyxKey>(
             }
 
             // We are calculating the skew to minimize the delay when posting the messages
-            const match = url.match(APICommandRegex)?.[1];
-            if (match && addSkewList.has(match) && response.headers) {
+
+            if (command && addSkewList.has(command) && response.headers) {
                 const dateHeaderValue = response.headers.get('Date');
                 const serverTime = dateHeaderValue ? new Date(dateHeaderValue).valueOf() : new Date().valueOf();
                 const endTime = new Date().valueOf();
@@ -162,7 +166,8 @@ function processHTTPRequest<TKey extends OnyxKey>(
                 alertUser();
             }
             return response;
-        });
+        })
+        .finally(() => markAppStartupNetworkRequestEnd(command));
 }
 
 /**

src/libs/Middleware/SentryServerTiming.ts

@@ -1,5 +1,6 @@
+import type {SpanAttributes} from '@sentry/core';
 import {WRITE_COMMANDS} from '@libs/API/types';
-import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans';
+import {cancelSpan, endSpanWithAttributes, startSpan} from '@libs/telemetry/activeSpans';
 import CONST from '@src/CONST';
 import type Middleware from './types';
 
@@ -67,11 +68,10 @@ const SentryServerTiming: Middleware = (response, request) => {
 
     return response
         .then((data) => {
-            const span = getSpan(spanId);
-            span?.setAttributes({
+            const attributes: SpanAttributes = {
                 [CONST.TELEMETRY.ATTRIBUTE_JSON_CODE]: data?.jsonCode,
-            });
-            endSpan(spanId);
+            };
+            endSpanWithAttributes(spanId, attributes);
             return data;
         })
         .catch((error) => {

src/libs/telemetry/activeSpans.ts

@@ -1,11 +1,12 @@
+import {SPAN_STATUS_OK} from '@sentry/core';
 import type {SpanAttributeValue, StartSpanOptions} from '@sentry/core';
 import * as Sentry from '@sentry/react-native';
 import {AppState} from 'react-native';
 import CONST from '@src/CONST';
 
 type ActiveSpanEntry = {
     span: ReturnType<typeof Sentry.startInactiveSpan>;
-    startTime: number;
+    startTimeForLog: number;
 };
 
 const activeSpans = new Map<string, ActiveSpanEntry>();
@@ -35,7 +36,15 @@ function startSpan(spanId: string, options: StartSpanOptions, extraOptions: Star
     if (extraOptions.minDuration) {
         span.setAttribute(CONST.TELEMETRY.ATTRIBUTE_MIN_DURATION, extraOptions.minDuration);
     }
-    activeSpans.set(spanId, {span, startTime: performance.now()});
+
+    let startTimeForLog: number;
+    if (typeof options.startTime === 'number') {
+        startTimeForLog = options.startTime;
+    } else {
+        startTimeForLog = performance.now();
+    }
+
+    activeSpans.set(spanId, {span, startTimeForLog});
 
     return span;
 }
@@ -46,11 +55,12 @@ function endSpan(spanId: string) {
     if (!entry) {
         return;
     }
-    const {span, startTime} = entry;
+    const {span, startTimeForLog} = entry;
     const now = performance.now();
-    const durationMs = Math.round(now - startTime);
+    const durationMs = Math.round(now - startTimeForLog);
     console.debug(`[Sentry][${spanId}] Ending span (${durationMs}ms)`, {spanId, durationMs, timestamp: now, attributes: Sentry.spanToJSON(span).data});
-    span.setStatus({code: 1});
+    span.setStatus({code: SPAN_STATUS_OK});
+
     span.setAttribute(CONST.TELEMETRY.ATTRIBUTE_FINISHED_MANUALLY, true);
     span.end();
     activeSpans.delete(spanId);
@@ -64,7 +74,7 @@ function cancelSpan(spanId: string) {
     entry.span.setAttribute(CONST.TELEMETRY.ATTRIBUTE_CANCELED, true);
     // In Sentry there are only OK or ERROR status codes.
     // We treat canceled spans as OK, so we can properly track spans that are not finished at all (their status would be different)
-    entry.span.setStatus({code: 1});
+    entry.span.setStatus({code: SPAN_STATUS_OK});
     endSpan(spanId);
 }
 
@@ -86,7 +96,7 @@ function getSpan(spanId: string) {
     return activeSpans.get(spanId)?.span;
 }
 
-function endSpanWithAttributes(spanId: string, attributes: Record<string, SpanAttributeValue>) {
+function endSpanWithAttributes(spanId: string, attributes: Record<string, SpanAttributeValue | undefined>) {
     const span = getSpan(spanId);
     span?.setAttributes(attributes);
     endSpan(spanId);

src/libs/telemetry/markAppStartupNetworkRequestEnd.ts

@@ -0,0 +1,16 @@
+import APP_STARTUP_NETWORK_REQUEST from '@libs/AppStartupNetworkRequest';
+import CONST from '@src/CONST';
+import {endSpanWithAttributes} from './activeSpans';
+
+/** End the span for the app startup network request. */
+function markAppStartupNetworkRequestEnd(command: string | undefined): void {
+    if (!command || !APP_STARTUP_NETWORK_REQUEST.has(command)) {
+        return;
+    }
+
+    endSpanWithAttributes(CONST.TELEMETRY.SPAN_APP_STARTUP_NETWORK_REQUEST, {
+        [CONST.TELEMETRY.ATTRIBUTE_COMMAND]: command,
+    });
+}
+
+export default markAppStartupNetworkRequestEnd;

src/libs/telemetry/markOpenReportEnd.ts

@@ -1,7 +1,8 @@
+import type {SpanAttributes} from '@sentry/core';
 import {isOneTransactionReport, isReportTransactionThread} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
-import {endSpan, getSpan} from './activeSpans';
+import {endSpanWithAttributes} from './activeSpans';
 
 type MarkOpenReportEndOptions = {
     warm?: boolean;
@@ -17,18 +18,19 @@ function markOpenReportEnd(report: OnyxTypes.Report, options: MarkOpenReportEndO
     const isOneTransactionThread = isOneTransactionReport(report);
 
     const spanId = `${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${reportID}`;
-    const span = getSpan(spanId);
-    span?.setAttributes({
+
+    const attributes: SpanAttributes = {
         [CONST.TELEMETRY.ATTRIBUTE_IS_TRANSACTION_THREAD]: isTransactionThread,
         [CONST.TELEMETRY.ATTRIBUTE_IS_ONE_TRANSACTION_REPORT]: isOneTransactionThread,
         [CONST.TELEMETRY.ATTRIBUTE_REPORT_TYPE]: type,
         [CONST.TELEMETRY.ATTRIBUTE_CHAT_TYPE]: chatType,
-    });
+    };
+
     if (options.warm !== undefined) {
-        span?.setAttribute(CONST.TELEMETRY.ATTRIBUTE_IS_WARM, options.warm);
+        attributes[CONST.TELEMETRY.ATTRIBUTE_IS_WARM] = options.warm;
     }
 
-    endSpan(spanId);
+    endSpanWithAttributes(spanId, attributes);
 }
 
 export default markOpenReportEnd;

src/setup/telemetry/index.native.ts

@@ -23,6 +23,12 @@ export default function (): void {
         startTime: nativeAppStartTimeMs,
     });
 
+    startSpan(CONST.TELEMETRY.SPAN_APP_STARTUP_NETWORK_REQUEST, {
+        name: CONST.TELEMETRY.SPAN_APP_STARTUP_NETWORK_REQUEST,
+        op: CONST.TELEMETRY.SPAN_APP_STARTUP_NETWORK_REQUEST,
+        startTime: nativeAppStartTimeMs,
+    });
+
     requestAnimationFrame(() => {
         // Use typeof guard — bare identifier throws ReferenceError if moduleInitPolyfill didn't run
         const initTimes = typeof __moduleInitTimes !== 'undefined' ? (__moduleInitTimes as Record<string, number>) : undefined;