Sentry

1. 系统简介 Sentry是一个开源的监控系统，可以收集项目中的异常信息，便于开发人员第一时间发现问题，定位问题，解决问题。当前文档基于Sentry 23.11.2进行说明。 2. 系统搭建 虽然Sentry官方提供了在线系统，但是因为需要翻墙，加上如果是公司项目，考虑到安全问题，还是倾向于私有化部署，在Github上有一个开源项目用于部署Sentry，可以使用该项目进行部署： git clone https://github.com/getsentry/onpremise.git 因为这个项目涉及很多后端的技术知识，Sentry搭建最好是后端人员来做，然后部署到服务器上面去。 3. 创建项目 Sentry搭建成功，部署到服务器，比如当前Sentry在线系统为https://123.11.22.133，使用账号test001登录，一开始默认是英文显示，如果想要切换为中文，只需要在左上角的User settings里的Language选项选择Simplified Chinese即可，然后创建项目，其他平台同理，如下图所示： 4. Vue3项目引入Sentry 项目创建完成后，会跳转至 Vue SDK 配置的说明文档，默认勾选三个监控模块，并且提供Vue3和Vue2版本的引入方式，如下图所示： 三个监控模块的简单功能说明，如下所示： Error Monitoring： 自动报告项目错误和异常。 Performance Monitoring： 通过性能监控，Sentry跟踪你的软件性能，测量吞吐量和延迟等指标，并显示错误对多个系统的影响。Sentry捕获由事务和span组成的分布式跟踪，这些跟踪测量单个服务以及这些服务中的单个操作。在分布式跟踪中了解更多关于我们的模型的信息。 Session Replay： 会话重播通过像视频一样重现用户浏览器在错误发生前、发生中、发生后的情况，帮助你更快地找到错误或延迟问题的根本原因。受浏览器开发者工具的启发，你可以在一个组合的UI中回放应用程序的DOM状态，并查看关键的用户交互，如鼠标点击、滚动、网络请求和控制台条目。 首先，我们需要依照文档进行配置，安装依赖 # Using npm npm install --save @sentry/vue # Using yarn yarn add @sentry/vue 然后，在main.ts里引入Sentry.init()，如下所示： import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; const app = createApp({ // ....