React Error Boundaries: Revisited

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

First off - if you haven't already I recommend giving my old React Error Boundaries blog post a read through, that post covers the basics of error boundaries. Once you've read it, jump back here to learn more!

Since I last published that blog post, there have been quite a few advancements in and around React, including but not limited to React Server Components!

Sadly however, we still need to use class components for error boundaries at the time of writing. Who knows, maybe in another 5 years this will have finally changed?!

"use client";
import {Component} from "react";
import type {ComponentType, ReactNode} from "react";

type Props = {
  children: ReactNode;
  fallback: ComponentType<{
    reset(): void;
    error: Error
  }>;
}

import {ErrorBoundary} from "./ErrorBoundary";

function ErrorFallback({reset, error}) {
  return (
    <div>
      <p>Oh no, an error has occurred</p>
      <button onClick={reset}>Retry</button>
    </div>
  );
}

function MyComponent

React Error Boundaries: Revisited

React Error Boundaries: Revisited

My Go To Implementation

Tags:

Related Posts

Guides

Development

Related Posts

Guides

Development

React