JS前端错误监控捕获以及上报方法详解

简介

在前端开发过程中，我们经常会遇到各种各样的问题，其中 JS 错误显得尤为常见。在出现问题时我们需要将其排查并解决，但有时问题的实际情况在我们面前并不呈现，而是隐蔽的。这时需要我们有一种错误监控的方法，即在 JS 代码中添加错误监控功能，可以捕获所有的 JS 错误，并及时向后端上报，以便我们及时处理问题。

实现过程

在前端错误监控中，我们一般实现以下几个步骤：

第一步：捕获错误

使用try...catch语句可以捕获到当前代码块中的 JS 错误。我们可以在页面中的 JS 代码中放置一个全局的 try...catch 包裹，用以捕获所有的 JS 错误。

try {
  // Some code
} catch(error) {
  // Handle error
}

该方法可以捕获其他函数内的错误，但当错误发生在异步调用中时，我们并不能使用该方法捕获问题。为了解决这个问题，我们需要引入全局错误事件处理器（global error event handlers）。

第二步：全局错误事件处理器

使用全局错误事件处理器，我们可以在浏览器中捕获到所有的错误，包括崩溃、语法错误等。除了常规的 JS 错误，全局错误事件处理器还可以捕获浏览器自带的JS异常，比如资源加载失败、用户手动终止操作等。

window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
  // Handle error
}

其中window.onerror函数接收五个参数，分别为：
- errorMessage：错误信息
- scriptURI：错误所在文件
- lineNumber：错误所在行数
- columnNumber：错误所在列数
- errorObj：错误堆栈

全局错误事件处理器的实现并不理想。由于不同浏览器之间尚未达成完全统一的标准，某些错误无法被正常捕获。因此我们需要结合第三方的错误监控方案实现更加准确的监控与上报。

第三步：第三方错误监控方案

现在，市面上出现了很多监控平台。一般都提供如下三个功能峰哥：

收集错误信息

监控平台建立一个 JS 错误监听脚本，当我们在页面中引入该脚本后，监控平台就可以在页面中监听到 JS 的错误信息。

上报错误信息

收集到错误信息后，监控平台可以将这些信息上报到服务器，以便我们及时处理。

错误信息分析

平台还可以通过对错误信息做统计分析，得出哪些页面存在较多的 JS 错误、哪些错误比较致命等等，从而可以为我们提供更加全面的监控分析方案。

具体实现请参考第三方监控平台的文档。

示例解析

下面以 Sentry 为例，介绍如何使用错误监控方案监测网站前端错误。

步骤一：创建 Sentry 帐号

创建完帐号后，Sentry 会默认生成一个 DSN。该 DSN 是向 Sentry 报告错误时使用的一个唯一标识，需要保存好。

步骤二：引入 Sentry SDK

在项目的 JS 中引入 Sentry SDK。可以使用以下命令进行安装。

npm install @sentry/browser --save

初始化 Sentry SDK。

import * as Sentry from '@sentry/browser'

Sentry.init({ dsn: 'your DSN' })

步骤三：监听JS错误事件

使用类似以下的代码片段监听JS错误事件。

window.addEventListener('error', (event) => {
    Sentry.captureException(event.error)
})

步骤四：监测后端代码错误

除了前端 JS 错误之外，我们还需要监测后端代码错误以供完整的错误监控方案。此时需要在后端代码中使用响应的错误监控 SDK。

总结

前端错误监控对于用户体验和产品质量都有着非常重要的影响，尤其对于复杂的前端应用来说，错误监控更是必不可少的。在本文中，我们介绍了如何使用 try...catch 语句和全局错误事件处理器捕获 JS 错误，并介绍了如何使用 Sentry SDK 实现项目的前端错误监控。