2021-07-23 sentry终于官方支持 vue3项目了，顺手更新文档 2020-10-17 初稿

我们开发的前端项目在运行过程中难免会遇到一些bug，比如js运行报错、第三方资源报错、接口报错等。作为项目的维护者肯定还是希望遇到问题能及时解决，这里就自然产生了前端监控。

前端监控的细节可以参考这篇文章 《漫谈前端监控之错误监控》。

本文以Vue项目为例， 来部署一套sentry来实现在线监控方便分析。

部署安装

Sentry 提供两种部署方式：

  • 使用它提供的在线服务，好处是不需要搭建、不需要消耗自己的资源
  • 提供 Docker 私有化部署。好处是自托管，顾虑低。

本文关注 私有部署。操作比较简单可以参考官方文档

  1. git clone git@github.com:getsentry/onpremise.git
  2. # 2021-07-21 v21.7

前置条件

首先需要安装下面的依赖并运行：

  • Docker ~~19.03.6+ ~~ 以实际为准

  • Compose 1.24.1+ 以实际为准

    安装

  • 进入 https://github.com/getsentry/onpremise 克隆

  • 执行 ./install.sh 执行安装，期间会经过漫长的等待，需要下载很多资源，等就是了。这一点很不友好，没有提供aio的包，自己编译下载了一堆。
  • 结束之后会提示是否创建一个账户，创建即可
  • docker-compose up -d
  • 启动之后访问 127.0.0.1:9000 即可

image.png

  1. 如果您的邮件客户端不在上述列出的范围内，您可以尝试如下通用配置：
  2. 接收邮件服务器：imap.qq.com
  3. 发送邮件服务器：smtp.qq.com
  4. 账户名：您的QQ邮箱账户名（如果您是VIP邮箱，账户名需要填写完整的邮件地址）
  5. 密码：您的QQ邮箱密码
  6. 电子邮件地址：您的QQ邮箱的完整邮件地址

配置

首先设置中文和时区

image.png

进入页面熟悉一下，选择创建项目 create a new project

image.png

可以看到内置了很多平台，我们当然选择 Vue 平台。

更新：更新vue3使用说明：

  1. npm install --save @sentry/vue @sentry/tracing
  • @sentry/integrations (包含 Vue 的支持)
  • @sentry/tracing (性能指标)

在项目的 src/main.js 中做如下配置：

  1. import * as Sentry from "@sentry/vue";
  2. import { Integrations } from "@sentry/tracing";
  4. const app = createApp({})
  6. Sentry.init({
  7.   app,
  8.   dsn: "xxx",
  9.   integrations: [new Integrations.BrowserTracing()],
  11.   // Set tracesSampleRate to 1.0 to capture 100%
  12.   // of transactions for performance monitoring.
  13.   // We recommend adjusting this value in production
  14.   tracesSampleRate: 1.0,
  15. });

使用

在Vue项目中设置报错，可以看到报错，截图如下：

image.png

如果是接口报错可以设置拦截器、异步任务报错使用

Sentry.captureException(error); 来提交报错，比如：

  1. axios.interceptors.response.use(data => {
  2.     return data;
  3. }, error => {
  4.     Sentry.captureException(error);
  5. })

传递错误时候可以设置 scope 来补充用户信息等。

sourceMap处理

配置报警邮件。

细节后续再补充。

可以看这篇文章 前端错误监控方案 sentry

https://develop.sentry.dev/self-hosted/

其他

类似的开源产品 https://ohbug.net/