FE.B-异常监控原理

js错误主要有2类：语法错误、脚本错误;
监控方式有2种：try-catch、window.onerror

try-catch 异常处理

try-catch处理异常的能力有限，只能捕获到运行时的非异步错误，对于语法错误和异步错误就显得无能为力。

try{
error // <- 未定义变量
} catch(e) {
console.log('捕获到错误');
console.log(e);
}
//输出:
//ReferenceError: error is not defined

try {
var error = 'error'； // <-大写分号
} catch(e) {
console.log('捕获不到错误');
console.log(e);
}
//输出：
//Uncaught SyntaxError: Invalid or unexpected token

try{
setTimeout(function () {
error // <- 异步错误
}, 0)
} catch(e) {
console.log('捕获不到错误');
console.log(e);
}
//输出：
//Uncaught ReferenceError: error is not defined

window.onerror 异常处理

window.onerror 捕获异常的能力比 try-catch稍强一点，无论是异步还是非异步的错误，onerror都能捕获到运行时的错误

/**
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log('捕获到运行时同步错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error; // <- 未定义变量
//输出：
//捕获到错误了
//{msg: "Uncaught ReferenceError: error is not defined", ...}

 window.onerror = function (msg, url, row, col, error) {
  console.log('捕获到异步错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error; // <- 未定义变量
});
//输出：
//捕获到异步错误了
//{msg: "Uncaught ReferenceError: error is not defined", ...}

在实际使用中，onerror主要用来捕获预料之外的错误，try-catch则是用来在可预见情况下监控特定的错误，两者结合使用更加高效

但是对于语法错误，window.onerror还是捕获不了，所以我们在写代码的时候要尽可能避免语法错误，不过一般这种错误比较容易察觉。

除了语法错误不能捕获之外，网络异常的错误也是不能捕获的

<script>
    window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了');
    console.log({
        msg,  url,  row, col, error
    })
    return true;
};
</script>
<img src="./404.jpg"/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)

这是因为网络请求是没有事件冒泡的，所以需要在捕获阶段才能捕获到异常，虽然这样可以捕获到网络的异常，但无法判断http的状态，比如该异常是404还是500，想要知道这个状态就必须和服务日志一起排查了。

<script>
    window.addEventListener('error', (msg, url, row, col, error) => {
        console.log('我知道错误了');
        console.log({
            msg,  url,  row, col, error
        })
        return true;
    }, true);
</script>
<img src="./404.jpg"/>
输出：
GET http://localhost:8081/404.jpg 404 (Not Found)
我知道错误了
{msg: Event, url: undefined, row: undefined, col: undefined, error: undefined}

Promise的错误没有使用catch去捕获的话，上述的方式都是不能捕获到错误的。但通过监听unhandledrejection事件，可以捕获未处理的Promise错误。但是需要注意的是，这个事件是有兼容问题的。

window.addEventListener("unhandledrejection", function(e){
    e.preventDefault()
    console.log('我知道 promise 的错误了');
    console.log(e.reason);
    return true;
});
new Promise((resolve, reject) => {
    reject('promise error');
});
输出：
我知道 promise 的错误了
promise error

说完这些捕获异常的方式之后，该说说异常上报的常用方法了。

异常上报

当我们拿到报错信息之后，就需要上报这些异常信息，我们上报的方式通常有两种方法：

1. 通过Ajax发送数据
2. 通过动态创建img标签的形式

function report(error) {
  var reportUrl = 'http://xxxx/report';
  new Image().src = reportUrl + 'error=' + error;
}

script error 脚本错误

在一个域下引用了其他域的脚本，又没有去做额外的配资，就很容易产生Script error。说到最后这就是因为浏览器的同源策略产生的。所以最好我们还是使用跨源资源共享机制( CORS )

// http://localhost:8080/index.html
<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了，也知道错误信息');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<script src="http://localhost:8081/test.js" crossorigin></script>

// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});