前端错误日志监控：Sentry 的介绍与使用

sentry

1.背景

• 在我们开发完成后，会有一系列上线之前的测试，比如，先测pre，再测beta，目的就是以确保项目能在生产环境上没有事故。

• 但对于每一个项目，我们都没办法保证代码零 bug、零报错，即便是经历过几轮测试，也永远无法做到 100% 覆盖，用户也不会总是按照我们所预期的进行操作，在上线后也会出现一些预料不到的问题。当生产环境中产生了一个 bug 时，如何做到迅速报警，找到问题原因，修复后又如何在线上验证。因此就需要：前端错误日志监控。

• 跟踪运行时错误 如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。

2.什么是 sentry

• sentry官网
• sentry 是一个基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台，主要用于如何快速的发现故障。支持几乎所有主流开发语言和平台，并提供了现代化 UI, 它专门用于监视错误和提取执行适当的事后操作所需的所有信息，而无需使用标准用户反馈循环的任何麻烦。

3.监控原理

• window.onerror
  每当代码在 runtime 时发生错误时，JavaScript 引擎就会抛出一个 Error 对象，并且触发 window.onerror 函数。

window.onerror = (msg, url, line, col, err) => {
  console.log(err)
}

• unhandledrejection
  在我们使用 Promise 的时候，如果发生错误而我们没有去 catch 的话，window.onerror 是不能监控到这个错误的。但是这个时候，JavaScript 引擎会触发 unhandledrejection 事件，只要我们监听这个事件，那么就能够监控到 Promise 产生的错误。

window.addEventListener('unhandledrejection', function(err) {
  console.log(err)
})

4.如何使用

官方文档

• 注册 sentry，新建项目
• 引入SDK
• 初始化配置

Sentry.init({
  dsn: "https://[e-mail]/0",
  debug: true,
});

常用选项

• dsn：项目的地址，告诉SDK将事件发送到哪里
• debug：打开或关闭调试模式。开启就会把信息打印到控制台上面
• release：代码的版本号
• environment : 环境名称
• beforeSend：在事件发送到服务器之前调用，过滤错误事件。

常用功能

• 进行基本的配之后，sentry 会默认上报页面抛出的所有未被捕获的错误（包括 window.error 和 promise 异常）。
• 主动捕获并上报错误。 主动上报的方式有两种： 一种是直接上报文本信息，参数为一个字符串； 另一种是上报错误对象，参数为一个 error 对象或者类对象。
• captureException (exception) : 捕获一个 js - 异常，传入一个 exception 对象。
• captureMessage (message,level) : 捕获一条信息，传入信息内容。
• 丰富bug上下文数据。setContext、setUser、setTag…
• 上传 SourceMap。只要我们将 sourcemap 文件也上传到服务器，就可以在 sentry 平台看到源代码，从而快速定位错误。

5.简单封装

import * as Sentry from '@sentry/browser';

interface Sdk {
  dsn: string;
  environment?: string;
  debug?: boolean; // 根据需要自行添加参数类型
}

export function initSdk(sdkConfig: Sdk) {
  Sentry.init(sdkConfig);
}

export function setErrLog(errLevel: string, errMsg: string) {
  Sentry.withScope((scope: any) => {
    scope.setLevel(errLevel);
    Sentry.captureException(errMsg);
  });
}