接入sentry-让你的错误别再裸奔

前言

前端项目目前发现错误的方法有哪些呢？

1. 测试同窗测出来。 缺点：如今浏览器版本、手机机型太多，兼容性问题很难测彻底。另外有些项目流程很是长和复杂，测试同窗不能确保每次都能覆盖100%的Case；
2. 同事code review。 缺点： 这个的缺点是时间成本高、并且大多时候，code review也只是发现代码风格问题，对于逻辑和业务，其余同窗没有时间深刻去读的；
3. 上线线后用户投诉反馈。 缺点：用户的机型、浏览器百花齐放，咱们复现问题很困难。另外大多用户不懂专业术语，表达问题不许确，沟通成本很高，这些都致使解决问题效率很是低下。

        为了解决目前项目开发和管理流程中：上线前case很难测全、上线后问题复现困难，而且沟通成本高的现状，个人项目接入了sentry。

Sentry是什么？

         sentry，中文翻译是哨兵。它是一个错误监控和收集工具。用户在项目使用中，遇到报错，sentry会第一时间通知开发者，项目出现了什么错误，错误出如今哪儿，而且会帮咱们记录错误。

         使用sentry须要结合两个部分，客户端与服务端。客户端就是你须要去监听的项目。而服务端就是一个数据管理平台，它会展现已收集到的错误信息和项目信息。并支持项目管理，组员管理、邮件报警等功能。

         服务端平台能够本身搭建，也能够直接使用sentry官方平台。

         另外，sentry很是强大之处在于支持多种语言和框架 (docs.sentry.io/platforms/ ) 这里我只研究了一下前端如何使用。其余语言和框架、以及服务端的搭建暂时不涉及。

        咱们已经知道了sentry是什么，那么sentry到底怎么用呢？

Sentry的接入

新建项目

         首先，新建项目在sentry服务端平台完成。sentry.io/。 新建完项目后，就会生成一个DSN串。 DSN是连接咱们要上报的项目和sentry服务端的钥匙。每当咱们在sentry服务端建立一个新的项目，都会获得一个独一无二的DSN。在项目初始化时须要配置DSN到项目.这样客户端报错，服务端就能抓到对应项目的错误了。

安装SDK

SDK的安装和咱们平时项目引用第三方包的方式彻底同样。 有cdn引入和npm包注入两种方式，这两种引入方式配置也同样。

<script src="https://browser.sentry-cdn.com/5.6.1/bundle.min.js" integrity="sha384-pGTFmbQfua2KiaV2+ZLlfowPdd5VMT2xU4zCBcuJr7TVQozMO+I1FmPuVHY3u8KB" crossorigin="anonymous"></script>

复制代码

npm install @sentry/browser
复制代码

配置

// When using npm, import Sentry
import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915' });
复制代码

注意：若是是Vue项目，请不要在开发环境使用sentry。 由于Vue项目使用sentry时，须要配置@sentry/integrations。而@sentry/integrations是经过自定义Vue的errorHandler hook实现的，这将会中止激活Vue原始logError。 会致使Vue组件中的错误不被打印在控制台中。因此vue项目不要在开发环境使用sentry。

        这里我再补充一下，为何Vue项目要配置sentry集成器？ 这里说的sentry集成器是用于加强sentry Api的SDK。 VUE项目配置了它， 就能够捕获引起错误的组件名称和props状态。

         此外，Integrations.Vue有如下配置选项：

         1. Vue：可选的，若是你不传入，则window.Vue必须存在；

         2. attachProps：可选的，默认为true。若是将其设置为false，Sentry将禁止发送全部Vue组件的活动组件的名称和props状态 。

         3. logErrors：可选的，默认为false。若是设置为true，Sentry会调用原始Vue的logError功能。

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
  release: VERSION,
  dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true // 是否上报组件的 props
    })
  ]
})
复制代码

高级用法

         前面咱们已经知道了如何将sentry的接入到项目中，这个时候sentry就已经能够帮咱们上报错误信息啦。 sentry会默认上报页面抛出的全部未被捕获的错误（包括window.error 和promise异常）。可是，sentry还为咱们提供了一些更高级的功能。接下来，咱们看一下sentry高级用法。

经常使用功能

1. 主动捕获并上报错误。 主动上报的方式有两种： 一种是直接上报文本信息，参数为一个字符串； 另外一种是上报错误对象，参数为一个error 对象或者类对象。

try {
    aFunctionThatMightFail();
} catch (error) {
    // 上报error对象
    Sentry.captureException(error);
}
// 上报文本信息
Sentry.captureMessage('Something went wrong');

复制代码

