异常处理

参考：https://blog.51cto.com/u_15315508/5250674

错误异常处理的方法

• window.onerror
  • 会全局的在JavaScript运行时错误、语法错误发生时触发。
  • 无法全局捕获资源加载异常
  • 可以捕获异步错误

js

window.onerror = (msg, url, lineNum, colNum, err) => {
  console.log(`错误发生的异常信息（字符串）:${msg}`)
  console.log(`错误发生的脚本URL（字符串）:${url}`)
  console.log(`错误发生的行号（数字）:${lineNum}`)
  console.log(`错误发生的列号（数字）:${colNum}`)
  console.log(`错误发生的Error对象（错误对象）:${err}`)
};

• addEventListener('error')
  • 监听js运行时错误事件，会比window.onerror先触发，与onerror的功能差不多
  • 可以捕获异步错误
  • 可以全局捕获资源加载异常的错误；
• try/catch

需要处理哪些异常

• JS 语法错误、代码异常
• AJAX 请求异常
• 静态资源加载异常
• Promise 异常
• Iframe 异常
• 跨域 Script error
• 崩溃和卡顿

try/catch理解

• try catch只能处理同步的运行时的错误，对异步错误没有办法捕获

javascript

/**
 *  Promise 的错误是异步的，所以 try/catch 无法捕获它们
 *  错误是异步的，所以 try/catch 是无法捕获它们的,  try/catch只能处理同步错误
 */
try {
  new Promise((resolve, reject) => {
    reject('promise错误');
  });
} catch (e) {
  console.log('e', e);
}

// 定时器也是无法捕获
try {
  setTimeout(() => {
    throw new Error('错误');
  });
} catch (e) {
  console.log('e', e);
}

iframe 异常

对于 iframe 的异常捕获，需要用到 window.onerror：

崩溃和卡顿异常处理

崩溃和卡顿有何差别：

• 卡顿也就是网页暂时响应比较慢，JS 可能无法 及时执行 ，这也是上篇网页卡顿监控所依赖的技术点。
• 崩溃就不一样了，网页都崩溃了，页面看不见了，JS 都不运行

有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？

• 巧用load 与 beforeunload 事件

  load 事件是在页面加载完成后触发的事件

  beforeunload 事件是在页面即将被关闭或刷新时触发的事件

js

window.addEventListener('load', function () {
    sessionStorage.setItem('good_exit', 'pending');
    setInterval(function () {
        sessionStorage.setItem('time_before_crash', new Date().toString());
    }, 1000);
  });

  window.addEventListener('beforeunload', function () {
    sessionStorage.setItem('good_exit', 'true');
  });

  if(sessionStorage.getItem('good_exit') &&
    sessionStorage.getItem('good_exit') !== 'true') {
    /*
        insert crash logging code here
    */
    alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
  }