Sentry 监控部署与使用（详细流程）

news2024/11/22 18:06:48

一、简介

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 安装方式。
部署实战记录
- docker 部署流程
- 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',
  // 使用哪些插件，附：http://www.javascriptcn.com/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>