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',
  integration