From a1012752a16cc4d48563d9c632d1497b9f4a1e84 Mon Sep 17 00:00:00 2001 From: Adam Horodyski Date: Tue, 10 Feb 2026 16:26:41 +0100 Subject: [PATCH 1/4] Add Sentry labels for INP attribution across forms and buttons Include new constants for request confirmation list fields Add sentryLabel props to form components and navigation steps for improved monitoring --- src/CONST/index.ts | 77 +++++++++++++++++++ src/components/Form/FormWrapper.tsx | 3 + src/components/Form/types.ts | 3 + src/components/FormAlertWithSubmitButton.tsx | 6 ++ .../MoneyRequestConfirmationList.tsx | 3 + .../MoneyRequestConfirmationListFooter.tsx | 18 +++++ src/components/TabSelector/TabSelector.tsx | 36 +++++---- .../TabSelector/TabSelectorBase.tsx | 4 + .../TabSelector/TabSelectorItem.tsx | 5 ++ src/pages/iou/MoneyRequestAmountForm.tsx | 2 + src/pages/iou/SplitExpenseEditPage.tsx | 2 + src/pages/iou/SplitExpensePage.tsx | 3 + .../request/MoneyRequestAttendeeSelector.tsx | 1 + .../MoneyRequestParticipantsSelector.tsx | 3 + .../request/step/IOURequestStepCategory.tsx | 1 + .../step/IOURequestStepDestination.tsx | 1 + .../request/step/IOURequestStepDistance.tsx | 1 + .../GPSButtons/index.tsx | 4 + .../step/IOURequestStepDistanceGPS/index.tsx | 1 + .../step/IOURequestStepDistanceManual.tsx | 1 + .../step/IOURequestStepDistanceMap.tsx | 1 + .../step/IOURequestStepDistanceOdometer.tsx | 1 + .../iou/request/step/IOURequestStepHours.tsx | 1 + .../IOURequestStepOdometerImage/index.tsx | 1 + .../ReceiptPreviews/index.tsx | 2 + .../IOURequestStepScan/ReceiptView/index.tsx | 1 + .../step/IOURequestStepScan/index.native.tsx | 1 + .../request/step/IOURequestStepScan/index.tsx | 2 + .../iou/request/step/IOURequestStepTag.tsx | 1 + .../request/step/IOURequestStepWaypoint.tsx | 1 + 30 files changed, 170 insertions(+), 17 deletions(-) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 628246862f6a1..e79c402b2a657 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -8223,6 +8223,24 @@ const CONST = { RESET_SPLIT_SHARES: 'RequestConfirmationList-ResetSplitShares', RECEIPT_THUMBNAIL: 'RequestConfirmationList-ReceiptThumbnail', PDF_RECEIPT_THUMBNAIL: 'RequestConfirmationList-PDFReceiptThumbnail', + AMOUNT_FIELD: 'RequestConfirmationList-AmountField', + DESCRIPTION_FIELD: 'RequestConfirmationList-DescriptionField', + DISTANCE_FIELD: 'RequestConfirmationList-DistanceField', + RATE_FIELD: 'RequestConfirmationList-RateField', + MERCHANT_FIELD: 'RequestConfirmationList-MerchantField', + HOURS_FIELD: 'RequestConfirmationList-HoursField', + TIME_RATE_FIELD: 'RequestConfirmationList-TimeRateField', + CATEGORY_FIELD: 'RequestConfirmationList-CategoryField', + DATE_FIELD: 'RequestConfirmationList-DateField', + TAG_FIELD: 'RequestConfirmationList-TagField', + TAX_RATE_FIELD: 'RequestConfirmationList-TaxRateField', + TAX_AMOUNT_FIELD: 'RequestConfirmationList-TaxAmountField', + ATTENDEES_FIELD: 'RequestConfirmationList-AttendeesField', + REPORT_FIELD: 'RequestConfirmationList-ReportField', + DESTINATION_FIELD: 'RequestConfirmationList-DestinationField', + TIME_FIELD: 'RequestConfirmationList-TimeField', + SUBRATE_FIELD: 'RequestConfirmationList-SubrateField', + SEND_FROM_FIELD: 'RequestConfirmationList-SendFromField', }, TRANSACTION_PREVIEW: { CARD: 'TransactionPreview-Card', @@ -8277,6 +8295,62 @@ const CONST = { SHARE_DETAIL: { DISMISS_KEYBOARD_BUTTON: 'ShareDetail-DismissKeyboardButton', }, + MONEY_REQUEST: { + AMOUNT_NEXT_BUTTON: 'MoneyRequest-AmountNextButton', + AMOUNT_PAY_BUTTON: 'MoneyRequest-AmountPayButton', + PARTICIPANTS_NEXT_BUTTON: 'MoneyRequest-ParticipantsNextButton', + PARTICIPANTS_NEW_WORKSPACE_BUTTON: 'MoneyRequest-ParticipantsNewWorkspaceButton', + PARTICIPANTS_IMPORT_CONTACTS_ITEM: 'MoneyRequest-ParticipantsImportContacts', + ATTENDEES_SAVE_BUTTON: 'MoneyRequest-AttendeesSaveButton', + CONFIRMATION_SUBMIT_BUTTON: 'MoneyRequest-ConfirmationSubmitButton', + CONFIRMATION_REMOVE_EXPENSE_BUTTON: 'MoneyRequest-ConfirmationRemoveExpenseButton', + CONFIRMATION_PAY_BUTTON: 'MoneyRequest-ConfirmationPayButton', + }, + SPLIT_EXPENSE: { + ADD_SPLIT_BUTTON: 'SplitExpense-AddSplitButton', + MAKE_SPLITS_EVEN_BUTTON: 'SplitExpense-MakeSplitsEvenButton', + SAVE_BUTTON: 'SplitExpense-SaveButton', + REMOVE_SPLIT_BUTTON: 'SplitExpense-RemoveSplitButton', + EDIT_SAVE_BUTTON: 'SplitExpense-EditSaveButton', + }, + IOU_REQUEST_STEP: { + DISTANCE_NEXT_BUTTON: 'IOURequestStep-DistanceNextButton', + DISTANCE_MAP_NEXT_BUTTON: 'IOURequestStep-DistanceMapNextButton', + DISTANCE_MANUAL_NEXT_BUTTON: 'IOURequestStep-DistanceManualNextButton', + DISTANCE_ODOMETER_NEXT_BUTTON: 'IOURequestStep-DistanceOdometerNextButton', + ODOMETER_CHOOSE_FILE_BUTTON: 'IOURequestStep-OdometerChooseFileButton', + GPS_START_STOP_BUTTON: 'IOURequestStep-GPSStartStopButton', + GPS_DISCARD_BUTTON: 'IOURequestStep-GPSDiscardButton', + GPS_NEXT_BUTTON: 'IOURequestStep-GPSNextButton', + GPS_OPEN_MOBILE_BUTTON: 'IOURequestStep-GPSOpenMobileButton', + WAYPOINT_REMOVE_BUTTON: 'IOURequestStep-WaypointRemoveButton', + EDIT_CATEGORIES_BUTTON: 'IOURequestStep-CategoryEditButton', + EDIT_TAGS_BUTTON: 'IOURequestStep-TagEditButton', + EDIT_PER_DIEM_RATES_BUTTON: 'IOURequestStep-EditPerDiemRatesButton', + HOURS_NEXT_BUTTON: 'IOURequestStep-HoursNextButton', + SCAN_SUBMIT_BUTTON: 'IOURequestStep-ScanSubmitButton', + RECEIPT_DELETE_BUTTON: 'IOURequestStep-ReceiptDeleteButton', + RECEIPT_PREVIEW_ITEM: 'IOURequestStep-ReceiptPreviewItem', + RECEIPT_PREVIEW_SUBMIT_BUTTON: 'IOURequestStep-ReceiptPreviewSubmitButton', + }, + TAB_SELECTOR: { + MANUAL_TAB: 'TabSelector-ManualTab', + SCAN_TAB: 'TabSelector-ScanTab', + DISTANCE_TAB: 'TabSelector-DistanceTab', + PER_DIEM_TAB: 'TabSelector-PerDiemTab', + TIME_TAB: 'TabSelector-TimeTab', + DISTANCE_MAP_TAB: 'TabSelector-DistanceMapTab', + DISTANCE_MANUAL_TAB: 'TabSelector-DistanceManualTab', + DISTANCE_GPS_TAB: 'TabSelector-DistanceGPSTab', + DISTANCE_ODOMETER_TAB: 'TabSelector-DistanceOdometerTab', + CHAT_TAB: 'TabSelector-ChatTab', + ROOM_TAB: 'TabSelector-RoomTab', + SHARE_TAB: 'TabSelector-ShareTab', + SUBMIT_TAB: 'TabSelector-SubmitTab', + SPLIT_AMOUNT_TAB: 'TabSelector-SplitAmountTab', + SPLIT_PERCENTAGE_TAB: 'TabSelector-SplitPercentageTab', + SPLIT_DATE_TAB: 'TabSelector-SplitDateTab', + }, REQUEST_STEP: { SCAN: { MULTI_SCAN: 'Scan-MultiScan', @@ -8305,6 +8379,9 @@ const CONST = { PRODUCT_TRAINING: { TOOLTIP: 'ProductTraining-Tooltip', }, + FORM: { + SUBMIT_BUTTON: 'Form-SubmitButton', + }, }, DOMAIN: { diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index 178a8cddaf872..1ab4b5bfc48bc 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -12,6 +12,7 @@ import useOnyx from '@hooks/useOnyx'; import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useThemeStyles from '@hooks/useThemeStyles'; import {getLatestErrorMessage} from '@libs/ErrorUtils'; +import CONST from '@src/CONST'; import type {OnyxFormKey} from '@src/ONYXKEYS'; import type {Form} from '@src/types/form'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; @@ -96,6 +97,7 @@ function FormWrapper({ shouldPreventDefaultFocusOnPressSubmit = false, onScroll = () => {}, forwardedFSClass, + sentryLabel = CONST.SENTRY_LABEL.FORM.SUBMIT_BUTTON, }: FormWrapperProps) { const styles = useThemeStyles(); const formRef = useRef(null); @@ -183,6 +185,7 @@ function FormWrapper({ shouldRenderFooterAboveSubmit={shouldRenderFooterAboveSubmit} shouldBlendOpacity={shouldSubmitButtonBlendOpacity} shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPressSubmit} + sentryLabel={sentryLabel} /> ); diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts index 386c05254ad80..d72d078112e90 100644 --- a/src/components/Form/types.ts +++ b/src/components/Form/types.ts @@ -180,6 +180,9 @@ type FormProps = ForwardedFSClassProp * If `true`, the form will smoothly scroll to the bottom after interactions have completed. */ shouldScrollToEnd?: boolean; + + /** Sentry label for INP attribution on the submit button */ + sentryLabel?: string; }; type FormRef = { diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx index db9f38122eb6b..5a246e9c5f3f7 100644 --- a/src/components/FormAlertWithSubmitButton.tsx +++ b/src/components/FormAlertWithSubmitButton.tsx @@ -77,6 +77,9 @@ type FormAlertWithSubmitButtonProps = { /** Prevents the button from triggering blur on mouse down. */ shouldPreventDefaultFocusOnPress?: boolean; + + /** Sentry label for INP attribution */ + sentryLabel?: string; }; function FormAlertWithSubmitButton({ @@ -102,6 +105,7 @@ function FormAlertWithSubmitButton({ shouldBlendOpacity = false, addButtonBottomPadding = true, shouldPreventDefaultFocusOnPress = false, + sentryLabel, }: FormAlertWithSubmitButtonProps) { const styles = useThemeStyles(); const style = [!shouldRenderFooterAboveSubmit && footerContent && addButtonBottomPadding ? styles.mb3 : {}, buttonStyles]; @@ -135,6 +139,7 @@ function FormAlertWithSubmitButton({ medium={useSmallerSubmitButtonSize} large={!useSmallerSubmitButtonSize} onMouseDown={shouldPreventDefaultFocusOnPress ? (e) => e.preventDefault() : undefined} + sentryLabel={sentryLabel} /> ) : (