sentry + vue实现错误日志监控

起因

项目采用vue全家桶开发，现在拟嵌入sentry，实现对于线上网站进行错误日志记录。其实上传日志很简单，基本配置就可以了，但是上传配套的sourcemap则颇为费劲。这里记录一下使用心得。

---

实施步骤

上传日志

sentry使用文档，官方介绍很简单
在 main.js 中引入如下代码：

npm install @sentry/integrations
# or
yarn add @sentry/integrations
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'your dsn',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

其中 DSN 在项目的下图位置找到

这样之后我们重新打包项目，错误就可以自动上传到sentry的项目下issues里面了。

通常我们还会做一步，设置release的版本，很简单，只需要在sentry初始化的时候配置一下release就可以了。后续所有的sourcemap文件上传也需要配置相同的release版本号。

Sentry.init({
  dsn: 'your dsn',
  release: 'release version',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

但是因为我们的代码是webpack打包后的，所以你看到的错误日志是这样的，根本无法定位具体出错代码的位置。

如果我们要想看到具体的报错信息，那我们就需要上传sourcemap文件了。

上传sourcemap文件

sourcemap文件的上传方式有两种

1. sentry-cli 手动上传
2. 第三方包自动上传，这里采用官方推荐的 @sentry/webpack-plugin

采用sentry-cli的方式上传步骤如下：

1. 全局安装 @sentry/cli

   npm i -g @sentry/cli

2. 登录

   sentry-cli --url 域名地址 login

   这里的域名地址，是你的host地址，包括域名[+端口]。因为这一步采用网页形式登录，所以需要你提前申请auto Token，申请方式如下:
   点击 账号 -> API keys， 点击 Create New Token
   记得 project:releases 和 project:write 要勾选上

3. 设置版本号

   sentry-cli releases -o 组织名 -p 项目名 new 版本号

   其中，进入你的项目下，查看浏览器地址，组织名【sentry】和项目名【your-project-name】。
   

4. 打包你的项目，生成sourcemap

5. 上传sourcemap文件到sentry

   sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后的js目录 --url-prefix 线上js访问地址

   其中最需要注意的是线上js访问地址，多半上传sourcemap成功，但是不能解析的都源于此。成功后的sourcemap文件可以在你的项目下的releases下对应版本查看，正确的应该如下图：
   
   正常解析后的结果是可以定位到代码行的错误提示，如下：

   
   其他：
   删除sourcemap指令

   	sentry-cli releases files 发布版本号 delete --all
   

利用@sentry/webpack-plugin自动上传sourcemap

惯例，还是先介绍官网资料

const SentryCliPlugin = require('@sentry/webpack-plugin');
 
const config = {
  plugins: [
    new SentryCliPlugin({
      include: '.',
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'webpack.config.js'],
      configFile: 'sentry.properties',
    }),
  ],
};

这里我们还依赖一个配置文件，根目录下的sentry 配置文件 .sentryclirc，文件内容如下：

[defaults]
url=your url
org=your organization
project=your project

[auth]
token=your auth

通常情况下，我们在plugun的配置中，还需要额外配置两个参数： release 和 urlPrefix, release同前面一样，urlPrefix也一样（很重要）。

其实两种方式都掌握最好，因为我们通常会趋向于利用第三方工具自动上传，但是遇到问题的时候，我们可以选择手动上传的方式进行调试。

结果

完成上述步骤，我们就可以对于线上遇到的问题进行监控了。
由于我们的项目需要同时监控**线上版**和**预发布**版本，所以，project name 和 release， 以及 dsn都需要根据环境变量做适配。

参考

• 前端错误监控 -【Vue】与【Sentry】的结合