React の ErrorBoundary で非同期のエラーをキャッチする

React の ErrorBoundary は、ドキュメントにあるように非同期のエラーをキャッチできない。

async function getUser() {
  /* ... */
}
function Profile() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    (async () => {
      try {
        const user = await getUser();
      } catch (error) {
        // このエラーは ErrorBoundary でキャッチできない
        throw error;
      }
      setUser();
    })();
  }, []);

  if (!user) return null;
  return <div>{user.name}</div>;
}
function App() {
  return (
    <ErrorBoundary>
      <Profile />
    </ErrorBoundary>
  );
}

Dan Abramov 曰く、こういうテクニックで想定どおりのキャッチができる。

const [, setState] = useState();

setState(() => { new Error("Hi") });

なので、さっきのコードでいうと

async function getUser() {
  /* ... */
}
function Profile() {
  const [user, setUser] = useState(null);
  const [, setState] = useState();
  useEffect(() => {
    (async () => {
      try {
        const user = await getUser();
      } catch (error) {
        // これは ErrorBoundary でキャッチできる
        setState(() => {
          throw error;
        });
      }
      setUser();
    })();
  }, []);

  if (!user) return null;
  return <div>{user.name}</div>;
}
function App() {
  return (
    <ErrorBoundary>
      <Profile />
    </ErrorBoundary>
  );
}

こうすれば ErrorBoundary でキャッチできる