JavaScriptのエラー型一覧

はじめに

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

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

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

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

エラー型一覧とは

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

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

エラー型一覧

ここから本編です。

Error

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

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

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

エラーを発生させる

try {
  throw new Error("Whoops!");
} catch (e) {
  console.error(e.name + ": " + e.message);
}

Errorを使ってスタックトレースを取得する方法は、javascriptでスタックトレース - Qiitaという記事をご覧ください。

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

AggregateError

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

構文

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

コード例

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 場所]
}

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

RangeError

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

MDNに書いてあったエラーを実際に出してみました。

エラーを出してみた

// 許容されない文字を含む文字列を 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を、normalize関数についてはnormalize() - JavaScript | MDNをご覧ください。

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

日本語版MDNには1から100までではない場合にRangeErrorが発生すると書かれていますが、英語版には0から100までだと書かれています。
_{途中で仕様変更があったりしたのかな？}

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

数値に対する使用

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
  }
}

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

ReferenceError

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

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

ReferenceErrorが発生する例

// helloという文字列を出力したかった
console.log(hello); // Uncaught ReferenceError: hello is not defined

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

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

SyntaxError

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

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

SyntaxErrorの例

const arr = [1,4,5]; // なんかデータが入ってる

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

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

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

TypeError

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

ただ、MDNには

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

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

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

関数では無いものを実行

const notFunction = 10; // 10は数値(number)であり、関数(function)では無い
notFunction(); // Uncaught TypeError: notFunction is not a function

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

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 処理関数が間違った方法で使用された場合のエラーを表します。_{（MDNの冒頭より）}

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

発生例

decodeURI('%'); // Uncaught URIError: URI malformed

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

URIエンコードについて

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

こちらの記事がわかりやすかったので、参考にしてみてください。

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

DOMException

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

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

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

DOMExceptionの発生例

document.querySelector('');
// Uncaught DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.

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

RTCError

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

RTCErrorインターフェースは、WebRTC操作の処理中に発生したエラーを記述します。これは、一般的な DOM エラーを記述する標準的なDOMExceptionインターフェイスに基づいています。

The RTCError interface describes an error which has occurred while handling WebRTC operations. It's based upon the standard DOMException interface that describes general DOM errors.

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

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

WebRTCのMDNはこちら。

MediaError

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

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

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

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

codeプロパティで使われる値はこんな感じです。
原文（英語）はMDNを見てください。

名前	値	説明
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属性に指定すると発生します。

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

非推奨等

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

EvalError

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

グローバルのeval関数に関するエラーです。
eval関数については、eval() - JavaScript | MDNをご覧ください。

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

InternalError

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

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

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

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

DOMError

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

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。_{(MDNの冒頭からコピペ)}

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

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

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

nameプロパティにエラーの種類を、messageプロパティにエラーの概要を入れるみたいです。
エラーの種類一覧はMDNから見れます。

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

GPUError

Experimental: これは実験的な技術です。
本番で使用する前に、ブラウザー互換性一覧表をチェックしてください。

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production. _{(MDNの冒頭より)}

WebGPU API関連で発生したエラーを示しているみたいです。

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

WebGPU APIのGPUErrorインターフェイスは、GPUDevice.popErrorScopeとuncapturederrorイベントによって表面化されたエラーのための基本インターフェイスです。（DeepLで翻訳）

The GPUError interface of the WebGPU API is the base interface for errors surfaced by GPUDevice.popErrorScope and the uncapturederror event.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

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

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

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

GPUInternalError

これはGPUErrorを継承したエラーオブジェクトで、WebGPU 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. 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をご覧ください。

GPUPipelineError

WebGPU APIのGPUPipelineErrorインターフェイスはパイプラインの失敗を記述します。これはGPUDevice.createComputePipelineAsync()またはGPUDevice.createRenderPipelineAsync()呼び出しによって返されたPromiseが拒否されたときに受信される値です。

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

WebTransportError

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

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

この機能はWeb Worker内で使用できます。

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

WebTransport APIのWebTransportErrorインターフェースは、API に関連するエラーを表します。このエラーは、サーバーのエラー、ネットワーク接続の問題、クライアントによる中止操作（例えば、WritableStream.abort()呼び出しによるもの）などによって発生します。

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