单页面应用优化之路一前端日志管理Sentry使用（三）

B： 该事件主要是线上运行的前端代码出错后，捕获异常，并发送至Sentry服务器

            第一步，初始化 Sentry Browser SDK

import * as Sentry from '@sentry/browser'

Sentry.init({

  dsn: http://sdasdadadasdad@sentry.io/231,

  release: 'v1.1.1',

  environment: 'uat'

})

        当然，初始化sentry的方法有好几种 ，具体的可查看官网

        第二步，捕获异常或消息等，并发送异常
   捕获异常

try {

    console.log(window.s.d);

} catch (err) {

    Sentry.captureException(err);

}

  捕获消息

Sentry.captureMessage('Something went wrong');

 
    OK，这些就是Sentry的简单使用方案

下面我们说一说 Sentry Browser SDK 的初始化参数，一些简单的英文，就不多做解释了

    dsn ： The DSN tells the SDK where to send the events to.

    debug ： Turns debug mode on or off. If debug is enabled SDK will attempt to print out useful debugging information if something goes wrong with sending the event. 

    release :  主要是让上报的错误与 上传的 sourceMaps 的 release 对应上

    environment ： 主要是为了区分错误出现的 不同环境

    integrations  ： 一些 SDKs 可以在Sentry初始化时以参数方式集成项目，举个例子吧

Sentry.init({

    dsn: process.env.SENTRY_DSN,

    integrations: [

        new Integrations.Vue({

            Vue,

            attachProps: true

        })

    ],

    release: process.env.SENTRY_HASH,

    environment: process.env.NODE_ENV

})

  

    这些就是一些常用的配置，剩余配置不多赘述，直接看官网
https://docs.sentry.io/error-reporting/configuration/?platform=browser
    

    还可以记录一些用户信息，或是必要的信息，方便排查问题，这些信息每一次sentry上报的信息中都会携带，属于全局设置

Sentry.configureScope((scope) => {
    scope.setUser({ 'UserInfo': {........} })  //  记录用户数据
    scope.setTag( 'tags', 'sssss')       //     这个tag可以在sentry中对关注的问题进行筛选 
})