Nested Error Handling

Nested Errors

This example demonstrates how errors bubble up to parent error boundaries when a child route doesn't have its own ErrorBoundary.

Route Structure

routes/features/errors/nested/
├── main.tsx      ← Has ErrorBoundary (this file)
├── child.tsx     ← Throws error, NO ErrorBoundary
└── index.tsx     ← Navigation links

About This Example

This parent route has an ErrorBoundary. The child route throws an error but does not have its own ErrorBoundary. Click the button below to navigate to the child route and see the error bubble up to this parent's ErrorBoundary.

Trigger Child Error

Example Code

import { HttpError } from "@udibo/juniper";

// routes/features/errors/nested/main.tsx
// Parent route WITH ErrorBoundary
export function ErrorBoundary({ error }) {
  return <div>Parent caught: {error instanceof HttpError ? error.exposedMessage : (error instanceof Error ? error.message : String(error))}</div>;
}

// routes/features/errors/nested/child.tsx
// Child route WITHOUT ErrorBoundary
export default function Child() {
  throw new Error("Child error!");
  return <div>Won't render</div>;
}