Error boundaries should catch errors thrown in setState callbacks

[dmail]

Describe the feature you'd love to see

When an error is thrown from a setState callback, error boundaries don't catch it.

Example code

import { h, render } from "preact";
import { useState, useErrorBoundary, useCallback } from "preact/hooks";

const App = () => {
  const [error] = useErrorBoundary();
  if (error) {
    return <p>Something went wrong</p>;
  }
  return <BrokenComponent />;
};

const BrokenComponent = () => {
  const [,setState] = useState(null);
  setTimeout(() => {
    setState(() => throw new Error("here"));
  }, 1000);
  return <span>Hello world</span>;
};

render(<App />, document.body);

Expected behavior

The error boundary in the parent component should catch errors thrown in setState callbacks from children, allowing graceful fallback UI rendering.

Current behavior

The error isn't caught by the error boundary. The component renders initially, then after 1 second when the error is thrown, nothing is displayed and the error is reported in the console.

Motivation

This would be useful for handling asynchronous errors in child components from parent error boundaries, allowing to catch and display errors of async operations performed by child components.

Additional context

I want this because I would like to handle error thrown asynchronously by child components from a parent.

• Similar issue in React: Throwing Error from hook not caught in error boundary  facebook/react#14981
• Working demo with React: https://codepen.io/dmail/pen/XJJqeGp?editors=0010

[dmail]

Update: Workaround exists, but with limitations

I've found a workaround to make useErrorBoundary catch errors from child components by using useEffect + throw:

const BrokenComponent = () => {
  const [error, setError] = useState(null);
  useEffect(() => {
    if (error) throw error;
  }, [error]);
  
  setTimeout(() => {
    setError(new Error("here"));
  }, 1000);
  
  return <span>Hello world</span>;
};

However, this surfaces a new issue: it's not possible to reset the error boundary from the child component. Once an error is thrown, there is no way for the child to reset the error boundary:

const BrokenComponent = () => {
  const [error, setError] = useState(null);
  useEffect(() => {
    if (error) throw error;
  }, [error]);
  
  return (
    <button
      onClick={() => {
        setError(null); // This doesn't reset the parent error boundary
        setTimeout(() => {
          setError(new Error("here"));
        }, 1000);
      }}
    >
      Hello world
    </button>
  );
};

Ideally, we would need:

1. Direct error catching from setState callbacks without resorting to useEffect
2. A way for child components to signal the parent error boundary to reset

This would complete the error handling story for asynchronous operations in components.

[dmail]

Sorry for the additional comments - Complete solution exists

I've discovered that there is actually a complete solution for handling async errors and resetting the error boundary from child components. While my original feature request remains valid (direct catching of errors from setState), I wanted to share the workaround for others facing similar issues:

import { createContext } from "preact";
import {
  useState,
  useErrorBoundary,
  useContext,
  useEffect,
} from "preact/hooks";

// Create a context to share the reset function
const ErrorBoundaryContext = createContext(null);
const useResetErrorBoundary = () => {
  const resetErrorBoundary = useContext(ErrorBoundaryContext);
  return resetErrorBoundary;
};

const App = () => {
  const [error, resetErrorBoundary] = useErrorBoundary();
  if (error) {
    return <p>Something went wrong</p>;
  }
  return (
    <ErrorBoundaryContext.Provider value={resetErrorBoundary}>
      <BrokenComponent />
    </ErrorBoundaryContext.Provider>
  );
};

const BrokenComponent = () => {
  const resetErrorBoundary = useResetErrorBoundary();
  const [error, setError] = useState(null);
  useEffect(() => {
    if (error) {
      throw error;
    }
  }, [error]);

  return (
    <button
      onClick={() => {
        setError(null);
        if (resetErrorBoundary) {
          resetErrorBoundary();
        }
        setTimeout(() => {
          setError(new Error("here"));
        }, 1000);
      }}
    >
      Hello world
    </button>
  );
};

This pattern works, but it feels like something that could be better documented or perhaps made more intuitive in the API. Users shouldn't have to implement this context-passing pattern from scratch to handle what seems like a common use case.

Would it be possible to:

1. Update the documentation to include this pattern for async error handling?
2. Consider providing a built-in hook or helper for this in the future?

Thanks for considering this feedback!