Error Classification

JavaScript errors can be categorized into several types: syntax errors, runtime errors, resource loading errors, and others. This article focuses on runtime errors and resource loading errors.

1.1 js运行时错误

JavaScript provides mechanisms to capture runtime errors. If code can catch potential errors and handle them appropriately, it ensures the code doesn't produce unexpected errors during runtime, indicating high-quality code.

JavaScript natively offers an Error constructor, and all thrown errors are instances of this constructor. Error instances have three properties: message (error message), name (error name), and stack (error stack).

For example, the following code prints the error instance object, yielding message, name, and stack information:

1) var err = new Error('出错了');<br/>2) console.dir(err)<br/>

The console output shows the error instance object, which is an object type with properties message, stack, and name from the Error prototype chain.

1.1.2 6种错误类型

The following six error types are derived from the Error object:

SyntaxError : Syntax errors during code parsing. Example: incorrect syntax like `var a =`

TypeError : Type errors when variables or parameters are not of the expected type. Example: calling array methods on a number.

RangeError : Range errors when values exceed valid ranges. Example: setting array length to a negative value.

ReferenceError : Reference errors when referencing non-existent variables. Example: using an undefined variable.

EvalError : Eval errors when the eval function is not used correctly. This error type is no longer used but remains for compatibility.

URIError : URI errors when encoding/decoding functions are misused.

1.2 资源加载错误

Errors occur when loading resources (excluding <link>) such as <img>, <input type="image">, <object>, <script>, <style>, <audio>, or <video>. These errors can be captured using the onerror event. 1) img.onerror = handleError;<br/> Resource loading errors do not bubble and can only be captured in the capture phase.

When loading cross-origin resources, crossorigin must be added to the element, and the server must set the Access-Control-Allow-Origin header to * or the allowed domain.

1.3 throw

The throw statement throws a user-defined exception. The current function execution stops (throw statements after this point won't execute), and control passes to the first catch block in the call stack. If there's no catch block, the program terminates.

1.4 try...catch...finally

The try/catch mechanism captures errors in the try block. If no error is thrown, the finally block still executes. However, finally cannot catch errors from asynchronous code.

1.5 promise

Promises are a solution for asynchronous operations. They have three states: pending, fulfilled, and rejected. Promise errors are not caught by window.onerror unless handled with unhandledrejection events or setTimeout/setInterval.

1.6 async/await

Async functions return a Promise. Await pauses execution until the Promise resolves. Errors in async functions are caught in try/catch blocks, but errors in async callbacks are not caught by window.onerror.