why

如果这个报错能在触发的时候就收集到

如果此类错误收集到后完成上报

如果上报的数据经分析发出预警通知

……

异常区分

异常的几种后果和程度：

1. 出错：界面呈现的内容与用户预期的内容不符，例如点击进入非目标界面，数据不准确，出现的错误提示不可理解，界面错位，提交后跳转到错误界面等情况。这类异常出现时，虽然产品本身功能还能正常使用，但用户无法达成自己目标
2. 呆滞：
   界面出现操作后没有反应的现象，例如点击按钮无法提交，提示成功后无法继续操作。这类异常出现时，产品已经存在界面级局部不可用现象。
3. 损坏：界面出现无法实现操作目的的现象，例如点击无法进入目标界面，点击无法查看详情内容等。这类异常出现时，应用部分功能无法被正常使用。
4. 假死:界面出现卡顿，无法对任何功能进行使用的现象。例如用户无法登录导致无法使用应用内功能，由于某个遮罩层阻挡且不可关闭导致无法进行任何后续操作。这类异常出现时，用户很可能杀死应用。
5. 崩溃:应用出现经常性自动退出或无法操作的现象。例如间歇性crash，网页无法正常加载或加载后无法进行任何操作。这类异常持续出现，将直接导致用户流失，影响产品生命力。

导致异常的原因：

1. 逻辑错误
2. 数据类型错误
3. 语法错误，版本之间的兼容问题
4. 网络错误
5. 系统错误（内存不够磁盘满存）

捕获阶段

常见的捕获方法：

1. 系统异常捕获

   1. try catch

      1. 优点：不阻塞代码运行
      2. 缺点：需要在所有可能会报错的地方添加，会造成代码入侵；不能捕获异步的错误；不能捕获格式语法错误比如let name=Jack'这种漏写错

   2. JS异常

          //全局监听
          window.onerror=function(error){
              console.log(error)
          }
      

   3. 资源异常

      //全局监听
      window.addEventListener('error',error=>{
          console.log(error)
      })
      

   4. Promise异步

      window.addEventListener('unhandledrejection', function(event) {
         console.error('Unhandled Promise rejection:', event.reason);
      });
      
      

   5. iframe error

      windows.iframe
      

   6. Vue异常

      Vue.config.errorHandler = function(error, vm, info) {
      console.log( error, vm, info )
      }
      

2. 接口请求异常捕获

   1. axios拦截，拦截返回值，对error进行上报

          const axios = require('axios');
      
          // 创建 Axios 实例
          const instance = axios.create({
            baseURL: 'https://api.example.com', // 你的 API 地址
            timeout: 5000, // 请求超时时间
          });
      
          // 添加请求拦截器
          instance.interceptors.request.use(
              function(config) {
              // 在发送请求之前做些什么，例如加入请求头
                  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
              return config;
           },
           function(error) {
              // 对请求错误做些什么
              return Promise.reject(error);
            }
           );
      
          // 添加响应拦截器
      instance.interceptors.response.use(
            function(response) {
             // 对响应数据做点什么
              return response.data;
            },
          function(error) {
              // 对响应错误做点什么
              if (error.response) {
                // 请求已经发出，但服务器响应返回的状态码不在 2xx 范围内
                console.error('Response error:', error.response.data);
              } else if (error.request) {
            // 请求已经发出，但没有收到响应
                console.error('No response received:', error.request);
              } else {
                // 在设置请求时发生了一些事情，触发了一个错误
                console.error('Request error:', error.message);
              }
              return Promise.reject(error);
            }
      );
      
      // 导出实例，以便在应用程序的其他部分使用
      module.exports = instance;
      
      

   2. xmlHttpRequest,团队中有约定俗成的规则时使用

      window.XMLHttpRequest.onreadystatechange=function(){
          if(window.XMLHttpRequest.readyState==4){
              //判断状态码之类的逻辑
              ...
          }
      }
      

   3. fetch封装

常见的报错类型

1. Error：错误的基类，其他错误都继承自该类型
2. EvalError：eval()函数执行出错时会抛出EvalError错误，在ES5中已不再出现，为了向后兼容所以保留了下来。
3. ReferenceError：尝试引用一个未被定义的变量时，将会抛出此异常（比如console.log(aaa)但aaa没定义)
4. SyntaxError：语法解析不合理（比如console.log ‘aaa’)
5. TypeError：类型错误，用来表示值的类型非预期类型时发生的错误（比如字符串用了数组的方法）
6. URIError：以一种错误的方式使用全局 URI 处理函数而产生的错误主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。 如：decodeURI(‘%2’)

日志上报与存储

要上报哪些信息？

1. 用户信息
2. 哪个hook
3. triggerTime触发时间
4. 异常类型
5. 资源异常
6. 异常详情

怎么上报？

1. Image，优点：快捷省事儿构建一个携带信息的object，通过new Image()，向服务端发送Image时携带报错信息

   const errorMessage={
       'message='+encodeURIComponent(errMsg),
       'url='+encodeURIComponent(url),
       'line='+lineNumber,
       'column='+columnNumber,
       'url='+encodeURIComponent((errorObj$$errorObj.stack)?),
   }
   function reportErrorToServer(errorMessage) {
     const img = new Image();
     const url = `https://yourserver.com/report?error=${encodeURIComponent(errorMessage)}`;
     img.src = url;
   }
   
   // 示例用法：
   try {
     // 可能会发生错误的代码块
     throw new Error('Something went wrong');
   } catch (error) {
     reportErrorToServer(error.message);
   }
   
   

2. SendBeacon，优点：没有跨域，不阻塞业务
3. XMLHttpRequest，通过通信的方式上报，快速

预警通知

预警规则自定义：

1. 大量接口报错
2. 发送间隔
3. 日志内容

实现

/**
*sys:String,
*msg:{},
*Vue:Vue:object
*/
let errorWatch=new getErrorWatcher(系统名，需要上报的信息，Vue实例)

if(data.status==='500'){
    window.errorWatch.errorReport({
        url:'/xx/xx/xx/xx.js',
        errorType:'data.status',
        returnData:data,
    })
}

原文链接：https://juejin.cn/post/7358336719165390900 作者：并没有什么luck