フロントエンド開発において、非同期処理のエラーハンドリングは避けて通れない道です。これまで複数のPromiseを扱う際は、Promise.allで「一つでも失敗したら即座に終了」という挙動に頼ることが多かったのではないでしょうか。しかし、モダンなJavaScriptでは、複数のエラーをまとめて管理できる「AggregateError」という強力な武器が存在します。
AggregateErrorとは何か
AggregateErrorは、複数のエラーを一つのオブジェクトとして束ねるための組み込みオブジェクトです。単一のエラーではなく、名前の通り「エラーの集合体」を保持します。特にPromise.anyと組み合わせることで、その真価を発揮します。
Promise.anyとの強力なタッグ
例えば、複数のCDNから同じライブラリを読み込む際、どれか一つでも成功すれば良いというケースを考えます。ここでPromise.anyを使うと、すべてのリクエストが失敗した場合に限り、AggregateErrorが投げられます。
具体例
const requests = [fetch(urlA), fetch(urlB), fetch(urlC)];
try {
await Promise.any(requests);
} catch (error) {
if (error instanceof AggregateError) {
console.log(“すべてのリクエストが失敗しました”);
error.errors.forEach((err, index) => {
console.log(`エラー${index + 1}: ${err.message}`);
});
}
}
このコードのように、error.errorsプロパティにアクセスすることで、個々のリクエストがなぜ失敗したのかという詳細な情報をリストとして取得できます。
なぜこの知識が重要なのか
従来、複数の失敗を個別に追跡しようとすると、配列をループさせてフラグを立てるなど、冗長なコードになりがちでした。AggregateErrorを活用すれば、エラー処理のロジックを「一つの例外」としてスッキリと記述できます。
特に、ユーザー体験を損なわないための「フォールバック戦略」を実装する際、どのアプローチが失敗したかを分析することは、堅牢なアプリケーションを作るための大きな一歩となります。単にエラーを表示するだけでなく、なぜ失敗したのかという集合的な視点を持つことで、より高度なデバッグが可能になるのです。ぜひ、次のプロジェクトの非同期処理で活用してみてください。