why

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

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

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

......

异常区分

异常的几种后果和程度：

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

导致异常的原因：

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

捕获阶段

常见的捕获方法：

系统异常捕获

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

JS异常

js 复制代码

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

资源异常

js 复制代码

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

Promise异步

js 复制代码

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

iframe error
js 复制代码
```
windows.iframe
```

Vue异常

js 复制代码

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

接口请求异常捕获

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

js 复制代码

    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;

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

js 复制代码

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

fetch封装

常见的报错类型

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

日志上报与存储

要上报哪些信息？

用户信息
哪个hook
triggerTime触发时间
异常类型
资源异常
异常详情

怎么上报？

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

js 复制代码

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);
}

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

预警通知

预警规则自定义：

大量接口报错
发送间隔
日志内容

实现

php 复制代码

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

我重生了，重生到了异常捕获与上报那天...

why

异常区分

捕获阶段

常见的报错类型

日志上报与存储

要上报哪些信息？

怎么上报？

预警通知

实现