页面的错误监听方式

页面中的代码建议都加上try/catch，它能捕获常规运行错误，但是语法错误和异步错误不行。

try {
  console.log(notdefined);
} catch(e) {
  console.log('捕获到异常：', e);
}

window.onerror能捕获常规运行错误，异步错误也可捕获，但是不能捕获语法错误及资源加载错误。

window.onerror = function(message, source, lineno, colno, error) {
  console.log('捕获到异常：',{message, source, lineno, colno, error});
}
console.log(notdefined);

window.addEventListener能捕获常规运行错误、异步错误及资源加载错误，但是不能捕获语法错误、new Image错误及fetch错误。

window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
}, true)

以上方法都不能捕获promise类型的错误，要捕获promise类型的错误需要通过unhandledrejection捕获。

window.addEventListener("unhandledrejection", function(e){
  console.log('捕获到异常：', e);
});

由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码，所以在Vue里面出现的错误，并不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler。

// vue2
Vue.config.errorHandler = function (err) {
  setTimeout(() => {
    throw err
  })
}

//vue3
app.config.errorHandler = function (err, instance, info) {
  console.log('err', err)
  throw err
}

一些错误显示：

参考：https://www.cnblogs.com/summerstar/p/16169855.html