前端异常监控框架Sentry

介绍

sentry是一个开源的监控系统，能支持服务端与客户端的监控，还有个强大的后台错误分析、报警平台。

搭建sentry：

官网推荐使用docker

依赖环境：docker，docker-compose

1. git clone https://github.com/getsentry/onpremise.git
2. 进入onpremise文件夹，执行./install.sh, 这个过程会建立管理账号

这是sentry需要docker最小内存2400M， 需要在docker里面设置内存，只要大于2400M就没这个问题了。

3.启动sentry ：docker-compose up -d

通过localhost:9000 可以访问sentry了。

img

通过刚刚设置的账号和密码可以进入到后台。

到这里， 我们sentry的后台就已经部署好了。

平台地址

http://report.eyunying.com.cn:11205/auth/login/sentry/

vue项目接入

1. 接入

yarn add @sentry/vue @sentry/tracing

main.js

import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  Vue,
  dsn: "http://[email protected]:11205/9",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//]
    })
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0
});

.sentryclirc

[defaults]
### 你的域名
url='http://report.eyunying.com.cn:11205'
### 组织团队名默认是 sentry
org=sentry
### 项目名称
project=demo

### 步骤1创建的
[auth]
# 本地
token=3dfb4982a8b1403ea8ea8aa1d4e36618b723587bdfa2496098c629468c0fb71c

[http]
keepalive=false
 
[dsym]
max_upload_size=209715200
 
[log]
level=debug
 

token 生成

image-20211115093756018

image-20211115093833880

1. 配置webpack

yarn add @sentry/webpack-plugin     

vue.config.js

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

在 plugins

new SentryWebpackPlugin({
  release: process.env.RELEASE_VERSION, //版本号
  include: path.join(__dirname, `.${process.env.VUE_APP_BASE}js/`), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
  ignore: ["node_modules", "vue.config.js"], //忽略文件目录,当然我们在include中制定了文件路径,这个忽略目录可以不加
  configFile: ".sentryclirc",
  urlPrefix: `~${process.env.VUE_APP_BASE}js` //  线上对应的url资源的相对路径 比如我的域名是 http://XXX  .com/,静态资源都在 static文件夹里面,
})

1. 钉钉报警

image-20211115094927696

报警规则

image-20211115095108803