2. 丰富BUG上下文数据。

        Sentry提供的上下文信息有5个user 、 tags 、 level 、fingerprint 、 extra data。 咱们能够经过在 scope 上面设置这些信息。有两种设置方式： 丰富BUG上下文数据其实就是添加自定义信息到上报事件。

        Sentry提供给咱们可自定义的上下文信息的有：user 、 tags 、 level 、fingerprint 、 extra data。

        这些信息咱们能够经过在 scope 上面设置来定义。有两种设置方式：

        一种是sentry.configScope,它会设置信息到sentry全局做用域。使用这种方式设置的信息，会被后续全部的上报事件携带。

        另外一种sentry.withScope,这种方式会设置一个临时信息到当前事件上。能够理解为一次性的信息设置。这种方式设置的数据，只在当前事件生效。当咱们想为某个事件单独设置信息，而不想影响“全局”做用域时，就能够用它。

下面是添加上下文信息的具体方法：

// 设置用户信息： 
scope.setUser({ “email”: “xx@xx.cn”})
// 给事件定义标签： 
scope.setTags({ ‘api’, ‘api/ list / get’})
// 设置事件的严重性：
scope.setLevel(‘error’)
// 设置事件的分组规则： 
scope.setFingerprint(['{{ default }}', url])
// 设置附加数据： 
scope.setExtra(‘data’, { request: { a: 1, b: 2 })
复制代码

        使用scope.setUser 能够设置用户的id 、 username 、 ip、email等信息。

        使用scope.setTags能够给事件定义不一样的键/值对。事件上报后，咱们在后台查找的时候，筛选条件选项会多出来一些选项，就是经过setTags来设置的这些键值对。

        scope.setLevel是用来设置事件的严重性的。参数包括：fatal 、error 、 warning 、 info 、 debug 。( fatal : 是事故，error 表明错误，上报的事件默认都为error )

        使用scope.setFingerprint能够自定义事件的分组规则。Sentry拥有一套默认的分组策略。可是这个有时候并不能知足咱们的需求。例如sentry会将全部的UnhandledRejection分组在一块儿，但事实上咱们想要更加细致的分组，好比按接口URL来分组。这里就可使用scope.setFingerprint([‘{{ default }}’, url])来设置。

        Sentry.setExtra能够设置附加数据，例如记录ajax请求的参数，返回值，header信息等

3. 上传SourceMap文件。

        Sentry强于其余错误监控平台的特色之一就是支持sourcemap。只要咱们将sourcemap文件也上传到服务器，就能够在sentry平台看到源代码，从而快速定位错误。

        前面提到须要将souceMap文件上传到服务器，可是这样子会将咱们的源码文件暴露在客户端，很是不安全。另外sentry解析须要从另一台的服务器获取sourcemap文件，也增长了服务器之间的开销。

        因此，官方推荐将sourcemap上传到sentry服务器上。

        将sourcemap上传到sentry服务器的方式有3种。

        第一种是使用sentry提供的webpack插件在项目打包时自动上传。这种方式只须要在webpack打包配置中加入相关配置信息便可，是三种方式中最方便的方式。因此在业界大多使用这个方式。

        第二种是使用sentry提供的上传脚本，sentry-cli上传。

        第三种是直接直接调用sentry API 上传，这种配置参数较多，比较麻烦。

        综合对比上面3种上传方式，我坚决果断的选择了第一种，上传后，错误能定位到源码，看似很是顺利。

        可是使用没多久，就发现一个问题，咱们的项目上线变慢了。

        原来，sentry提供的上传sourcemap的方法都是同步上传，会致使上线变慢。 因此，咱们能够将其优化为异步上传方式。

其余

1. 捕获用户对崩溃的反馈。
2. 在beforeSend等hook中添加过滤事件和自定义逻辑。
3. addBreadcrumb 添加一次行为记录等。

Sentry.init({
    dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915',
    beforeSend(event, hint) {
        // Check if it is an exception, and if so, show the report dialog
      if (event.exception) {
        Sentry.showReportDialog({ eventId: event.event_id });
      }
      return event;
    }
  });
复制代码

        捕获用户反馈的的方法是在sentry的beforeSend hook里调用 showReportDialog方法。 这样子，当错误发生时，客户端就会弹出让用户填写错误信息的弹窗。

        另外sentry还加入面包屑的概念。sentry中的面包屑其实就是Sentry自动记录的一些日志和事件。例如浏览器URL的改变，ajax请求、以前的错误事件等。记录这些信息能够为当前错误提供上下文，重现致使错误发生的步骤，为咱们复现和调试错误提供了关键信息。Sentry也提供了自定义添加面包屑和关闭面包屑的API。这个不太经常使用，我就不赘述了。

        今天主要先讲sentry的做用和使用方法，要讲的就是这些了。最后总结一下： Sentry是一个开箱即用、兼容性较好、功能强悍、而且生态圈很是完善的监控工具。你值得拥有😏。