前端日志监控平台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文件一同上传,应当剔除。

转载于:https://juejin.im/post/5bfe0d5be51d4562587b40b9

你可能感兴趣的:(webpack,javascript,前端)