Sentry

# Sentry 简介

Sentry 是一个开源的实时错误监控的项目，它支持很多端的配置，包括 web 前端、服务器端、移动端及其游戏端。支持各种语言，例如 python、oc、java、node、javascript 等。也可以应用到各种不同的框架上面，如前端框架中的 vue 、angular 、react 等最流行的前端框架。Sentry 可以帮助我们完成以下工作：例如，线上有一个 bug，代码的某处逻辑的 NullPointerException 造成了这个问题，Sentry 会立即发现错误，并通过邮件或其他基于通知规则的集成通知到相关责任人员，这个通知可以把我们引入到一个指示板，这个指示板为我们提供了快速分类问题所需的上下文，如：频率、用户影响、代码哪一部分受到影响以及那个团队可能是问题的所有者。

# 为什么选择 Sentry

• 100% 开源：源码开放，性能卓越，易于扩展
• 支持 Sass 和私有化部署
• 支持主流的编程语言
• 支持多个第三方集成，如 gitlab，github，jira，webhook

# Sentry 功能架构

• 异常管理：支持项目组，多环境管理，版本管理
• 服务部署：docker，k8s，python
• 性能监测：自动监测，手动监测，指标可视化
• 报告与告警：配置告警规则，邮箱 webhook，日志清洗，自动报表，群组项目组，报警频率
• 可扩展能力：GitLab，Jira，WebHooks，Datadog，Twilio
• 异常详情：可视化列表，环境信息，行为信息，soureMap，异常聚合，用户信息，面包屑信息

# 异常监控的背景

# 目前现状

工程师在处理线上问题的时候基本上都来自于工单，工程师只是被动的接收客户发现的问题。

# 目前痛点

兼容性问题自测难覆盖、接口报错难复现、问题发现不及时、客户反馈太紧急。

# 实现目标

做一个异常监控平台，化被动为主动，主动优化和修复线上问题，并且建立报警机制、提高工程师线上服务意识。

# 异常监控的意义

• 实时感知
  实时感知线上问题，并及时同步到业务相关人

• 主动聚焦

  • 具备错误定位，行为还原的能力，助力快速解决问题。
  • 采集和分析静态资源加载、接口响应等性能数据，帮助定位性能瓶颈，提升用户体验。

• 预测分析

  • 各纬度、各区域的埋点以及热力分析，生成业务发展的数据抓手。

# 异常监控的核心问题

异常采集 —> 数据存储 —> 统计分析 —> 报告告警

# 异常采集

采集哪些内容？异常捕获方法

1. 性能和信息全面性之间做出取舍
2. 捕获异常的自动化，不遗漏任何一处报错
3. 高效、准确和全面的捕获异常
4. 如何选择上报的时机、收集异常日志等

# 采集内容

1. 用户信息：当时此刻的状态、权限等，用户多终端登录时异常产生的终端。
2. 行为信息：用户所在的界面路径、执行了什么操作、操作时使用了哪些数据。
3. 异常信息：用户操作的 DOM 元素节点、异常级别、异常类型、代码 stack 信息等。
4. 环境信息：网络环境、设备型号和标识码、操作系统版本、客户端版本、API 接口版本等。

# 异常捕获

1. try-catch
2. window.onerror (全局捕获的一种方式)
3. window.addEventListener(‘error’)
4. window.addEventListener(‘unhandledrejection’)
5. iframe 异常
6. 奔溃和卡顿
7. Vue.config.errorHandler 和 React ErrorBoundary

# 异常数据的存储

其实是后端要做的一些事情，就是接收一些前端上报的异常数据，经过一些处理，比如说数据的一些清洗，并且按照一些存储方式进行存储。数据存储面临的一些问题就是数据量大，数据结构不规律，差异需求大，这是后端可能要考虑的一些事情。

# 统计分析

我们可以根据上报的一些信息，得出跟深层的有价值的一个结论。
它可以分为自动分析和人工分析。自动分析就是通过一些预设的条件和算法，对存储的信息进行一个筛选，并发现一些问题，触发一些告警。人工分析的话，它可以通过提供一个可视化的面板，让用户可以看到一些具体的异常信息，根据信息，我们可以发现问题的一个根源。

# 报告告警

我们要考虑什么时候报警，报警要按照一定的级别自动报警。通过设置一个渠道，按照一定的触发规则，还要考虑什么方式报警，比如通过邮件，短信，微信，电话。最后我们要考虑自动报表的一种能力，因为我们要通过一次报警，让他自动生成比如日报，周报，月报，并通过这种邮件的方式发送到一个相关的群，并形成一个告警。这是我们全局监控要考虑的一个方面。

# 实战

• 安装 sdk (官网中的 npm i 那条命令)

• 在入口文件中初始化 Sentry (去官网找，这里是瞎写的…)

  import * as Sentry from "@sentry/react";
  import { Integrations } from "@sentry/react";
  Sentry.init({
    release: "cool-web@1.0.0", //版本号
    dsn:"https://xxx",
    integrations:[new integrations.BrowserTracing()],
    ...
  });

• 集成 SourceMap (去官网找…)

  [defaults]
  url= https:xxx // 服务器
  org = xxx // 组织
  project= xxx //项目
  [path]
  token = xxx

  import SentryPlugin = require('@sentry/webpack-plugin')
  const config = {
    plugins:[...]
  }