Standard JavaScript Execution Errors

For errors that happen outside of a React Render flow, they do not cause react to error. For these case you should use your standard JavaScript try/catch error handling.

Counter.tsx

App.tsx

type CounterProps = {
  count: number;
  inc: () => void;
};

const badCode = (count: number) => {
  if (count >= 2) {
    throw new Error("You shall not pass!");
  }
};

export function Counter({ count, inc }: CounterProps) {
  const onClick = () => {
    /**
     * For JavaScript errors not in the flow of React render
     * You should use try / catch
     */
    try {
      badCode(count);
    } catch (e) {
      console.error(e);
    }
    inc();
  };

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={onClick}>+</button>
    </>
  );
}

React Rendering Errors

If react cannot render a component, due to some error thrown in the rendering flow of the component, you can handle it by using a custom React Error Boundary.

ErrorBoundary.tsx

App.tsx

Counter.tsx

import React from 'react';

type State = { hasError: boolean };

export class ErrorBoundary extends React.Component<{ children: React.ReactNode }> {
  state: State = { hasError: false };

  static getDerivedStateFromError(_error: Error): State {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong</div>;
    }

    return this.props.children;
  }
}

Customizing the Error Boundary

You can customize your ErrorBoundary component as much as you want, e.g. it can accept a fallback UI to display when something goes wrong.

ErrorBoundary.tsx

App.tsx

Counter.tsx

import React from "react";

type State = {
  hasError: boolean;
};

export class ErrorBoundary extends React.Component<{
  children: React.ReactNode;
  fallback: React.ReactNode;
}> {
  state: State = { hasError: false };

  static getDerivedStateFromError(_error: Error): State {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

Multiple Error Boundaries

In addition to wrapping multiple components in a single error boundary, you can also create multiple error boundaries to capture errors in specific components.

App.tsx

ErrorBoundary.tsx

Counter.tsx

import { useState } from "react";
import { ErrorBoundary } from "./ErrorBoundary";
import { Counter } from "./Counter";

export default function App() {
  const [countOne, setCountOne] = useState(0);
  const incOne = () => setCountOne(count => count + 1);
  const [countTwo, setCountTwo] = useState(0);
  const incTwo = () => setCountTwo(count => count + 1);

  return (
    <div>
      <ErrorBoundary fallback={<div>Counter one crashed 😔</div>}>
        <Counter count={countOne} inc={incOne} />
      </ErrorBoundary>

      <ErrorBoundary fallback={<div>Counter two crashed 😔</div>}>
        <Counter count={countTwo} inc={incTwo} />
      </ErrorBoundary>
    </div>
  );
}

Error Boundary `componentDidCatch` and `componentStack`

The getDerivedStateFromError handler is called during component rendering and ideally shouldn't have any side effects (like firing additional events). Instead you should use the componentDidCatch handler.

An additional benefit of componentDidCatch is that it gets access to componentStack which shows the component tree that caused the error.

ErrorBoundary.tsx

App.tsx

Counter.tsx

import React from 'react';

type State = {
  hasError: boolean,
};

export class ErrorBoundary extends React.Component<{ children: React.ReactNode, fallback: React.ReactNode }> {
  state: State = { hasError: false };

  static getDerivedStateFromError(_error: Error): State {
    return { hasError: true };
  }

  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.log(error);
    console.log('errorInfo.componentStack:', errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

Transcript