## JavaScript 全局捕获错误

对于前端的异常捕获，我们都会知道onerror事件(当然还有try，catch)，但针对window的error事件的用法，其实是有区别的。

### 方式一： window.onerror = handleOnError

1. 能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

2. 参数对应5个值（错误信息，所在文件，行，列，错误信息）

3. 函数体内用return true可以不让异常信息输出到控制台

```javascript
window.onerror = function (msg, url, lineNo, columnNo, error) {
    var string = msg.toLowerCase();
    var substring = "script error";
    if (string.indexOf(substring) > -1){
        alert('Script Error: See Browser Console for Detail');
    } else {
        var message = [
            'Message: ' + msg,
            'URL: ' + url,
            'Line: ' + lineNo,
            'Column: ' + columnNo,
            'Error object: ' + JSON.stringify(error)
        ].join(' - ');

        alert(message);
    }

    return false;
};
```

### 方式二:  window.addEventListener

1. 为捕获状态时（第三个参数为true）能捕获到js执行错误，也能捕获带有src的标签元素的加载错误。

  为冒泡状态时（第三个参数为false）能捕获到js执行错误，不能捕获带有src的标签元素的加载错误。

2. 参数对应1个值，异常事件，错误信息都在里面

3. 函数体内用preventDefault可以不让异常信息输出到控制台

```javascript
window.addEventListener('error', handleListenerError, true);
function handleListenerError(e) {
    var srcElement = e.srcElement;
    if (srcElement === window) {
        // 全局错误
        console.error(JSON.stringify({
            message: e.message,
            filename: e.filename,
            lineno: e.lineno,
            colno: e.colno,
            stack: e.stack,
            type: 'error',
            error: "script runtime error"
        }))
    } else {
        // 元素错误，比如引用资源报错
        console.error(JSON.stringify({
            src: srcElement.src,
            href: srcElement.href,
            tagName: srcElement.tagName,
            type: 'error',
            error: "resource load error"
        }))
    }
}                                
```


### 参考链接

1. https://www.cnblogs.com/liyongquan/p/9180562.html

2. https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onerror