B端白屏分析&错误监控处理

分析

可能导致白屏及错误原因

1. 代码错误，最多的是获取a.b, 当a为undefined时代码异常
2. 请求异常，没有catch异常
3. 代码逻辑错误，没有报错，但是白屏了

异常捕获

1. window.onerror 捕获代码错误

   window.addEventListener('error', function (event) {
     console.log('!!!addEventListener', event);
   })
   

2. promise error 捕获（包含接口异常，then方法内语法错误）

   window.addEventListener("unhandledrejection", function(e) {
     e.preventDefault()
     console.log('我知道 promise 的错误了');
     console.log(e.reason);
     return true;
   });
   

3. console.error代理

   var consoleError = window.console.error; 
   window.console.error = function () { 
       consoleError && consoleError.apply(window, arguments); 
   };
   

4. React组件错误，包装根节点，捕获所有子节点的错误

   class ErrorBoundary extends React.Component {
     componentDidCatch(error, errorInfo) {
       console.log('!!!ErrorBoundary', error, errorInfo)
     }
   
     render() {
       return this.props.children;
     }
   }
   <ErrorBoundary><Routers /></ErrorBoundary>
   

5. vue全局捕获

   Vue.config.errorHandler = function (err, vm, info) {}
   

6. 资源404，在加载资源前注册事件

       <script type="text/javascript"> window.addEventListener('error', function(e) { console.log(e); }, true); </script>
   

7. 接口异常捕获

   // 封装请求库，统一的异常处理
   export default requst(...arg) {
      return axios(...arg)
   }