エラー処理マスターへの道！ AggregateError.aggregateError とその他の方法を使いこなす

JavaScriptのErrorsとAggregateError.aggregateError

AggregateError.aggregateErrorは、複数のErrorオブジェクトを受け取り、それらを1つのAggregateErrorオブジェクトにまとめる静的メソッドです。

AggregateError.aggregateErrorの使い方

const errors = [
  new Error('エラー1'),
  new Error('エラー2'),
  new Error('エラー3'),
];

const aggregateError = AggregateError.aggregateError(errors);

console.log(aggregateError.message); // '3つのエラーが発生しました'
console.log(aggregateError.errors); // [Error, Error, Error]

上記のように、AggregateError.aggregateErrorを使って、複数のErrorオブジェクトを1つのAggregateErrorオブジェクトにまとめることができます。

AggregateErrorオブジェクトの主なプロパティ

• message: エラーメッセージ
• errors: 元のErrorオブジェクトの配列
• name: "AggregateError"

AggregateError.aggregateErrorの利点

• 複数のエラーをまとめて処理できる
• エラーメッセージを簡潔に記述できる
• エラー発生箇所を特定しやすい

AggregateError.aggregateErrorの使用例

• Promise.all()で複数の非同期処理を実行し、エラーが発生した場合
• フォーム入力バリデーションで、複数の項目にエラーが発生した場合
• API通信で複数のエラーが発生した場合

AggregateErrorのブラウザ対応状況

AggregateErrorは比較的新しいAPIなので、すべてのブラウザで対応しているわけではありません。最新のバージョンのChrome、Firefox、Edge、Safariでは対応していますが、IEでは対応していないので注意が必要です。

AggregateError.aggregateErrorのサンプルコード

Promise.all()で発生したエラーをまとめて処理

const promises = [
  fetch('https://example.com/api/1'),
  fetch('https://example.com/api/2'),
  fetch('https://example.com/api/3'),
];

Promise.all(promises)
  .catch(aggregateError => {
    console.log(aggregateError.message); // '3つのエラーが発生しました'
    console.log(aggregateError.errors); // [Error, Error, Error]
  });

フォーム入力バリデーションで発生したエラーをまとめて処理

const form = document.getElementById('my-form');

form.addEventListener('submit', event => {
  event.preventDefault();

  const errors = [];

  const nameInput = document.getElementById('name');
  if (!nameInput.value) {
    errors.push(new Error('名前を入力してください'));
  }

  const emailInput = document.getElementById('email');
  if (!emailInput.value) {
    errors.push(new Error('メールアドレスを入力してください'));
  }

  if (errors.length > 0) {
    const aggregateError = AggregateError.aggregateError(errors);
    alert(aggregateError.message);
  } else {
    // フォーム送信処理
  }
});

API通信で発生したエラーをまとめて処理

const api = {
  getPosts() {
    return fetch('https://example.com/api/posts')
      .then(response => response.json());
  },
  getUsers() {
    return fetch('https://example.com/api/users')
      .then(response => response.json());
  },
};

async function getData() {
  try {
    const [posts, users] = await Promise.all([api.getPosts(), api.getUsers()]);
    // データ処理
  } catch (aggregateError) {
    console.log(aggregateError.message); // '2つのエラーが発生しました'
    console.log(aggregateError.errors); // [Error, Error]
  }
}

getData();

エラーメッセージのカスタマイズ

const errors = [
  new Error('エラー1'),
  new Error('エラー2'),
  new Error('エラー3'),
];

const aggregateError = AggregateError.aggregateError(errors, {
  message: '処理中にエラーが発生しました',
});

console.log(aggregateError.message); // '処理中にエラーが発生しました'
console.log(aggregateError.errors); // [Error, Error, Error]

エラースタックの取得

const errors = [
  new Error('エラー1'),
  new Error('エラー2'),
  new Error('エラー3'),
];

const aggregateError = AggregateError.aggregateError(errors);

console.log(aggregateError.errors.map(error => error.stack));

従来のtry...catch文

try {
  // 処理
} catch (error) {
  if (error instanceof AggregateError) {
    // 複数のエラー処理
  } else {
    // 単一のエラー処理
  }
}

自作のエラー処理関数

function handleErrors(errors) {
  // 複数のエラー処理
}

try {
  // 処理
} catch (error) {
  if (error instanceof AggregateError) {
    handleErrors(error.errors);
  } else {
    handleErrors([error]);
  }
}

Promise.allSettled()

const promises = [
  fetch('https://example.com/api/1'),
  fetch('https://example.com/api/2'),
  fetch('https://example.com/api/3'),
];

Promise.allSettled(promises)
  .then(results => {
    const errors = results.filter(result => result.status === 'rejected').map(result => result.reason);
    if (errors.length > 0) {
      // 複数のエラー処理
    }
  });

async/await と for...of ループ

async function getData() {
  const results = [];
  for (const promise of promises) {
    try {
      results.push(await promise);
    } catch (error) {
      results.push({ error });
    }
  }

  const errors = results.filter(result => result.error).map(result => result.error);
  if (errors.length > 0) {
    // 複数のエラー処理
  }
}

const promises = [
  fetch('https://example.com/api/1'),
  fetch('https://example.com/api/2'),
  fetch('https://example.com/api/3'),
];

getData();

• 複数のエラーをまとめて処理したい場合は、AggregateError.aggregateError がおすすめです。
• エラーメッセージのカスタマイズやエラースタックの取得など、細かい制御が必要な場合は、従来のtry...catch文を使うのが良いでしょう。
• 自作のエラー処理関数を作成すれば、より柔軟なエラー処理が可能になります。
• Promise.allSettled() は、すべてのPromiseの完了状態を取得できるため、エラーだけでなく成功した結果も処理したい場合に便利です。
• async/await と for...of ループは、Promise.allSettled() よりも簡潔に書ける

AggregateError.aggregateError は、複数のエラーをまとめて処理する便利な方法です。状況に応じて、他の方法も使い分けてください。