Merge pull request Expensify#82287 from callstack-internal/sentry-create-expense-flow-improvements

[NOQA] Sentry: Add spans for expense creation flow

Author: marcaaron

src/CONST/index.ts

@@ -1726,6 +1726,8 @@ const CONST = {
         SIDEBAR_LOADED: 'sidebar_loaded',
         LOAD_SEARCH_OPTIONS: 'load_search_options',
         SEND_MESSAGE: 'send_message',
+        SUBMIT_EXPENSE: 'submit_expense',
+        NAVIGATE_AFTER_EXPENSE_CREATE: 'navigate_after_expense_create',
         OPEN_CREATE_EXPENSE: 'open_create_expense',
         OPEN_CREATE_EXPENSE_CONTACT: 'open_create_expense_contact',
         OPEN_CREATE_EXPENSE_APPROVE: 'open_create_expense_approve',
@@ -1805,6 +1807,9 @@ const CONST = {
         SPAN_OD_ND_TRANSITION_LOGGED_OUT: 'ManualOdNdTransitionLoggedOut',
         SPAN_OPEN_SEARCH_ROUTER: 'ManualOpenSearchRouter',
         SPAN_OPEN_CREATE_EXPENSE: 'ManualOpenCreateExpense',
+        SPAN_SUBMIT_EXPENSE: 'ManualCreateExpenseSubmit',
+        SPAN_NAVIGATE_AFTER_EXPENSE_CREATE: 'ManualCreateExpenseNavigation',
+        SPAN_EXPENSE_SERVER_RESPONSE: 'ManualCreateExpenseServerResponse',
         SPAN_SEND_MESSAGE: 'ManualSendMessage',
         SPAN_NOT_FOUND_PAGE: 'ManualNotFoundPage',
         SPAN_SKELETON: 'ManualSkeleton',
@@ -1845,6 +1850,22 @@ const CONST = {
         ATTRIBUTE_MIN_DURATION: 'min_duration',
         ATTRIBUTE_FINISHED_MANUALLY: 'finished_manually',
         ATTRIBUTE_SKELETON_PREFIX: 'skeleton.',
+        ATTRIBUTE_SCENARIO: 'scenario',
+        ATTRIBUTE_HAS_RECEIPT: 'has_receipt',
+        ATTRIBUTE_IS_FROM_GLOBAL_CREATE: 'is_from_global_create',
+        ATTRIBUTE_COMMAND: 'command',
+        ATTRIBUTE_JSON_CODE: 'json_code',
+        SUBMIT_EXPENSE_SCENARIO: {
+            REQUEST_MONEY_MANUAL: 'request_money_manual',
+            REQUEST_MONEY_SCAN: 'request_money_scan',
+            DISTANCE: 'distance',
+            TRACK_EXPENSE: 'track_expense',
+            SPLIT: 'split',
+            SPLIT_RECEIPT: 'split_receipt',
+            SPLIT_GLOBAL: 'split_global',
+            INVOICE: 'invoice',
+            PER_DIEM: 'per_diem',
+        },
         // Event names
         EVENT_SKELETON_ATTRIBUTES_UPDATE: 'skeleton_attributes_updated',
         CONFIG: {

src/components/Search/index.tsx

@@ -66,6 +66,7 @@ import {
     shouldShowYear as shouldShowYearUtil,
 } from '@libs/SearchUIUtils';
 import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans';
+import markNavigateAfterExpenseCreateEnd from '@libs/telemetry/markNavigateAfterExpenseCreateEnd';
 import {getOriginalTransactionWithSplitInfo, hasValidModifiedAmount, isOnHold, isTransactionPendingDelete} from '@libs/TransactionUtils';
 import Navigation, {navigationRef} from '@navigation/Navigation';
 import type {SearchFullscreenNavigatorParamList} from '@navigation/types';
@@ -1144,6 +1145,7 @@ function Search({
     const onLayout = useCallback(() => {
         endSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
         endSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB_RENDER);
+        markNavigateAfterExpenseCreateEnd();
         handleSelectionListScroll(sortedData, searchListRef.current);
     }, [handleSelectionListScroll, sortedData]);
 
@@ -1191,12 +1193,14 @@ function Search({
     if (searchResults === undefined) {
         Log.alert('[Search] Undefined search type');
         cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
+        cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE);
         return <FullPageOfflineBlockingView>{null}</FullPageOfflineBlockingView>;
     }
 
     if (hasErrors) {
         const isInvalidQuery = searchRequestResponseStatusCode === CONST.JSON_CODE.INVALID_SEARCH_QUERY;
         cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
+        cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE);
         return (
             <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
                 <FullPageErrorView
@@ -1213,6 +1217,7 @@ function Search({
     const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
     if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType)) {
         cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
+        cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE);
         return (
             <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
                 <EmptySearchView

src/libs/API/index.ts

@@ -6,6 +6,7 @@ import type {AnyRequestMatcher, EnablePolicyFeatureCommand} from '@libs/actions/
 import Log from '@libs/Log';
 import {handleDeletedAccount, HandleUnusedOptimisticID, Logging, Pagination, Reauthentication, RecheckConnection, SaveResponseInOnyx, SupportalPermission} from '@libs/Middleware';
 import FraudMonitoring from '@libs/Middleware/FraudMonitoring';
+import SentryServerTiming from '@libs/Middleware/SentryServerTiming';
 import {isOffline} from '@libs/Network/NetworkStore';
 import {push as pushToSequentialQueue, waitForIdle as waitForSequentialQueueIdle} from '@libs/Network/SequentialQueue';
 import Pusher from '@libs/Pusher';
@@ -42,6 +43,9 @@ addMiddleware(HandleUnusedOptimisticID);
 
 addMiddleware(Pagination);
 
+// SentryServerTiming - Tracks server round-trip time for configured command groups via Sentry spans.
+addMiddleware(SentryServerTiming);
+
 // SaveResponseInOnyx - Merges either the successData or failureData (or finallyData, if included in place of the former two values) into Onyx depending on if the call was successful or not. This needs to be the LAST middleware we use, don't add any
 // middlewares after this, because the SequentialQueue depends on the result of this middleware to pause the queue (if needed) to bring the app to an up-to-date state.
 addMiddleware(SaveResponseInOnyx);

src/libs/Middleware/SentryServerTiming.ts

@@ -0,0 +1,83 @@
+import {WRITE_COMMANDS} from '@libs/API/types';
+import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans';
+import CONST from '@src/CONST';
+import type Middleware from './types';
+
+/**
+ * Configuration for a tracked command group.
+ * Maps a set of write commands to a Sentry span operation name.
+ */
+type TrackedCommandGroup = {
+    /** Set of write commands that should be instrumented */
+    commands: Set<string>;
+    /** Sentry span operation name */
+    spanOp: string;
+    /** Human-readable span name */
+    spanName: string;
+};
+
+/**
+ * Registry of command groups to instrument with server round-trip timing.
+ * Add new entries here to track additional flows without creating new middlewares.
+ */
+const TRACKED_COMMAND_GROUPS: TrackedCommandGroup[] = [
+    {
+        commands: new Set<string>([
+            WRITE_COMMANDS.REQUEST_MONEY,
+            WRITE_COMMANDS.CREATE_PER_DIEM_REQUEST,
+            WRITE_COMMANDS.SPLIT_BILL,
+            WRITE_COMMANDS.SPLIT_BILL_AND_OPEN_REPORT,
+            WRITE_COMMANDS.START_SPLIT_BILL,
+            WRITE_COMMANDS.CREATE_DISTANCE_REQUEST,
+            WRITE_COMMANDS.TRACK_EXPENSE,
+            WRITE_COMMANDS.SEND_INVOICE,
+        ]),
+        spanOp: CONST.TELEMETRY.SPAN_EXPENSE_SERVER_RESPONSE,
+        spanName: 'expense-server-response',
+    },
+];
+
+/**
+ * Finds the tracked command group for a given command, if any.
+ */
+function findTrackedGroup(command: string): TrackedCommandGroup | undefined {
+    return TRACKED_COMMAND_GROUPS.find((group) => group.commands.has(command));
+}
+
+/**
+ * Middleware that tracks server round-trip time for configured command groups via Sentry spans.
+ * For non-tracked commands, this is a no-op pass-through.
+ *
+ * To add tracking for a new flow, add an entry to TRACKED_COMMAND_GROUPS above.
+ */
+const SentryServerTiming: Middleware = (response, request) => {
+    const group = findTrackedGroup(request.command);
+    if (!group) {
+        return response;
+    }
+
+    const spanId = `${group.spanOp}_${request.requestID}`;
+    startSpan(spanId, {
+        name: group.spanName,
+        op: group.spanOp,
+        attributes: {
+            [CONST.TELEMETRY.ATTRIBUTE_COMMAND]: request.command,
+        },
+    });
+
+    return response
+        .then((data) => {
+            const span = getSpan(spanId);
+            span?.setAttributes({
+                [CONST.TELEMETRY.ATTRIBUTE_JSON_CODE]: data?.jsonCode,
+            });
+            endSpan(spanId);
+            return data;
+        })
+        .catch((error) => {
+            cancelSpan(spanId);
+            throw error;
+        });
+};
+
+export default SentryServerTiming;

src/libs/actions/IOU/index.ts

@@ -1144,6 +1144,13 @@ function handleNavigateAfterExpenseCreate({
     if (!shouldHandleNavigation) {
         return;
     }
+
+    Performance.markStart(CONST.TIMING.NAVIGATE_AFTER_EXPENSE_CREATE);
+    startSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE, {
+        name: 'navigate-after-expense-create',
+        op: CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE,
+    });
+
     const queryString = buildCannedSearchQuery({type});
     Navigation.isNavigationReady().then(() => {
         if (getIsNarrowLayout()) {

src/libs/telemetry/getSubmitExpenseScenario.ts

@@ -0,0 +1,61 @@
+import type {IOUType} from '@src/CONST';
+import CONST from '@src/CONST';
+
+type GetSubmitExpenseScenarioParams = {
+    iouType: IOUType;
+    isDistanceRequest: boolean;
+    isMovingTransactionFromTrackExpense: boolean;
+    isUnreported: boolean;
+    isCategorizingTrackExpense: boolean;
+    isSharingTrackExpense: boolean;
+    isPerDiemRequest: boolean;
+    isFromGlobalCreate: boolean;
+    hasReceiptFiles: boolean;
+};
+
+/**
+ * Determines the telemetry scenario string for a submit expense action.
+ */
+function getSubmitExpenseScenario({
+    iouType,
+    isDistanceRequest,
+    isMovingTransactionFromTrackExpense,
+    isUnreported,
+    isCategorizingTrackExpense,
+    isSharingTrackExpense,
+    isPerDiemRequest,
+    isFromGlobalCreate,
+    hasReceiptFiles,
+}: GetSubmitExpenseScenarioParams): string {
+    const {SUBMIT_EXPENSE_SCENARIO} = CONST.TELEMETRY;
+
+    if (iouType !== CONST.IOU.TYPE.TRACK && isDistanceRequest && !isMovingTransactionFromTrackExpense && !isUnreported) {
+        return SUBMIT_EXPENSE_SCENARIO.DISTANCE;
+    }
+    if (iouType === CONST.IOU.TYPE.SPLIT) {
+        if (hasReceiptFiles) {
+            return SUBMIT_EXPENSE_SCENARIO.SPLIT_RECEIPT;
+        }
+        if (isFromGlobalCreate) {
+            return SUBMIT_EXPENSE_SCENARIO.SPLIT_GLOBAL;
+        }
+        return SUBMIT_EXPENSE_SCENARIO.SPLIT;
+    }
+    if (iouType === CONST.IOU.TYPE.INVOICE) {
+        return SUBMIT_EXPENSE_SCENARIO.INVOICE;
+    }
+    if (iouType === CONST.IOU.TYPE.TRACK || isCategorizingTrackExpense || isSharingTrackExpense) {
+        return SUBMIT_EXPENSE_SCENARIO.TRACK_EXPENSE;
+    }
+    if (isPerDiemRequest) {
+        return SUBMIT_EXPENSE_SCENARIO.PER_DIEM;
+    }
+    if (hasReceiptFiles) {
+        return SUBMIT_EXPENSE_SCENARIO.REQUEST_MONEY_SCAN;
+    }
+
+    return SUBMIT_EXPENSE_SCENARIO.REQUEST_MONEY_MANUAL;
+}
+
+export default getSubmitExpenseScenario;
+export type {GetSubmitExpenseScenarioParams};

src/libs/telemetry/markNavigateAfterExpenseCreateEnd.ts

@@ -0,0 +1,16 @@
+import Performance from '@libs/Performance';
+import CONST from '@src/CONST';
+import {endSpan, getSpan} from './activeSpans';
+
+/**
+ * Mark the post-submit navigation telemetry span as finished.
+ */
+function markNavigateAfterExpenseCreateEnd() {
+    if (!getSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE)) {
+        return;
+    }
+    endSpan(CONST.TELEMETRY.SPAN_NAVIGATE_AFTER_EXPENSE_CREATE);
+    Performance.markEnd(CONST.TIMING.NAVIGATE_AFTER_EXPENSE_CREATE);
+}
+
+export default markNavigateAfterExpenseCreateEnd;

src/libs/telemetry/markSubmitExpenseEnd.ts

@@ -0,0 +1,17 @@
+import Performance from '@libs/Performance';
+import CONST from '@src/CONST';
+import {endSpan, getSpan} from './activeSpans';
+
+/**
+ * Mark the submit expense telemetry span as finished.
+ * Called after all API.write() calls for the expense have been dispatched.
+ */
+function markSubmitExpenseEnd() {
+    if (!getSpan(CONST.TELEMETRY.SPAN_SUBMIT_EXPENSE)) {
+        return;
+    }
+    endSpan(CONST.TELEMETRY.SPAN_SUBMIT_EXPENSE);
+    Performance.markEnd(CONST.TIMING.SUBMIT_EXPENSE);
+}
+
+export default markSubmitExpenseEnd;