ErrorBoundary not rendering on account_.authorize.jsx

Hydrogen and Storefront APIs
1

We are on Hydrogen using the Customer Account API of which we’ve already opened an issue on the hydrogen repo. We’ve run into an error handling issue when for whenever reason login fails. Login 5xx errors are not on our ends but ErrorBoundary use for UX should be. As it is now, an unauthorize request will display the user a view such as:

Captura de pantalla 2024-11-14 a las 13.01.27
Captura de pantalla 2024-11-14 a las 13.01.271778×1130 65.1 KB

The route responsible to authorize the user is account_.authorize.jsx but it is not intercepted by Remix ErrorBoundary. The final user is misled without some UI that allows him to retry log in, and it also breaks the app’s general UX overall.

We’ve tried to try/catch errors on that particular route without much success, is there a way to put account_.authorize.jsx on remix general routing flow to have more control over the app?

2

That’s interesting that the root error boundary doesn’t catch this. We’ll investigate further on this issue. Updates will continue in the issue you have opened for ErrorBoundary not rendering on account_.authorize.jsx · Issue #2644 · Shopify/hydrogen · GitHub

For now, you can capture the error a bit earlier by defining an ErrorBoundary in the routes/account_.authorize.tsx. This will output an error page with your header/footer layout.

import { isRouteErrorResponse, useRouteError } from '@remix-run/react';
import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';

export async function loader({context}: LoaderFunctionArgs) {
  return context.customerAccount.authorize();
}

export function ErrorBoundary() {
  const error = useRouteError();
  let errorMessage = 'Unknown error';
  let errorStatus = 500;

  if (isRouteErrorResponse(error)) {
    errorMessage = error?.data?.message ?? error.data;
    errorStatus = error.status;
  } else if (error instanceof Error) {
    errorMessage = error.message;
  }

  return (
    <div className="route-error">
      <h1>Oops</h1>
      <h2>{errorStatus}</h2>
      {errorMessage && (
        <fieldset>
          <pre>{errorMessage}</pre>
        </fieldset>
      )}
    </div>
  );
}