前端异常监控系统Sentry的基本使用（2021）
一、系统简介 Sentry是一个开源的监控系统，可以收集项目中的异常信息，便于开发人员第一时间发现问题，定位问题，解决问题。 二、系统搭建 虽然Sentry官方提供了在线系统，但是因为需要翻墙，加上如果是公司项目，考虑到安全问题，还是倾向于私有化部署，在Github上有一个开源项目用于部署Sentry，可以使用该项目进行部署： git clone https://github.com/getsentry/onpremise.git 因为这个项目涉及很多后端的技术知识，Sentry搭建最好是后端人员来做，然后部署到服务器上面去。 三、创建项目 Sentry搭建成功，部署到服务器，比如当前Sentry在线系统为https://123.11.22.133:211，使用账号test001登录，一开始默认是英文显示，如果想要切换为中文，只需要在左上角的User settings里的Language选项选择Simplified Chinese即可，然后创建项目，如下图所示： 四、Vue项目引入Sentry 项目创建完成后，会跳转至Vue配置的说明文档，主要是Vue项目如何引入Sentry的一些内容，内容如下所示： 安装依赖 # Using yarn yarn add @sentry/vue @sentry/tracing # Using npm npm install --save @sentry/vue @sentry/tracing 在main.js里引入 import Vue from "vue"; import * as Sentry from "@sentry/vue"; import { Integrations } from "@sentry/tracing"; Sentry.init({ Vue, dsn: "http://cd7f733c2e1e4641bdeb11ba0811d9aa@123.11.22.133:211/12", integrations: [new Integrations.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, // 上报console异常信息 logErrors: true }); 此时，只要项目正常部署在线上，打开项目，然后打开浏览器控制台，查看Network列表，会发现很多类似这样的请求，并没有报错，这就意味着当前已经正常上报到Sentry系统了，如下所示： ?sentry_key=cd7f733c2e1e4641bdeb11ba0811d9aa&sentry_version=7 五、异常报错示例 为了真实验证Sentry的功能，现以一个真实场景来演示，在项目中添加一个按钮，然后设置点击事件之后，触发打印console，sentryTest并未定义，所以会报错，代码如下所示： <template> <div> <el-button @click="sentryClicked">Sentry测试</el-button> </div> </template> <script> export default { methods:{ sentryClicked(){ console.log('sentryClicked: ', sentryTest); } } } </script> 在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示： ...