Solid.js Error Boundaries — Handling Errors Gracefully

In this tutorial, you will learn about Solid.js Error Boundaries. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js error boundaries: catch rendering errors, show fallback UI, and prevent crashes from propagating to the entire application.

In this lesson, you'll implement error boundaries using Solid.js's ErrorBoundary component to catch and handle errors gracefully.

What You'll Learn

How to use ErrorBoundary, create custom fallback components, handle different error types, and nest error boundaries.

Why It Matters

A single uncaught error can crash the entire app. Error boundaries contain failures and display helpful fallback UI.

Real-World Use

Doda Browser wraps each browser tab component in an error boundary, so a crash in one tab doesn't close the entire browser.

flowchart TD
    A[Error in Component] --> B[ErrorBoundary]
    B --> C{Has Fallback?}
    C -->|Yes| D[Show Fallback UI]
    C -->|No| E[Bubble to Parent]
    style B fill:#2c4f7c,color:#fff

Basic Error Boundary

import { ErrorBoundary } from "solid-js";

function App() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong</p>}>
      <MyComponent />
    </ErrorBoundary>
  );
}

Error Boundary with Reset

import { ErrorBoundary } from "solid-js";

function App() {
  let resetFunction;

  const fallback = (error, reset) => {
    resetFunction = reset;
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={() => reset()}>Try Again</button>
      </div>
    );
  };

  return (
    <ErrorBoundary fallback={fallback}>
      <MyComponent />
    </ErrorBoundary>
  );
}

Nested Error Boundaries

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <ErrorBoundary fallback={<p>Sidebar crashed</p>}>
        <Sidebar />
      </ErrorBoundary>
      <ErrorBoundary fallback={<p>Main content crashed</p>}>
        <MainContent />
      </ErrorBoundary>
    </div>
  );
}

Logging Errors

const fallback = (error) => {
  logErrorToService(error);
  return <p>We've been notified. Please try again.</p>;
};

Common Mistakes

1. Not providing a fallback: Without fallback, errors bubble up. Always provide user-friendly fallback UI.
2. Using error boundaries for async errors: Error boundaries only catch rendering errors. Use try/catch for async code.
3. Only one error boundary for the entire app: Multiple boundaries isolate crashes. One boundary means one crash brings down everything.
4. Not including a reset mechanism: Users should be able to recover from errors without refreshing the page.
5. Exposing error details to users: Show user-friendly messages, not stack traces or database errors.

Practice Questions

1. What types of errors does ErrorBoundary catch? Answer: Errors thrown during component rendering, including lifecycle errors and errors in child components' JSX.

2. What does the fallback prop accept? Answer: Either a component or a function (error, reset) => JSX that receives the error and a reset function.

3. What does the reset function do? Answer: It clears the error state and re-attempts to render the children.

4. How do you prevent one component's error from crashing the whole page? Answer: Wrap each section in its own error boundary. A crash in one section doesn't affect others.

Challenge

Build a dashboard with three error boundaries: one for the header (always visible), one for the sidebar (can fail independently), one for the main content area. Each should have a reset button.

Mini Project

Create a widget-based dashboard where each widget is wrapped in an error boundary with individual fallback and reset. Widgets that fail show "Widget crashed" with a retry button while others continue working.

FAQ

What's Next

Learn about Solid.js Suspense and Resources for handling async data loading.