ErrorBoundary gets error with "Unexpected error" message instead of actual returned error from loader [only prod build, navigation with useNavigate]

[skvortsovstepan]

What version of Remix are you using?

1.10.1

Steps to Reproduce

Hi there!
Thanks for the awesome framework!

The issue is related to error passed into the ErrorBoundary in case of useNavigate usage only on prod build:

• assume there are: loader that throws error and related ErrorBoundary in the component
• user navigates to that component via useNavigate
• build is prod build

Env:
MacOS Monterey 12.5.1
node 18.12.1
npm 8.19.2

Here are steps to reproduce:

1. npx create-remix@latest - install basic version of remix with express server (and typescript)
2. add into app/routes following files (index.tsx, test.tsx):

// index.tsx

import { useNavigate } from "@remix-run/react";

export default function Index() {
  const navigate = useNavigate();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <button onClick={() => {
        navigate('/test');
      }}>Go to test</button>
    </div>
  );
}

and

// test.tsx
export const loader = async () => {
    // api-request with error-response - e.g. "no access" 
    throw new Error('Error from api!')
}

export const ErrorBoundary = ({error}: {error: Error}) => {
    return <div style={{background: 'red', color: 'white', padding: 5, maxWidth: 200}}>{error.message}</div>
}

export default function() {
    return 'test route'
}

3. create prod build with npm run build
4. npm run start
5. go to localhost:3000 and click Go to test

Expected Behavior

The error message in ErrorBoundary is the message that was thrown from loader: "Error from api!"

If run dev build with npm run dev - it is the case, it is working correct

Actual Behavior

The error message shown is "Unexpected Server Error" in prod build

[brophdawg11]

This is intended behavior. Error Boundaries are for unexpected error scenarios, stuff like "cannot read property 'x' of undefined," and therefore in production builds they are all converted to generic Unexpected Server Error messages. If you want to short circuit from a loader for a known reason, like Unauthorized, then you should throw a Response to your CatchBoundary. In this case, it sounds like you want to throw a response with a 401 status.

[skvortsovstepan]

Thank you so much!