エラーハンドリングの改善

React 19では、エラーハンドリングの挙動の改善が行われました。詳しくは公式ブログを見ていただくのがよいですが、ここでは特に嬉しい改善を紹介します。

APIとしては、react-domのcreateRootやhydrateRootに対する改善となります。

従来つらかった点

従来つらかった点は、Error Boundaryがエラーを正常にキャッチした場合でも、コンソールにconsole.errorでエラーが出力されてしまうことです。

Error Boundaryでエラーハンドリングを組んでいるのにエラーが出てしまうことは、開発者に対する負のインセンティブになります。

React 19の改善

createRootに新たに追加されたonCaughtErrorオプションを使うことで、console.errorでエラーが出力されるというデフォルトの挙動を上書きすることができます。

ReactDOM.createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => {
    // infoにできた！（無視してもいい）
    console.info("caught", error);
  },
}).render(...);

とても嬉しいですね。

また、対となるonUncaughtErrorも追加されました。これはError Boundaryがキャッチしなかった場合ですね。