Re-throwing errors to a higher-up error boundary

[houfio]

Hello, I'm trying to bubble my exception up to the error boundary in the root for specific errors only. I have tried checking the error type in the child boundaries and re-throwing the errors, but this resulted in an infinite loop (of the error being thrown and caught in the same component). Is there any way of achieving this functionality? Thanks!

[digibake]

Hi,

Have you got an example code? I'm assuming it's something like this:

try {

    ... your code here ...

} catch (e:unknown){
    if (e instanceof YourError){
        throw Error("Error for your parent component");
    }
}

On the face of it, it doesn't seem like something that would cause an infinite loop.

[houfio]

Hey, thanks for the reply. I should've included a code snippet for some extra clarity:

createBrowserRouter([
  {
    errorElement: <ErrorElement1/>, // <-- 3. Specific errors should be caught here instead
    children: [
      {
        errorElement: <ErrorElement2/>, // <-- 2. Errors are caught here
        element: <Element/> // <-- 1. Error is thrown here
      }
    ]
  }
])

When ErrorElement2 re-throws the specific errors that should be displayed in ErrorElement1, it creates an infinite loop. The reason I want some errors to be caught in ErrorElement1 is to not contain them within the layout of parents.