前端日志监控平台sentry使用 @sentry/browser @sentry/webpack-plugin

1.新旧SDK对比

sentry前不久更新了js-jdk,以前使用的raven-js与webpack-sentry-plugin更新成了@sentry/browser @sentry/webpack-plugin

旧                          新
raven-js                    @sentry/browser        前端错误日志上报SDK
webpack-sentry-plugin       @sentry/webpack-plugin webpack项目sourcemap上传插件

目前两套插件都可以正常使用，但是随着根据官方的脚步，新的必将慢慢替代旧的，所以有空有闲的程序猿／媛们动起来吧。

2.@sentry/browser用法

2.1 sentry账号注册

以VUE项目为例，我们在sentry官网https://sentry.io先注册一个账号。

创建一个项目,选择Browser分类下的vue,然后起一个项目名vuexxx,点击创建项目

创建成功会出现项目注意事项简介，说明基本用法

选择确定，进入项目，默认页面如下，注意地址栏用红色圈出的部分，在上传sourcemap的时候将用到，右上角圈出来的Environment可以在初始化的时候进行设置，查看错误的时候我们可以选择测试或者生产的数据：

2.2 安装

npm install @sentry/browser --save

2.3 使用

在main.js文件中引入并初始化

    import * as Sentry from '@sentry/browser'
    Sentry.init({
    dsn: '上报地址',
    integrations: [new Sentry.Integrations.Vue({ Vue })],
    release: '版本号',
    environment:'环境，比如生产或者测试'
  })

3.@sentry/webpack-plugin用法

构建项目时，我们会将代码进行压缩混淆，为了在进行日志分析的时候更清楚看到错误发生的原因，我们要对代码进行还原，因此需要sourcemap文件，使用插件在项目构建时会自动上传sourcemap文件，需要身份认证，我们生成一下API tokens，点开左边API keys选项,点击右上角 create new token，勾选project:write

确认，create token，生成的auth token就是我们需要的。

3.2 安装

npm install @sentry/webpack-plugin -D

3.3 使用

在build/webpack.prod.conf.js文件中引入并使用

    const SentryPlugin = require('@sentry/webpack-plugin');
    new SentryPlugin({
      release: '版本号',
      include: './dist',
      urlPrefix: '~/vueDemo/',
      ignore: ['node_modules', 'webpack.config.js'],
    })

此时还差一步，在工程根目录下新建.sentryclirc文件，sentry_cli会默认读取.sentryclirc文件，配置如下：

    [defaults]
    url = https://sentry.io/
    org = foresea
    project = vuexxxx
    
    [auth]
    token = 填写我们生成的auth token

进入项目后我们可以直接在地址栏读取服务器地址， [defaults]配置按照地址栏进行配置就可以了，token是我们生成的auth token。

3.4 补充说明

关于SentryPlugin的配置项可以在官网找到更详细的说明，github.com/getsentry/s…
强调一下urlPrefix: '~/vueDemo/'这个设置，如果你的项目地址为https://xxxx.com/vue/dist/index.html,那么你应该设置

urlPrefix: '~/vueDemo/dist/'

要与上传的sourcemap文件目录保持一致，可以在项目中的Releases目录查看上传的文件。为了安全，在发布项目的时候记得不要将sourcemap文件一同上传，应当剔除。