前端异常日志监控 - 使用Sentry

背景

现在的前端项目越来越复杂，在不同的客户端会产生各种在开发人员机器上不会出现的问题。当用户报告一个问题给开发人员的时候，开发人员无法直接定位问题。在此前，听过一次鹅厂的前端人员，他们对QQ里面的网页监控的一个讲座，深有感触。但是鹅厂是自己开发了一系统，从开发到运维到错误分析，是一整套的体系。对于我们的项目，我们不可能选择自己开发，在网上找到一个开源的产品 [ Sentry ]，基本体现了鹅厂的那套思路。

关于 Sentry

Sentry 官网

以下是官网首页关于Sentry的介绍

Stop hoping your users will report errors

停止期待您的用户反馈错误

Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience

帮助开发人员实时监控和修复错误，快速迭代，提高效率。提升用户体验。

不过多解释sentry产品，直接开始接入sentry, 非常简单。 sentry本身是有云服务的，可以让开发者快速体验，接入。云服务如果长期使用，是需要收费的，如果是体验就注册体验下即可，如果要项目用，可以自己搭建一个sentry 服务，参考 搭建自己的 sentry 服务。

接入Sentry

本项目是使用webpack打包的工程，如不使用webpack的，参考官方文档，非常简单。

1. 安装sentry的javascript的客户端npm包 npm install raven-js --save ; 参考 Installation
2. 在JS中调用和配置; 参考Configuration

import Raven from 'raven-js';

Raven
    .config('http://f3da1a4f401c434cba447be865d2bd41@sentry.io/10')
    .install();

window.onload = function(){
    document.getElementById('container').addEventListener('click',e => {
        console.log(window['aaa'].aaa) //此处window['aaa']为undifine，所以这里一定会报错
    }, false)
}

Raven.config中的值，叫做dsn(客户端密匙)，可在项目的设置界面找到。如果看不到项目的设置菜单，可能是你账号权限不够。

查看效果

访问网页，点击按钮后，会产生JS异常，很快会收到来自sentry邮件通知,点开即能看到详细的错误，包括：

1. 客户IP地址
2. 浏览器和操作系统
3. 访问的地址
4. 错误的信息和调用堆栈
   
   

在上图中，可以看见错误。这个和我们源代码的异常信息是一致的。但是在下方的JS调用堆栈中，对应的是压缩后JS文件位置，和我们源代码无法对应上，无法直接的帮助我们排查和定位问题。

要错误对应上我们源代码的位置，sentry要求我们上传JS压缩时的sourcemaps。

上传 SourceMaps 对错误进行定位

如何产生SourceMap, 如果不熟悉的话，可以参考Sentry Generating Source Maps 文档，有各类框架如何产生source maps.

Sentry 有多种方式上传SourceMaps，release API、Sentry CLI、sentry-webpack-plugin，详情参考Uploading Source Maps to Sentry, 我的工程中用的是webpack包，同时打包编译发布的过程是在CI中完成的，所以首先 sentry-webpack-plugin。

使用 Sentry Webpack Plugin 配合Webpack完成构建时上传SourceMaps

插件的使用方式，参考官方文档，以下截取文中内容的步骤：

1. Start by creating a new authentication token under [Account] > API.
2. Ensure you have project:write selected under scopes.
3. Install @sentry/webpack-plugin using npm
4. Create .sentryclirc file with necessary config (see Sentry Webpack Plugin docs below)
5. Update your webpack.config.json

获取API Token

登录sentry，在账号 -> API 中，

1. 

2. 

3. 请确保勾选了 project:write

安装sentry-webpack-plugin插件

npm install @sentry/webpack-plugin @sentry/cli --dev-save

创建.sentryclirc文件并配置

在项目的根目录下，创建一个文件.sentryclirc，并配置sentry cli需要的内容，以下是我的配置文件

[defaults]
url = http://sentry.io/
<!-- 此处可以从你的sentry.io的全路径看出，如：https://sentry.io/此处是你的org/此处是你的project/ -->
org = yunxun
project = qrcode

[auth]
token = cbf0ec5f33fa478184194ad32701b06ccb92451b7c5742d6b1f1c70f95e511d2

更新webpack.config.json

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

module.exports = {
    // ... other config above ...
    plugins: [
      new SentryPlugin({
        release: process.env.RELEASE,
        include: './dist',
        ignore: ['node_modules', 'webpack.config.js'],
      })
    ]
};

以上步骤编译完成后，可以在Sentry的项目里面看到我们上传的源文件和SourceMap文件

根据上图可以看到，版本号，这个对于的在webpack插件中的release。也是说，sentry可以帮你管理多个版本的sourceMaps。

同时在这个版本上，可以看到有多少个问题，最后一个问题的时间。

Sourmap 上传后的错误效果

上述步骤完成后，在回到我们的页面，重现一次错误，然后看看在sentry有什么不同。

看图中比之前多出了几个功能：

1. 多出版本信息
2. 多出原始、最小化的标签
3. 这次的错误提示，不是压缩后JS的提示，而是看起来和源代码一样

在这种方式下，可以直观，高效的定位排查问题。

参考

1. Sentry 官网 Javascript 整合
2. 前端错误日志监控——Sentry使用教程
3. SPA项目实现前端错误监控及定位错误
4. vue中如何使用sentry对错误日志进行监控
5. 搭建自己的 sentry 服务