Cannot throw/return a 404 from middleware

[bravo-kernel]

I'm using React Router as a...

framework

Reproduction

// in a middleware
return data("Nice Not Found", {
    status: 404
})

Should bubble up to the ErrorBoundary, if I understood correctly, but does not.

Details explained by @brophdawg11 in this Discord chat https://discordapp.com/channels/770287896669978684/770287896669978687/1375107748794208337

System Info

- Windows
- "node": "22.13.0"
- "react-router": "^7.6.0",

Used Package Manager

npm

Expected Behavior

See "Nice Not Found" with theming etc.

Actual Behavior

Shows a plain white page with only the text "Nice Not Found"

[jezikk]

I think it should be defined how to correctly return response from middleware. Because returning data using data function cause error if it is called using fetch and returning data using Response.json() cause error if it is called using fetcher. There should be some method which will cover both cases.

[rururux]

I've done a quick investigation into this issue and found that if a Response or data is thrown, it's handled by the errorHandler which is the fourth argument of the runMiddlewarePipeline function, starting from the line below:

react-router/packages/react-router/lib/router/router.ts

Line 3562 in c06ec85

let response = await runMiddlewarePipeline(

If a Response is thrown, it's returned as is by if (isResponse(error)) { return error; }. However, if data is thrown, the statusCode is set to 500 in the following line:

react-router/packages/react-router/lib/router/router.ts

Line 3649 in c06ec85

statusCode: isRouteErrorResponse(error) ? error.status : 500,

[rururux]

I've created a repository for investigation:
https://github.com/rururux/react-router-issue-13659

[jezikk]

You should add an action to each route and next fetch data using useFetcher or fetch function.

[rururux]

I understand your point regarding how to correctly return responses from middleware.
However, my primary goal for creating this repository was to investigate the "404 response handling" as stated in the title of this issue.
I believe discussing how to handle this with action or useFetcher might be better suited for a separate issue.

[jezikk]

@rururux I think it is the same issue. Look at this example: https://github.com/jezikk/rr-middleware-fetching

If middlewares are commented fetching works correctly for both use cases.

[luzat]

I was trying to find a way for returning a 404 and get it caught by the error boundary, too. I am currently using this implementation:

import { UNSAFE_ErrorResponseImpl, type unstable_MiddlewareFunction } from 'react-router'

export const notFoundMiddleware: unstable_MiddlewareFunction<Response> = ({ request }) => {
  // eslint-disable-next-line @typescript-eslint/only-throw-error
  throw new UNSAFE_ErrorResponseImpl(404, 'Not Found', undefined)
}

I wonder if this can be problematic. It does allow my root error boundary to display the 404 message, though. Also, the (lack of) API is not very nice:

1. UNSAFE is obviously not meant to be used.
2. Manually creating an ErrorResponse object will not work with isRouteErrorResponse, because for some reason it expects a boolean internal property.

One could also use throw { status: 404, statusText: 'Not Found', internal: true, data: undefined } satisfies ErrorResponse & { internal: boolean } or some derivative …

(My motivation: I am using :locale/foo routes. I have my middleware check if the locale parameter has a valid value for all routes inside :locale and otherwise use the root's 404 error boundary. )

[github-actions]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!