前端可视化错误追踪利器，让你 debug 得心应手

一般情况下，我们在遇到生产环境的BUG时，重现问题的步骤是：

1. 客户反馈bug
2. 业务人员对接客户
3. 业务将客户反馈现象转述给开发人员
4. 开发人员想方设法重现bug
5. 询问业务BUG细节，重复2步骤
6. 开发人员解决BUG
7. 发布
8. 告知业务人员
9. 业务人员反馈给客户

这是一个非常耗时且低效率的流程，同时也会损害客户对产品的印象，如果能自动监听到客户浏览器的错误，那岂不是可以省掉大部分的步骤，让开发直面BUG。

Sentry

https://sentry.io/welcome/

sentry 正是这样一个平台，帮助我们第一时间将客户浏览器的报错上报，同时通知对应开发人员，第一时间解决问题。

• 多平台支持

sentry 支持多个平台及多种语言

• 开源

• 实时收集，完整复现

为不同语言提供完整的复现上下文，方便定位 BUG，协调工作，跟踪用户操作路径

• 结合 source map，展现原始调用栈

如何使用

在项目中使用 sentry 非常的方便，在此我们以 Vue 项目为例。

1. 注册 sentry

首先在 sentry官网 (opens new window)注册后，登陆后台管理系统

sentry 有免费方案，后续推荐通过模板搭建自有平台：https://github.com/getsentry/onpremise

2. 新建项目

创建项目时选择 Vue，填写项目名称及相关信息

3. 安装依赖

之后在我们的 Vue 项目工程中安装sentry的相关依赖

以 vue-cli 3.0 及以上版本创建的项目为准

# Using yarn
yarn add @sentry/vue @sentry/tracing

# Using npm
npm install --save @sentry/vue @sentry/tracing

在入口文件 main.js 中加入以下代码

import Vue from "vue";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  Vue,
  dsn: "your-dsn-key",
  integrations: [new Integrations.BrowserTracing()],
  logErrors: true, // 在开发环境中控制台中显示错误日志
  release: process.env.RELEASE_VERSION, // 环境变量可在.env文件中配置，详情请查看vue相关文档
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

dsn 在创建项目时会自动生成，也可以在项目的设置->Client Keys(DSN) 中找到和创建新的 dsn

至此，已经完成了项目的初始化，sentry 会自动捕获项目运行中出现的异常进行上报，在后台管理系统中可以查看相关错误信息。

4. source map

source map 能帮助我们定位到错误在源码中的具体位置，非常方便，sentry 有2种上传 source map 的方式。

• @sentry/webpack-plugin 插件

1. 安装插件

yarn add @sentry/webpack-plugin -D
#or
npm install @sentry/webpack-plugin --save-dev

2. 创建 .sentryclirc 文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

3. 配置插件

在 vue.config.js 中配置

const SentryPlugin = require('@sentry/webpack-plugin')

module.exports = {
  ...
  productionSourceMap: true,
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('sentry').use(SentryPlugin, [
        {
          include: './dist',
          release: process.env.RELEASE_VERSION,
          configFile: "sentry.properties",
          ignore: ['node_modules'],
          urlPrefix: '~/'
        }
      ])
    }
  }
}

3. 构建

yarn build
# or
npm run build

线上环境打包构建后，就可以到 sentry后台查看source map的情况了。

这种方式需要在生产环境生成sourcemap，会降低项目构建速度

• sentry-cli (opens new window)

1. 安装 cli

npm install @sentry/cli

2. 登录

sentry-cli login

3. 构建

yarn build
# or
npm run build

4. 上传

# sentry-cli releases files <release名称> upload-sourcemaps --url-prefix <线上资源URI> <打包出来的js文件所在目录>
sentry-cli releases files v1.0.0 upload-sourcemaps --url-prefix '~/static/js' './dist/static/js'

注意：使用 sentry-cli 可能会暴露 key等敏感信息。

其他设置

• 邮件提醒

• 钉钉提醒

更多功能和设置，请查阅官方文档。

其他监控平台

Fundebug

https://www.fundebug.com/

国内团队开发的错误监控平台，目前支持前端 JavaScript，微信小程序，微信小游戏，支付宝程序，React Native, Java 以及 Nodejs。

特性：

官方地址：https://www.fundebug.com/

Bugsnag

https://docs.bugsnag.com/

移动端

Countly

https://count.ly/

Countly 是一个实时的、开源的移动分析应用，通过收集来自手机的数据，并将这些数据通过可视化效果展示出来以分析移动应用的使用和最终用户的行为。一旦你打开该程序的面板，你会发现数据的监控是那么的简单。