Common Mistakes capture the way JS

`JS`The common error capture method

Sync Error

First, `SyntaxError`: syntax error

Syntax error, if this type of error encountered during the pre-resolved, it will cause the entire jsfile can not be executed. In vueIf there is a syntax error, will not directly run the project, the package will also direct an error

II `Uncaught ReferenceError`: reference error

Error occurs when a reference variable does not exist. Assign a value can not be assigned to an object, such as a function of the operating results or function assignment. Such errors can be try-catchcaptured

try {
    a()
} catch(e) {
	console.log('捕获到错误引用的错误==>',e)
    // 捕获到错误引用的错误==> Uncaught ReferenceError: a is not defined
}
复制代码

III `RangeError`: Range Error

RangeErrorWhen an error occurs only when out of range. There are several main case, the first array length is negative, and the second is Numbera method object parameter out of range, and exceeds the maximum stack function. Such errors can be try-catchcaptured

try{
    [].length=-5
} catch(e) {
    console.log('捕获到范围错误==>',e)
    // 捕获到范围错误==> Uncaught RangeError: Invalid array length
}
复制代码

Fourth, `TypeError`Type: Error

Variable or error occurs when the parameter is not the expected type. For example, use the original type and call the object does not exist in the new string, boolean, etc. will throw this error, because the parameters of the new command should be a constructor. Such errors can be try-catchcaptured

try{
    const a = {}
    a()
} catch(e) {
    console.log('捕获到类型错误==>',e)
    // 捕获到类型错误==> TypeError: a is not a function
}
复制代码

Fifth, `URIError,URL`error

The main parameters of the correlation function is incorrect; URI parameters error thrown when incorrectly, mainly involving encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape(）six functions. Such errors can be try-catchcaptured

try{
    decodeURI('%')
} catch(e) {
    console.log('捕获URI错误==>',e)
    // 捕获URI错误==> URIError: URI malformed
    //                       at decodeURI (<anonymous>)
}
复制代码

Asynchronous error

First, the `promise/async-await`error

PromiseAsynchronous programming is a solution than traditional solutions callbackmore elegant. It was first proposed and implemented by the community, ES6which is written into the standard language, unified usage, native in the Promiseobject. PromiseAlthough the callback to avoid hell, but if there are problems, can not be used try-catchto capture; That's right our mistakes capture and processing and causing unnecessary trouble.

Fortunately, ES8he joined to async/awaitsupport, we will say 异步函数, this is a very useful feature. async/awaitWe will be freed from the headaches of callback hell, so that the whole code looks very simple. async-awaitAdding that we can use try-catcherror trapping the asynchronous

async function test (){
    try {
        // 假设a是一个异步函数
        await a()
    } catch(e){
        console.log('捕获到异步的错误==>',e)
    }
}
复制代码

Second, the `settimeout/setinterval/callBack`error

In vuecan be used window.onerror()to listen settimeout/setinterval/callBackmistake;

window.onerror = (message,url,lineNo,cloumnNo,error) => {
    // message 错误信息
    // url 文件名
    // lineNo 行号
    // cloumnNo 列号
    // error 错误信息
}
复制代码

Resource Load Error

Use window.addEventListener('error')capture, window.onerrorcapture less resource loading errors; window.onerrorand window.addEventListener('error')the similarities and differences: The same point can be captured windowon a jsrun-time error. 1. The difference is that different error parameters 2. captures window.addEventListener('error')can capture resource loading error, but window.onerrorcan not capture the resource loading error

AJAX request error

This error may be performed in a request interceptor axios capture the error

Reproduced in: https: //juejin.im/post/5d036c036fb9a07efe2db97e