Travel - Booking failed with Something went wrong error

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.96-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13177079/test-cases/41237918?sort=%2Bidentifier
Email or phone of affected tester (no customers): new expensifail account
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: MacOS Monterey 12.7.4 / Chrome
App Component: Other

Action Performed:

Precondition: sign up a new expensifail account. Add workspace. Enable Travel in More features.

1. Go to Travel tab
2. Click Book or manage button
3. Follow the flow of booking one-way fly on staging.travel.expensify.com

Expected Result:

User can complete booking flow.

Actual Result:

Booking failed with 'Something went wrong' error

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7043996_1767906380108.22.58.07.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[twinkle-react]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a user clicks "Book or manage" to book travel on staging.travel.expensify.com, the booking fails with a "Something went wrong" error, preventing completion of the booking flow.

What is the root cause of that problem?

The root cause is in openTravelDotLink in src/libs/actions/Link.ts at lines 146-150. The function doesn't check the API response jsonCode before using spotnanaToken. If the API returns an error response (e.g., jsonCode: 400 or jsonCode: 500) with a message but no exception, the code only checks for spotnanaToken and throws a generic error. The error is caught by asyncOpenURL, which only logs a warning, so the user never sees what went wrong.

Additionally, BookTravelButton in src/components/BookTravelButton.tsx at line 117 calls openTravelDotLink without handling the returned promise, so errors are never displayed to the user.

Link.ts
Lines 146-150

                .then((response) => {
                    if (!response?.spotnanaToken) {
                        reject(error);
                        throw error;
                    }

BookTravelButton.tsx
Lines 115-117

        const isPolicyProvisioned = policy?.travelSettings?.spotnanaCompanyID ?? policy?.travelSettings?.associatedTravelDomainAccountID;
        if (policy?.travelSettings?.hasAcceptedTerms ?? (travelSettings?.hasAcceptedTerms && isPolicyProvisioned)) {
            openTravelDotLink(policy?.id);

What changes do you think we should make in order to solve the problem?

Add a helper function to handle API errors and update openTravelDotLink in src/libs/actions/Link.ts.

First, add the Log import at the top of the file (if not already present):

import Log from '@libs/Log';

Add a helper function before openTravelDotLink:

function handleTravelApiError(response: Response, reject: (err: Error) => void, policyID: string | undefined) {
    if (response?.jsonCode !== CONST.JSON_CODE.SUCCESS) {
        const errorMessage = response?.message ?? 'Failed to generate spotnana token.';
        Log.warn('[Travel] Failed to generate spotnana token', {jsonCode: response?.jsonCode, message: errorMessage, policyID});
        const apiError = new Error(errorMessage);
        reject(apiError);
        throw apiError;
    }
}

Then update the openTravelDotLink function:

                .then((response) => {
                    handleTravelApiError(response, reject, policyID);
                    if (!response?.spotnanaToken) {
                        reject(error);
                        throw error;
                    }
                    const travelURL = buildTravelDotURL(response.spotnanaToken, response.isTestAccount ?? false, postLoginPath);
                    resolve(undefined);
                    return travelURL;
                })

Handle the promise in BookTravelButton to display errors with an improved fallback message:

        const isPolicyProvisioned = policy?.travelSettings?.spotnanaCompanyID ?? policy?.travelSettings?.associatedTravelDomainAccountID;
        if (policy?.travelSettings?.hasAcceptedTerms ?? (travelSettings?.hasAcceptedTerms && isPolicyProvisioned)) {
            openTravelDotLink(policy?.id)
                ?.catch((error) => {
                    const errorMessage = error?.message || translate('travel.errorMessage') || 'Booking failed. Check your company travel settings or try again.';
                    setErrorMessage(errorMessage);
                });
        } else if (isPolicyProvisioned) {

What alternative solutions did you explore? (Optional)

Adding error handling only in openTravelDotLink: This doesn't help because BookTravelButton needs to display the error.

[twisterdotcom]

We need to follow this internal process: https://stackoverflowteams.com/c/expensify/questions/20340.

@mitarachim could we please have this retested first though to ensure it wasn't just a temporary error in Spotnana's sandbox?

[mitarachim]

Hello @twisterdotcom QA team able to reproduce issue using latest build v9.2.96-4

15.25.06.mp4

[m-natarajan]

Able to reproduce after using the snippet as well

17.34.14.mp4

[melvin-bot]

@twisterdotcom Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@twisterdotcom Still overdue 6 days?! Let's take care of this!

[twisterdotcom]

Okay, apologies I had thought this was resolved when Stites commented in Slack. So, we don't need to use the snippet, but we do need to be able to test the travel flow, right?

Hey there! To clarify, you do not need to use the JS snippet to set the account to a test account anymore. All accounts on the @applause.expensify.com domain are automatically test accounts that get forced to the travel sandbox

This is the same for expensifail.com, so let me try with a new one.

[twisterdotcom]

This worked just fine for me.

travel.booking.mp4