如何优雅的处理前端异常？

参考文章：https://mp.weixin.qq.com/s/unMuI4Niuat6UDYdwsSJHA

1. 可疑区域增加 Try-Catch
   try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。
   

   try {
     let name = 'jartto';
     console.log(nam);
   } catch(e) {
     console.log('捕获到异常：',e);
   }

2. 全局监控 JS 异常 window.onerror
   不论是静态资源异常，或者接口异常，错误都无法捕获到。只能捕获同步运行时错误和语法错误。
   

   /**
   * @param {String}  message    错误信息
   * @param {String}  source    出错文件
   * @param {Number}  lineno    行号
   * @param {Number}  colno    列号
   * @param {Object}  error  Error对象（对象）
   */
   
   window.onerror = function(message, source, lineno, colno, error) {
      console.log('捕获到异常：',{message, source, lineno, colno, error});
   }
   首先试试

3. 全局监控静态资源异常 window.addEventListener
   

   <scritp>
   window.addEventListener('error', (error) => {
       console.log('捕获到异常：', error);
   }, true)
   </script>
   <img src="./jartto.png">

4. 捕获没有 Catch 的 Promise 异常：unhandledrejection
   在 promise 中使用 catch 可以非常方便的捕获到异步 error。
   没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。
   解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。
   

   window.addEventListener("unhandledrejection", function(e){
     e.preventDefault()
     console.log('捕获到异常：', e);
     return true;
   });
   Promise.reject('promise error');

5. VUE errorHandler 和 React componentDidCatch
   

   Vue.config.errorHandler = (err, vm, info) => {
     console.error('通过vue errorHandler捕获的错误');
     console.error(err);
     console.error(vm);
     console.error(info);
   }
   

   React 16 提供了一个内置函数 componentDidCatch，使用它可以非常简单的获取到 react 下的错误信息

   componentDidCatch(error, info) {
       console.log(error, info);
   }

6. 监控网页崩溃：
   利用 window 对象的 load 和 beforeunload 事件实现网页崩溃的监控
   

   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
       */
     }