Nested ErrorBoundary not rendering, what am I missing?

[hselto]

I am building a react router 7 app trying to get this to work: https://reactrouter.com/how-to/error-boundary#4-nested-error-boundaries. Im using a flat route setup utilizing folder names to define my routes. I am also using the middleware feature.

Basic setup:

root.tsx

export function ErrorBoundary()... // renders a generic error boundary export default function App()... // renders the base document / `Outlet` 

brand.$brandName/route.tsx

export function ErrorBoundary()... // renders a "branded" error boundary export async function loader()... loads "branded" things export default function BrandedContext()... // renders "branded" things / outlet 

brand.$brandName.protected/route.tsx

export const middleware = [protectThings]; // authorization middleware that makes sure im allowed here, throws data(... export async function loader()... loads some "protected" things export default function ProtectedContext()... // renders "protected" things / outlet 

What I would expect is that the errors thrown by my protected routes middleware (Im not authorized etc) would end up caught by my "branded" error boundary. However it only ever renders the root boundary. I find if i throw directly from the branded / protected loader not the middleware I do get the "nearest" boundary. Is this a miss in the middleware feature? Am I missing something about using it?

[hselto]

I think I may have found the answer in middleware documentation. WIll revisit if that blows up on me ;) sorry bout that:
https://reactrouter.com/how-to/middleware#next-and-error-handling