谁动了我的js error? 面向海量用户的js报错监控实践

Sentry是什么

先看一下官方定义：

Sentry is an open-source application monitoring platform that helps you identify issues in real-time. Here we cover everything about the product, the platform integrations, and open source Sentry.

简言之，Sentry就是一个监控平台，我们可以接入它来实时监控前端代码的运行情况。

Sentry接入效果

1.接受到报错邮件

2.查看上报的错误详情

3.定位到具体的报错的代码

4.查看报错前一段时间内的用户行为

Sentry怎么接

1.注册工程

(1) 创建团队，添加成员。

(2)创建项目

2.在项目中接入Sentry客户端

本文主要演示如何在Vue项目中接入Sentry客户端(相关文档)

(1)安装Sentry JavaScript SDK

npm install @sentry/browser
npm install @sentry/integrations复制代码

@sentry/browser: SDK for Browsers, including integrations for React, Angular, Ember, Vue and Backbone.

-即为Sentry服务器上报错误的客户端。

@sentry/integrations: Pluggable integrations that can be used to enhance JS SDKs.

-即增强Sentry客户端的插件集成。

注：网上很多博客仍然在用raven-js，该旧js-sdk将慢慢被官方放弃。

(2)接入Sentry JavaScript SDK

// main.js
if (process.env.NODE_ENV === 'production') {// 只在正式环境上报
  Sentry.init({
    dsn: '***',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      }),
       new Integrations.RewriteFrames()
    ],
    release: ***,
  })
}复制代码

dsn: 客户端密钥，在Sentry官网上拷贝。

Integrations.Vue: capture the name and props state of the active component where the error was thrown. This is reported via Vue’s config.errorHandler hook.

-即通过VUE的config.errorHandler钩子，捕获发生错误的组件名字和props状态。

Integrations.RewriteFrames: This integration allows you to apply a transformation to each frame of the stack trace. In the streamlined scenario, it can be used to change the name of the file frame it originates from, or it can be fed with an iterated function to apply any arbitrary transformation.

release: 版本号，将异常上报到工程对应的版本上。

3.上传SourceMap到Sentry服务端

为了定位到发生异常的具体代码，我们需要把SourceMap上传到Sentry服务器。

方法一：利用sentry-cli命令行工具手动上传，详情可见该博客。

方法二：利用sentry-webpack-plugin插件，在工程构建时自动上传。

(1)在根目录下新建插件配置文件

// .sentryclirc
[auth]
token=授权令牌

[defaults]
project=工程名
org=组织名
url=上报到的Sentry服务器域名复制代码

token：授权令牌允许基于你的账户使用 Sentry API，新建时选择project:write属性。

服务器域名，组织名，工程名可以在工程url上查看

(2)在vue配置中引入插件

// vue.config.js
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
module.exports = {
    productionSourceMap: true,// 生产环境下生成SourceMap文件
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') { //只在生产环境上传
            config.plugins.push(
                new SentryWebpackPlugin({
                    include: './dist/js', //需要上传到sentry服务器的资源目录,会自动匹配js以及map文件
                    release: RLEASE_VERSION, //发布的版本
                    urlPrefix: 'http://qqq.oa.com/js/', //指定sourceMap文件的路径，默认服务器根目录，如果路径错误将无法定位map文件
                    configFile: 'sentry.properties', //配置文件
                })
            )
        }
    }
}复制代码

至此，就可以实现客户端上报异常，开发在Sentry上查看SourceMap定位的功能了。但还有两个小问题。

(3)在工程构建时自动生成版本号，而不再手动填充。

方案：利用webpack.DefinePlugin插件，创建一个在编译时可以配置的全局常量。

在vue-cli创建的项目中，凡是src下的文件，都可以访问到配置的变量，例如main.js，App.vue等等。

注：在vue.config.js中拿到的config.plugin('define')，实际上是vue-service内部创建的webpack.DefinePlugin实例的引用。

// vue.config.js
// 设置sentry版本号
const NOW = new Date();
const RLEASE_VERSION = [NOW.getFullYear(), (NOW.getMonth() + 1), NOW.getDate(), NOW.getHours(), NOW.getMinutes(), NOW.getSeconds()].join('-')
module.exports = {
    chainWebpack: config => {
        config.plugin('define').tap(definitions => {
            definitions[0]['process.env']['RLEASE_VERSION'] = JSON.stringify(RLEASE_VERSION);
            return definitions;
        })
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') { //只在生产环境上传
            config.plugins.push(
                new SentryWebpackPlugin({
                    include: './dist/js', //需要上传到sentry服务器的资源目录,会自动匹配js以及map文件
                    release: RLEASE_VERSION, //发布的版本
                    urlPrefix: 'http://qqq.oa.com/js/', //指定sourceMap文件的路径，默认服务器根目录，如果路径错误将无法定位map文件
                    configFile: 'sentry.properties', //配置文件
                })
            )
        }
    }
}复制代码

// main.js
if (process.env.NODE_ENV === 'production') {// 只在正式环境上报
  Sentry.init({
    dsn: '***',
    integrations: [
      new Integrations.Vue({
        Vue,
        attachProps: true
      }),
       new Integrations.RewriteFrames()
    ],
    release: process.env.RLEASE_VERSION
  })
}复制代码

(4)不将SourceMap文件暴露给用户。

方案：在将打包好的工程上传的服务器前，删除SourceMap文件

# 前端包上传服务器时运行的脚本
# 不把sourceMap上传到服务器
rm -rf dist/**/*.js.map复制代码

附录

参考：

1. Sentry官方文档
2. [[Github]Sentry-javascript](https://github.com/getsentry/...
3. sentry上传sourcemap