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

一、简介

• 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>
    

    

• 查看错误日志，下面这两个地方都能查看到错误日志

  

  

  能准确定位到某行代码：

  

五、项目打包后测试

• 使用 anywhere 模拟正式环境。

  

补充

• 如果线上报错无法定位到具体代码, 可以通过 @sentry/cli 解决，新增 .sentryclirc 配置文件进行配置。附：@sentry/cli 使用流程