# Error 错误相关

# 一、throw

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止（throw之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个catch (opens new window)块。如果调用者函数中没有catch块，程序将会终止。

function foo() {
  console.log(1);
  throw new TypeError('some error');
  console.log(2);
}
try {
  foo();
} catch (error) {
  console.log(error.name);
  console.log(error.message);
  console.log(error.toString());
  console.log(error.lineNumber);
}

# 二、Error

通过Error的构造器可以创建一个错误对象。当运行时错误产生时，Error的实例对象会被抛出。Error对象也可用于用户自定义的异常的基础对象。下面列出了各种内建的标准错误类型。

new Error([message[, fileName[,lineNumber]]])

message可选。人类可阅读的错误描述信息。
fileName可选。被创建的Error对象的fileName属性值。默认是调用Error构造器代码所在的文件的名字。
lineNumber可选。被创建的Error对象的lineNumber属性值。默认是调用Error构造器代码所在的文件的行号。

# 2.1 内部属性和方法

Error.prototype.message
Error.prototype.name
Error.prototype.description A non-standard Microsoft property for the error description. Similar to message.
Error.prototype.number A non-standard Microsoft property for an error number.
Error.prototype.fileName (opens new window) A non-standard Mozilla property for the path to the file that raised this error.
Error.prototype.lineNumber (opens new window) A non-standard Mozilla property for the line number in the file that raised this error.
...
Error.prototype.toString() (opens new window)Returns a string representing the specified object. Overrides the Object.prototype.toString() (opens new window) method.

下面是一些继承自Error类的错误子类

# 三、EvalError

本对象代表了一个关于 eval (opens new window) 函数的错误.此异常不再会被JavaScript抛出，但是EvalError对象仍然保持兼容性.

new EvalError([message[, fileName[, lineNumber]]])

# 四、InternalError

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

InternalError 对象表示出现在JavaScript引擎内部的错误。例如： "InternalError: too much recursion"（内部错误：递归过深）。

new InternalError([message[, fileName[, lineNumber]]])

# 五、RangeError

RangeError对表明象一个错误，当一个值不在其所允许的范围或者集合中。

试图传递一个number参数给一个范围内不包含该number的函数时则会引发RangeError。当传递一个不合法的length值作为Array (opens new window) 构造器的参数创建数组，或者传递错误值到数值计算方法（Number.toExponential() (opens new window)，Number.toFixed() (opens new window) ，Number.toPrecision() (opens new window)），会出现RangeError。

new Array(-1) // RangeError: Invalid array length

# 六、ReferenceError

The ReferenceError object represents an error when a variable that doesn't exist (or hasn't yet been initialized) in the current scope is referenced.

console.log(a); // ReferenceError: a is not defined

# 七、SyntaxError

SyntaxError对象代表尝试解析语法上不合法的代码的错误。当Javascript语言解析代码时,Javascript引擎发现了不符合语法规范的tokens或token顺序时抛出SyntaxError.

try {
  eval('hoo bar');
} catch (e) {
  console.log(e instanceof SyntaxError); // true
  console.log(e.message);                // "missing ; before statement"
  console.log(e.name);                   // "SyntaxError"
  console.log(e.fileName);               // "Scratchpad/1"
  console.log(e.lineNumber);             // 1
  console.log(e.columnNumber);           // 4
  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
}

# 八、TypeError

TypeError 对象用来表示值的类型非预期类型时发生的错误。

这个错误类型可能工作中用到会比较多

function debounce(fn, delay) {
    if(typeof fn !=== 'function') {
        throw new TypeError("Expect a function")
    }
    // ...
}

# 九、URIError

URIError 对象用来表示以一种错误的方式使用全局URI处理函数而产生的错误。

try {
  decodeURIComponent('%');
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message);             // "malformed URI sequence"
  console.log(e.name);                // "URIError"
  console.log(e.fileName);            // "Scratchpad/1"
  console.log(e.lineNumber);          // 2
  console.log(e.columnNumber);        // 2
  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
}

# 十、添加全局错误捕获

window.addEventListener('error', (err) => {
  //  通过stack可以获取函数的错误发生时的调用堆栈
  const { message, stack } = err.error;
  console.log(stack);
});
window.addEventListener('unhandledrejection', (event) => {
  const { reason } = event;
  console.log(event);
});

获取错误发生时的函数上下文堆栈信息

function a() {
  try {
    throw new Error('some error');
  } catch (error) {
    console.log(error.toString());
    const errorStack = error.stack.toString();
  }
}
function b() {
  a();
}
function c() {
  b();
}
c();

# 十一、DOM媒体元素的error事件

HTMLMediaElement.onerror

The onerror property of the HTMLMediaElement (opens new window) interface is the event handler for processing error (en-US) events.

The error event fires when some form of error occurs while attempting to load or perform the media.

<video /> <audio>

# 十二、HTMLImageElement onerror

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error (en-US) event, that event handler will get called. This can happen in a number of situations, including:

var img1 = new Image(); // Image 构造器
img1.src = 'image1.png';
img1.alt = 'alt';
// img1 加载失败或者其他错误时会触发这个回调
img1.addEventListener('error', (e) => {
  console.log(e);
  console.log(e.toString());
});
document.body.appendChild(img1);

← DOM、BOM 图片处理 →