Sentry前端错误监控原理

1.前端错误异常按照捕获方式分类：

• 脚本错误

脚本错误可以分为编译时错误以及运行时错误

捕获方式主要有：

1.try…catch…

单点捕获，可以拿到出错的信息以及文件名、行号、列号等信息，

缺点：只能捕获同步代码的异常，捕获错误是侵入性的

2.window.error

全局捕获，可以拿到出错的信息以及文件名、行号、列号等信息

缺点：只能捕获即时运行错误，不能捕获资源加载错误

• 资源加载错误 资源加载错误包括：img、script、link、audio、video、iframe ...

捕获方式：

1.window.addEventListner(‘error’)

全局捕获，可以捕获所有资源加载失败的情况，但是报错信息不完整

2.object.onerror

单点捕获， img标签、script标签等都可以添加onerror事件，用来捕获资源加载错误

• Promise错误

1.window.addEventListener(‘unhandlerejection’)

当Promise被reject且没有做reject处理时触发

2.window.addEventListener(‘rejectionhandled’)

当Promise被reject且有reject处理时触发

2.Sentry错误监控

错误监控主要由new TryCatch()和new GlobalHandlers()两个集成实现

• new TryCatch()

包装了setTimeout，setInterval，requestAnimationFrame，addEventListener/removeEventListener，XMLHttpRequest的send方法，以处理try...catch...中无法处理的异步异常。

部分源码如下：

• new GlobalHandlers() 通过window.onerror和window.onunhandledrejection全局捕获未捕获的异常和未处理的Promise

部分源码如下：

3.面包屑Breadcrumbs收集

面包屑信息，也就是错误在发生之前，一些用户、浏览器的行为信息，@sentry/tracing实现了一个简单的队列（有一个最大条目长度，默认为 100），这个队列在时刻记录着这些信息，一旦错误发生并且需要上报，@sentry/tracing 就把这个队列的信息内容，作为面包屑 breadcrumbs上传。

进行包装的原生api，用来收集信息：

{
  console: boolean; // 控制台的console信息
  dom: boolean; // ui点击和按下的dom事件
  fetch: boolean; // fetch请求
  history: boolean; // 历史错误信息
  xhr: boolean; // xhr 请求
}

可修改的Breadcrumbs配置,除了上述包装的原生api之外,还可以修改其他配置：

{
  beacon: boolean; // 自定义的面包屑信息
  sentry: boolean; // 是否发送到服务端
}

怎么修改Breadcrumbs配置：

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
    //关闭Breadcrumbs集成自动收集console的功能
    return [...integrations, new Sentry.Integrations.Breadcrumbs({ console: false })];
  }
});

删除Breadcrumbs集成：

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
  //删除Breadcrumbs集成
     return integrations.filter(integration => integration.name !== 'Breadcrumbs');
  },
});