错误上报和应用性能监控平台 Sentry

背景

当我们开发的系统上线之后，需要对其运行状况进行监控。因为测试往往不可能覆盖所有可能出现的异常，用户也不一定会完全按照理想的方式去操作我们的系统，上游数据返回非预期可能也会导致触发一些异常。

对于后端应用，我们一般会通过日志的方式去发现和定位问题（比如 level 为 ERROR 的日志，响应状态码为非正常状态码的日志）。

对于前端代码，因为运行在用户端，如果出现一些 JS 运行时的异常，如果没有上报措施和用户反馈，那么这个错误可能就永远被忽略了。如果错误已经严重到影响到多数用户的使用，可能会有用户反馈，这时也会出现反复沟通确认，复现过程复杂。

对于系统运行中的异常，我们总是希望能够尽早发现，快速定位和解决，从而让异常影响到更少的用户。Sentry 是一套开源的错误上报和应用性能监控平台，适用于各类主流语言开发的应用。很早之前就听说过 Sentry，20 年下半年尝试在一些应用上进行了使用。本文主要介绍 Sentry 的基本概念、在前后端应用（Vue/Django）中接入的过程，以及它在错误上报、管理和应用性能监控上的基本使用。

Sentry 提供了 SaaS 服务和本地部署两种方式，两种方式主要功能上没有区别（SaaS服务当使用的量大了需要付费）。对于企业应用如果不希望代码外泄那一般采用本地部署方式。

Sentry 接入

Vue 应用接入主要步骤

创建项目，选择 Browser Tab 选择 Vue 应用。

错误上报和应用性能监控平台 Sentry 2. 接下来就有简单的接入指南。

实现错误和性能数据上报需要安装以下三个包，如果不想启用性能监控直接上面两个包即可。
- @sentry/browser (Sentry's core browser SDK)
- @sentry/integrations (contains Sentry's Vue integration)
- @sentry/tracing (instruments performance data)

按照 npm 包之后在main.js 中进行 Sentry 的初始化

// main.js
// 配置仅在正式环境中启用
if (process.env.VUE_APP_ENV === 'production') {
    Sentry.init({
        // data source name
        dsn: 'xxxxx',
        integrations: [
            new VueIntegration({
                Vue,
                // 开启性能监控
                tracing: true
            }),
            new Integrations.BrowserTracing()
        ],
        // 设置性能监控采样率
        tracesSampleRate: 0.2,
        // 我们正式环境又部分了两套，这里用了 vue 的环境变量进行区分
        environment: process.env.VUE_APP_REGION_ENV,
        // 应用的版本，错误上报时会携带，可以区分上报的数据是出于哪个版本的代码
        release: `${process.env.VUE_APP_VERSION}-${process.env.VUE_APP_REGION_ENV}`
    })
  
    Vue.prototype.$sentry = Sentry
}

我们希望在上报的数据中包含用户信息（可以查看用户操作行为，当出现异常时还可以主动联系用户），在 Vuex actions 中获取到用户信息的逻辑中主动进行设置

// src/store/modules/user.js
    // 设置sentry中的上下文
    setSentryInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            this._vm.$sentry.configureScope(scope => {
                scope.setUser({
                    username: state.name
                })
            })
            resolve()
        })
    },
    // 获取用户信息
    getUserInfo(...省略) {
        return new Promise((resolve, reject) => {
            getUserInfo(...省略).then(response => {
                ...
                // 当前 vue 实例 sentry 属性，设置 user 信息
                if (this._vm.$sentry) {
                    dispatch('setSentryInfo')
                }
                ...
                resolve(data)
            }).catch(error => {
                reject(error)
            })
        })
    },

上传 sourcemap。由于现在前端工程化应用一般会对源代码进行混淆压缩。如果没有 sourcemap，那么上报的错误晦涩难懂，难以定位到源代码中的具体逻辑。

// vue.config.js 配置 webpack 链式操作
config
    .when(process.env.VUE_APP_ENV === 'production',
        config => {
            config
                .plugin('@sentry/webpack-plugin')
                .use(SentryWebpackPlugin, [{
                    authToken: 'xxxx',
                    org: 'xxx',
                    project: 'xx',
                    url: 'xxxx',
                    // webpack specific configuration
                    include: './dist',
                    // 上传的 sourcemap 的版本，配合 vue 中 sentry 的初始化
                    release: `${process.env.npm_package_version}-${process.env.VUE_APP_REGION_ENV}`
                }])
                .end()
        }
    )

实现基本的错误上报和应用性能监控上面的配置就够了。还有其他的一些更加丰富的设置，可以查看文档。Vue 接入文档

Django 应用接入主要步骤

和上面类似创建项目，然后选择 Django 应用。

安装 sentry_sdk pip包，在 setting.py 中初始化

import sentry_sdk
from sentry_sdk.integrations.django import DjangoIntegration
sentry_sdk.init(
    dsn=os.environ.get('SENTRY_DSN'),
    integrations=[DjangoIntegration()],
    traces_sample_rate=1.0,

    # If you wish to associate users to errors (assuming you are using
    # django.contrib.auth) you may enable sending PII data.
    # 上报数据的使用用户信息，如果使用了 Django 自带的认证，可以开启，如果没有采用那么需要自己再另外配置 default personal identification info
    send_default_pii=True
)

配置上报数据的用户信息，如果你是自己实现的认证逻辑，在认证逻辑代码中添加如下代码即可。

from sentry_sdk import set_user
set_user({'username': username})

除了在上报数据中添加识别用户信息，还可以丰富其他内容，可以查看 Django Enrich Events

Sentry 使用

基本术语

Event：应用端每次触发异常，就是一个 Event，会上报到 Sentry 中
Issue：Sentry 会对上报的异常按照一定的指纹算法进行 Group，（具体算法可以查看不同 SDK 的 Issue Group 文档，比如 Django Issue Grouping）相同的异常 event 会被归类到一个 Issue 下。

了解这两个基本概念之后，主要介绍一下 Sentry 的 Issue 和 Performance。

Sentry Issue

Issue 列表和详情

下面以前端应用上报的数据举例。

Issue 列表

在异常列表，我们可以看到异常类型、异常名称、触发位置、首次触发时间、最近一次触发时间、最近 24/14d 该类异常触发图标走势、总触发此处、总触发的人数、该 Issue 指派跟进人。错误上报和应用性能监控平台 Sentry

Issue 详情

在 Issue 详情页面，我们可以查看到这个 Issue 最近触发的 event 的具体信息，比如触发的环境、用户、报错的具体位置。同时如果这个 issue 触发了多次，可以在右上角点击进行该 Issue 下多次上报 event 数据的切换。错误上报和应用性能监控平台 Sentry 在详情的下方，我们还可以看到该 event 的时间的 Breadcrumbs。Breadcrumbs 是该异常触发之前的一些事件线索，我们可以参考该数据从而对该操作触发前的一些操作行为进行模拟，从而可以更加快速的复现和定位问题。（后端应用的话则是异常触发前的一些代码逻辑，如请求外部接口、查询数据库等）错误上报和应用性能监控平台 Sentry 我们还可以对Issue 进行管理，如指派跟进人、标识解决的版本、忽略，同时在该 Issue 的 Activity Tab 下也可以看到该 Issue 的一些动态。