Throwing 400 in Client Action Throws as 500

[kevinbailey25]

I'm using React Router as a...

framework

Reproduction

Go to https://stackblitz.com/edit/github-ff4pz9xc?file=README.md

I have 4 routes, loader, action, client-loader and client-action.

Each of these do the same thing:

throw data({ wow: true }, { status: 400 })

(exception: the action routes have a form with a button to trigger the action)

I've added a console.log(error) in the error boundary.

View each error in the console, you'll note that all of them are 400 errors, except the clientAction is a 500 error, where the data is the full DataWithResponseInit<{ wow: boolean; }> instead of just { wow: boolean }

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 18.97 GB / 31.75 GB
  Binaries:
    Node: 22.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.0.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.42 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @react-router/dev: ^7.1.4 => 7.1.4
    @react-router/node: ^7.1.4 => 7.1.4
    @react-router/serve: ^7.1.4 => 7.1.4
    react-router: ^7.1.4 => 7.1.4
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

Throwing a 400 error in a clientAction should be a 400 error, and not a 500 error that wraps my 400 error.

throw data({ wow: true}, { status: 400 })

Should function the same in clientAction as it does in loader, action, and clientLoader

Actual Behavior

The clientAction throws a ErrorResponseImpl with the status of 500, where it's data prop is my thrown data({ wow: true }, { status: 400 }) call

[luisdlopez]

On a similar note, when a clientLoader returns a call to data() (instead of throwing), like so:

return data({ wow: true }, { status: 400 })

The data returned will be similar to what @kevinbailey25 describes. So, when getting the data inside the component, using useFetcher, we need to go an additional level:

const fetcher = useFetcher<typeof clientAction>(); 
const wow = fetcher.data.data.wow

A big issue, also, is that the typescript definition is wrong, saying we only need to write fetcher.data.wow, which is not the case.

[timdorr]

Simple fix: Swap out data for Response.json. I'm showing the correct status code that way.

[kevinbailey25]

Simple fix: Swap out data for Response.json. I'm showing the correct status code that way.

Why does data work for clientLoader, loader, action... but doesn't work for clientAction. This is still a bug that needs to be addressed. A work around shouldn't close this ticket.

[kevinbailey25]

@timdorr the documentation tells you to throw data()

https://reactrouter.com/how-to/error-boundary#3-throw-data-in-loadersactions

I get that there's a work around, but this is still an issue and should be fixed, or documentation should be changed.

[brophdawg11]

Fixed in #13522, will be available in the next release