JavaScriptのエラー型一覧

# はじめに

結構前に書いた記事が残ってたので投稿します。

:::note warn
書いてる人が初心者のため、この記事の情報は間違っている可能性があります。

正確な情報が必要な場合は、併記している**MDNのリンクを辿る**か、**自分でしっかりと調べる**ことを推奨します。

また、ミス等を見つけたらコメントで教えてくださると助かります。
:::



## エラー型一覧とは

MDNに乗っていたエラーのクラスを紹介しています。
乗っているのは多分ブラウザで使えるものだと思います（根拠なし）。

また、MDNのリンクを載せているので、詳しい情報（と正確な情報）はそちらから見てもらえると助かります。


# エラー型一覧

ここから本編です。

## Error

> Error オブジェクトは、実行時エラーが発生した時に発生します。 Error オブジェクトは、ユーザー定義の例外の基底オブジェクトとして使用することもできます。標準の組み込みエラー型については下記を参照してください。

お馴染みのエラーオブジェクトです。
`throw`したりスタックトレースを取得するのに使えます。

以下はエラーを発生させるコード例です。
(MDNからのコピペ)

```js:エラーを発生させる
try {
  throw new Error("Whoops!");
} catch (e) {
  console.error(e.name + ": " + e.message);
}
```

`Error`を使ってスタックトレースを取得する方法は、[javascriptでスタックトレース - Qiita](https://qiita.com/halhide/items/caf81a7166d92dcfdcd1)という記事をご覧ください。

`Error`オブジェクトの詳細はリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error


## AggregateError

複数のエラーを一つにまとめることができるみたいです。

```js:構文
new AggregateError(反復可能なオブジェクト, エラーメッセージ);
// エラーメッセージは省略可能
```

```js:コード例
try {
    const errors = [new Error('はろー'), new Error('あああ')];
    throw new AggregateError(errors, 'めっせーじ');
} catch (e) {
    console.log(e.message); // めっせーじ
    console.log(e.errors); // (2) [Error: はろー at 場所, Error: あああ at 場所]
}
```

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/AggregateError


## RangeError

値が配列内に存在しない、または値が許容範囲にない場合のエラーです。

[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RangeError#%E8%A7%A3%E8%AA%AC)に書いてあったエラーを実際に出してみました。

```js:エラーを出してみた
// 許容されない文字を含む文字列を String.prototype.normalize() に渡した
const name = '\u0041\u006d\u00e9\u006c\u0069\u0065'; // 何これ
name.normalize('NFC'); // 'Amélie'、正常な状態
name.normalize('AAA'); // Uncaught RangeError: The normalization form should be one of 略

// Array コンストラクターで不正な長さの配列を作ろうとした
new Array(-1); // Uncaught RangeError: Invalid array length

// 数値に関するメソッドに不適切な値を渡した場合
// toExponential()を使用
const n = 1.1;
n.toExponential(-1); // Uncaught RangeError: toExponential() argument must be between 0 and 100
```

`toExponential`関数については[toExponential() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)を、`normalize`関数については[normalize() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/normalize)をご覧ください。

:::note info
`toExponential`関数の引数に`-1`を渡しているのは、`0`だとエラーが出ずに通常通り処理されたからです。

[日本語版MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)には1から100までではない場合に`RangeError`が発生すると書かれていますが、[英語版](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toExponential)には0から100までだと書かれています。
<sub>途中で仕様変更があったりしたのかな？</sub>
:::


以下は数値に対する使用の例です。
(MDNからのコピペ)

```js:数値に対する使用
function check(n) {
  if (!(n >= -500 && n <= 500)) {
    // 引数nが-500から500までの間ではないというエラー
    throw new RangeError("The argument must be between -500 and 500.");
  }
}

try {
  check(2000);
} catch (error) {
  if (error instanceof RangeError) {
    // Handle the error
  }
}
```

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RangeError

## ReferenceError

存在しない変数が参照された場合のエラーです。
誰もが一度はやらかしたことあるエラーではないでしょうか。

以下のコードは、`hello`という文字列を出力しようとしたけど、クォーテーションをつけ忘れて`ReferenceError`が発生した例です。

```js:ReferenceErrorが発生する例
// helloという文字列を出力したかった
console.log(hello); // Uncaught ReferenceError: hello is not defined

// 対処法；クォーテーションをつける
console.log('hello'); // 'hello'
```

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError


## SyntaxError

不正な構文のコードを実行したときに出るエラーです。
これもJavaScriptをやったことある人なら一度は出したことがあると思います。

例えばこんな感じのコードを書くと発生します。

```js:SyntaxErrorの例
const arr = [1,4,5]; // なんかデータが入ってる

// console.logの後に)が一つ多い
arr.foreach(item => console.log(item))); // Uncaught SyntaxError: Unexpected token ')'
```

上のように`)`が一つ多かったり少なかったりするのは、個人的にあるあるだと思ってます。~~<sub>エディタ使えばそんなことは起こらんって？いいじゃんコンソールで作業してもさ！！</sub>~~

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError


## TypeError

型に関するエラーです。
比較的に使う機会は多いんじゃないかな？

ただ、MDNには

> `TypeError` オブジェクトは、演算が実行できなくなった時の新しいエラーを表します。特に値が期待された型ではなかった場合です (ただし、それに限りません)。

とあったので、値が期待された型ではなかった場合以外にも発生することがあると思われます。

例えば、関数ではないものを`()`をつけて実行しようとしたときに発生します。

```js:関数では無いものを実行
const notFunction = 10; // 10は数値(number)であり、関数(function)では無い
notFunction(); // Uncaught TypeError: notFunction is not a function
```

また、`null`や`undefined`のプロパティを読もうとしたときにも発生します。

```js:nullのプロパティを読む
null.a; // Uncaught TypeError: Cannot read properties of null (reading 'a')

// idがundefined-idである要素は見つからなかった
const elem = document.getElementById('undefined-id'); // null

// textContentを編集しようとした
elem.textContent = 'Hello World!' // Uncaught TypeError: Cannot set properties of null (setting 'textContent')
```

## URIError
`decodeURI`や`encodeURI`などを実行した際に発生する例外です。

> `URIError`オブジェクトは、グローバル URI 処理関数が間違った方法で使用された場合のエラーを表します。<sub>（MDNの冒頭より）</sub>

`decodeURI`は、その名の通りURIデコードするための関数です。
この関数で解釈できない文字列があった場合に`URIError`が発生します。

```js:発生例
decodeURI('%'); // Uncaught URIError: URI malformed
```

他にも`decodeURIComponent`（`decodeURI`と似た役割を持つ関数）に解釈できない文字列を渡した際も発生します。

:::note info
URIエンコードについて

URIエンコードとは、URLでたまにみる`%81%82`みたいな文字で、ものすごくざっくり言えば英語以外の文字を記号にするやつです。

[こちら](https://qiita.com/sisisin/items/3efeb9420cf77a48135d)の記事がわかりやすかったので、参考にしてみてください。
:::


詳しくはこちらをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/URIError


## DOMException

Web APIで発生したエラーを示すようです。

> `DOMException`インターフェイスは、Web API のメソッドの呼び出しやプロパティへのアクセスによって異常なイベント（例外と呼ばれます）が発生したことを表します。これは基本的に、Web API 内部のエラーの状態を示すものです。

例えば、`document.querySelector`に空の文字列を入れると発生します。

```js:DOMExceptionの発生例
document.querySelector('');
// Uncaught DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
```

詳しくはMDNをご覧下さい。

https://developer.mozilla.org/ja/docs/Web/API/DOMException


## RTCError

WebRTC APIで発生したエラーを表しているみたいです。

> `RTCError`インターフェースは、[WebRTC](https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API)操作の処理中に発生したエラーを記述します。これは、一般的な DOM エラーを記述する標準的な[DOMException](https://developer.mozilla.org/ja/docs/Web/API/DOMException)インターフェイスに基づいています。

> The `RTCError` interface describes an error which has occurred while handling [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) operations. It's based upon the standard [DOMException](https://developer.mozilla.org/en-US/docs/Web/API/DOMException) interface that describes general DOM errors.

WebRTCは Web Real-Time Communication の略で、サーバーを介さずに直接音声等のデータをやり取りするためのAPIみたいです。

`RTCError`の詳しい情報はこちら。

https://developer.mozilla.org/en-US/docs/Web/API/RTCError

WebRTCのMDNはこちら。

https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API


## MediaError

`HTMLMediaElement`関連で発生したエラーのようです。

> MediaError インターフェースは、`<audio>`や`<video>`のような`HTMLMediaElement`に基づく HTML メディア要素でメディアを扱う際に発生したエラーを表します。

また、`code`プロパティと`message`プロパティでエラーの内容を表します。

> `MediaError`オブジェクトは、エラーの種類を分類する数値コードと、何が間違っていたのかについての具体的な診断を提供するメッセージを用いて、一般的な用語でエラーを記述します。

`code`プロパティで使われる値はこんな感じです。
原文（英語）は[MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code)を見てください。

| 名前 | 値 | 説明 |
| :-- | :-- | :-- |
`MEDIA_ERR_ABORTED` | `1` | ユーザーのリクエストにより、関連リソースのフェッチが中止された
`MEDIA_ERR_NETWORK` | `2` | 以前は利用可能であったにもかかわらず、何らかのネットワークエラーが発生し、メディアが正常に取得できなかった
`MEDIA_ERR_DECODE` | `3` | 以前に使用可能であると判断されたにもかかわらず、メディアリソースをデコードしようとしてエラーが発生した
`MEDIA_ERR_SRC_NOT_SUPPORTED` | `4` | 関連するリソースまたはメディアプロバイダオブジェクト（`MediaStream`など）が不適切であることが判明した。

例えば`MEDIA_ERR_SRC_NOT_SUPPORTED`は、存在しないファイルのパスを`src`属性に指定すると発生します。

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/API/MediaError

https://mdn.github.io/dom-examples/media/mediaerror/


# 非推奨等

ここから先のオブジェクトは、おそらく使うことはありません。
それでもよければどうぞ。


## EvalError

:::note warn
この例外はもう JavaScript からは発生しなくなっていますが、互換性のために EvalError オブジェクトが残っています。<sub>(MDNの冒頭からコピペ)</sub>
:::

グローバルの`eval`関数に関するエラーです。
`eval`関数については、[eval() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/eval)をご覧ください。

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/EvalError


## InternalError

:::note alert
**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。<sub>(MDNの冒頭からコピペ)</sub>
:::

JavaScript エンジンで内部的に発生したエラーです。
このエラーは、以下のように何かが大きすぎる時に発生します。

* switch case が多すぎる
* 正規表現内の括弧が多すぎる
* 配列の初期化子が大きすぎる
* 再帰が深すぎる

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/InternalError


## DOMError

**2024/3/7** @htsign 様にコメントで情報をいただいたため、追記しました。

:::note alert
**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある[互換性一覧表](https://developer.mozilla.org/ja/docs/Web/API/DOMError#browser_compatibility)を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。<sub>(MDNの冒頭からコピペ)</sub>
:::

現在は非推奨となっていますが、もともとはDocument APIで使われていた？使われる予定だった？エラーオブジェクトみたいです。

> `DOMError`インターフェイスは、エラー名を含んでいるエラーオブジェクトを表します。

`DOMException`の前身でしょうか...？（わかってない）

`name`プロパティにエラーの種類を、`message`プロパティにエラーの概要を入れるみたいです。
エラーの種類一覧は[MDN](https://developer.mozilla.org/ja/docs/Web/API/DOMError#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%9E%8B)から見れます。

詳しくはリファレンスをご覧ください。

https://developer.mozilla.org/ja/docs/Web/API/DOMError


## GPUError

:::note warn

Experimental: **これは**[**実験的な技術**](https://developer.mozilla.org/ja/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)です。
本番で使用する前に、[ブラウザー互換性一覧表](https://developer.mozilla.org/en-US/docs/Web/API/GPUError#browser_compatibility)をチェックしてください。

> Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production. <sub>(MDNの冒頭より)</sub>
:::

[WebGPU API](https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API)関連で発生したエラーを示しているみたいです。

WebGPUは、グラフィック能力面でWebに革命を起こしたと言えるWebGLの後継で、WebGLが抱える様々な問題を解決するものみたいです。

> WebGPU APIの`GPUError`インターフェイスは、[`GPUDevice.popErrorScope`](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/popErrorScope)と[`uncapturederror`](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/uncapturederror_event)イベントによって表面化されたエラーのための基本インターフェイスです。（DeepLで翻訳）

> The `GPUError` interface of the [WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) is the base interface for errors surfaced by [GPUDevice.popErrorScope](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/popErrorScope) and the [uncapturederror](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/uncapturederror_event) event.

:::note info
安全なコンテキスト用: この機能は一部またはすべての[対応しているブラウザー](https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API#browser_compatibility)において、[安全なコンテキスト (HTTPS)](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts) でのみ利用できます。

> Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
:::

`GPUError`についてはこちらをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/API/GPUError

WebGPU APIについてはこちらをご覧ください。

https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API


### GPUInternalError

これは`GPUError`を継承したエラーオブジェクトで、WebGPU APIの検証に引っかかったことを示すエラーみたいです。<sub>全然違ったらすみません。</sub>

> [WebGPU API](https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API)の`GPUInternalError`インターフェースは、操作が WebGPU API の検証制約を通過しなかったことを示すアプリケーションエラーを記述します。

> Internal errors occur when something happens in the WebGPU implementation that wasn't caught by validation and wasn't clearly identifiable as an out-of-memory error. It generally means that an operation your code performed hit a system limit in a way that was difficult to express with WebGPU's [supported limits](https://developer.mozilla.org/en-US/docs/Web/API/GPUSupportedLimits). The same operation might succeed on a different device. These can only be raised by pipeline creation, usually if the shader is too complex for the device.

正確な情報はMDNをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/API/GPUInternalError


### GPUPipelineError

> WebGPU APIの`GPUPipelineError`インターフェイスはパイプラインの失敗を記述します。これは[`GPUDevice.createComputePipelineAsync()`](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/createComputePipelineAsync)または[`GPUDevice.createRenderPipelineAsync()`](https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/createRenderPipelineAsync)呼び出しによって返された`Promise`が拒否されたときに受信される値です。

すみません、私には何が何だかわかりませんでした。
詳しくはMDNをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/API/GPUPipelineError


## WebTransportError

:::note warn
限られた可用性
○Chrome ○Edge ×FireFox ×Safari（2024/3/14時点）

この機能は、最も広く使用されているブラウザの一部では動作しないため、ベースラインではありません。
:::

:::note info
安全なコンテキスト用: この機能は一部またはすべての[対応しているブラウザー](https://developer.mozilla.org/ja/docs/Web/API/WebGPU_API#browser_compatibility)において、[安全なコンテキスト (HTTPS)](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts) でのみ利用できます。
:::

:::note info
この機能は[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)内で使用できます。
:::

どうやらWebTransport APIに関するエラーのようです。
また、`DOMExpection`を継承しています。

> [WebTransport API](https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API)の`WebTransportError`インターフェースは、API に関連するエラーを表します。このエラーは、サーバーのエラー、ネットワーク接続の問題、クライアントによる中止操作（例えば、`WritableStream.abort()`呼び出しによるもの）などによって発生します。

詳しくはMDNをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/API/WebTransportError

https://developer.mozilla.org/en-US/docs/Web/API/WebTransport_API