Vue项目中使用sentry错误监控

zhEng
2,162 阅读7分钟

错误监控介绍

了解为什么需要前端错误监控以及它的原理

服务端程序通常会将错误信息、调试信息等写入日志文件，在需要时查阅，便于排查问题。

对前端程序员而言，使用 console.log 打印的日志只会显示在访问该页面的浏览器上，

开发人员要去查阅用户浏览器上的日志就比较困难。

解决这个问题的方案其实比较简单，做法是：

在前端页面中收集所有的代码错误、调试信息等，然后通过 AJAX 发送到服务端保存。

这样就能实现前端页面日志的统一管理，方便查阅和分析。

页面错误的分类及捕获方式简介

  1. 即时运行错误

    • 通过使用 try..catch... 捕获
    • 通过监听 window 对象的 error 事件捕获：window.onerror (DOM0) 或 window.addEventListener('error' , funciton(){} , true) (DOM2)

  2. 资源加载错误

    • 通过监听加载资源的 DOM 元素的 error 事件：img.onerror

以上这种将获取页面错误并记录到服务器进行保存，并做后续分析的行为，称为 前端错误监控。

Sentry 介绍

了解 Sentry 监控平台的功能

什么是 Sentry？

Sentry 是一个能帮助开发团队实时的监控发现错误、分类错误、及确定错误的优先级的工具。

Sentry 采用了 客户端/服务器 模式：

  • 它包含一个使用 Python 实现的服务端，用来实现错误信息事件的接收、保存、查看分析错误等工作
  • 并且提供了支持多种不同编程语言/框架的客户端 SDK，能将捕获的客户端错误以 “事件” 的形式发往服务端

image.png

以下是 Sentry 支持的部分热门语言/框架：

image.png

Sentry 的 Github 项目主地址：github.com/getsentry

Sentry 的官方网站地址：sentry.io

Sentry 服务端的搭建

准备运行 Sentry 服务器的环境、以及启动 Sentry 服务器程序

Sentry 官方提供了 在线托管的云服务器，分为免费版和收费版，功能较为丰富，但是它的服务器是在国外的，访问速度方面可能较慢。

对于企业来说，基于网络访问性能、数据安全性等原因，一般都偏好将服务器掌握在自己手中。因此 Sentry 提供了用于自行安装和托管的服务端程序。

安装 Docker

使用 Sentry 自托管服务器，需要安装较多软件，官方推荐使用 Docker 作为最简便的安装方式。

本章的安装过程基于 Docker （Docker 下载地址：www.docker.com/products/do…）

windows前置:

  1. 安装 WSL docs.microsoft.com/en-us/windo…
  2. wsl 中使用 原生 docker www.jianshu.com/p/ff933b60a…

安装 Sentry 服务端

  1. 下载 Sentry 自托管服务器源码，并解开压缩包
// 下载地址
https://github.com/getsentry/onpremise/releases/latest
  1. 在解压后的目录中执行安装脚本 install.sh
// 注意：安装期间会提示创建 Sentry 账号，此时请输入 Sentry 的账号和密码
bash ./install.sh
  1. 在解压后的目录中通过 docker 命令启动 Sentry 服务器
docker compose up -d
  1. 访问 http://localhost:9000

image.png

创建 Vue 监控项目

在 Sentry 管理页面中，创建一个针对 Vue 开发的前端应用的错误监控项目

操作步骤

  1. 使用安装 Sentry 服务器时创建的账号和密码，登录 Sentry 管理后台页面

  2. 在登录后的主页中选择 “Projects” 菜单，并在该页右上角点击 “Create Project” 按钮

image.png

  1. 在新建项目页的 “Popular” 选项卡下选择 “Vue”，并填写项目名称等信息，最后点击 “Create Project”

image.png

  1. 创建项目完毕，进入配置指南页，后续可按该指南在 Vue 项目代码中使用 Sentry SDK

image.png

Sentry 监控 Vue 组件错误

在 Vue 项目中安装和使用 Sentry SDK，并尝试监控 Vue 组件中出现的代码错误

操作步骤

  1. 在现有的 Vue 项目、或新建 Vue 项目中，安装 Sentry 针对浏览器 JavaScript 进行监控的 SDK 包：
npm i --save @sentry/vue @sentry/tracing
  1. 在 Vue 项目的入口文件 main.js 中，添加以下代码
// 引入 Sentry SDK 库
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";
​
// 初始化 Sentry SDK
Sentry.init({
  Vue,
  // 确保该地址填写正确，指向搭建的 Sentry 服务器，在 Sentry 后台管理页的配置指南页中有给出
  dsn: "http://edfdce4a39364c63a42cf385aa4703e1@localhost:9000/2",
  integrations: [new Integrations.BrowserTracing()],
  // 监控采样率（1.0 表示 100% 采样)
  tracesSampleRate: 1.0
});
  1. 尝试在自己的 Vue 组件代码中制造一些错误，例如：
export default {
  created() {
    throw new Error("我们特意制造的一个错误！！！")
  }
};
  1. 运行带有错误的组件页面后，再去 Sentry 管理后台中的 ”Issues“ 菜单页，就能看到由 Sentry SDK 自动发送的错误信息了！

点击该行上的 ”Error“ 链接后，可以查看该错误的详情：

image.png

特别注意

当使用 Sentry SDK 监控代码后，浏览器的 Dev Tool 中的控制台中已不会显示错误信息了，因为它们都被 Sentry SDK 捕获并发送到 Sentry 服务器了。如果你想在控制台中看到错误信息，可在 Sentry.init 中配置 logErrors: true 选项即可：

// 初始化 Sentry SDK
Sentry.init({
  // ....
  logErrors: true,
});

Sentry 监控 Vue 中的请求错误

测试使用 Sentry 监控 Vue 中发送 Ajax 请求发生错误情况

操作步骤

  1. 在 Vue 项目的任意组件中，使用 axios 发送一个会发生错误的请求
async created() {
  // 调用了一个会返回 HTTP 400 错误的接口
  await axios.get('http://127.0.0.1:1314/api/getUserInfo')
}
  1. 运行页面后，去 Sentry 管理后台数据页面查看

image.png

精准错误定位：上传 SourceMap 文件

针对生产环境压缩优化过的代码，在 Sentry 错误查看页面中可以清晰看到错误在代码中发生的准确位置

我们知道，通过为压缩过的 JS 文件生成 SourceMap 文件，就能在浏览器的 Dev Tool 中还原压缩代码、精准定位代码行。而将这些 SourceMap 文件上传至 Sentry，也能让 Sentry 还原和定位压缩过的 JS 代码。

Sentry 提供了 Webpack 插件，可以将 Vue 项目打包后生成的压缩代码及 Source Maps 自动上传到 Sentry 服务器。

下面来完成下列工作：

  • 获取 Auth Token（在上传过程中需要该 Auth Token）
  • 使用 Webpack 打包和上传文件到 Sentry 服务器
  • 运行打包后的代码
  • 查看通过 SourceMaps 解析后的精准定位错误信息

操作步骤

  1. 通过 ”User Settings“ 菜单 => ”Auth Tokens“ 菜单，进入 Auth Token 管理页面。并点击右上角 ”Create New Token“ 按钮：

image.png

  1. 进去 Token 选项选择页面，如下进行勾选权限。注意一定要勾选 project:write 和 project:releses 两项：

image.png

  1. 生成 Auth Token，将它复制下来备用

image.png

  1. 在 Vue 项目中安装 Sentry 专用 Webpack 插件 @sentry/webpack-plugin

    注意: 这边包比较难下, 需要用 cnpm 下载

cnpm i --save-dev @sentry/webpack-plugin
  1. 在 Vue 项目根目录下的 vue.config.js 文件中（没有的话就新建），进行如下配置：
const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'development') {
      config.plugins.push(
        new SentryWebpackPlugin({
          // Sentry 服务器地址
          url: 'http://localhost:9000/',
          // Auth Token
          authToken: "xxx auth token",
          // Sentry 管理后台中设置的组织 Slug 名称
          org: "sentry",
          // Sentry 管理后台中创建的 Project 名称
          project: "my_vue_app001",
          // 发布版本号
          release: "test-vue-sentry@1.0.0",
          // 其他配置
          cleanArtifacts: true,
          include: config.output.path + '/js',
          urlPrefix: '~/js',
          ignore: ["node_modules", "vue.config.js", "babel.config.js"],
        })
      )
    }
  },
};
  1. 在 Vue 项目的 main.js 中，为 Sentry.init 添加 release 配置：
// 初始化 Sentry SDK
Sentry.init({
  // ...
  // 发布版本号
  release: 'test-vue-sentry@1.0.0',
});
  1. 构建 Vue 项目，生成 dist 目录，并自动上传压缩过的 js 文件和 sourcemap 文件
npm run build

在 Sentry 管理后台页面的 ”Releases“ 菜单中，可以看到我们指定生成的 release：

image.png

点击这个版本号，在右下角找到 ”Source Maps“，并点击后面的 ”X artifacts“ 链接，就能看到上传的文件：

image.png

image.png

  1. 将 dist 目录下的静态文件使用 nginx 或其他 HTTP 服务器运行起来；然后去访问有错误产生的页面
// 为了简单起见，推荐使用 http-server 来运行：
// 1. 安装 http-server：npm i -g http-server
// 2. 在 dist 目录中执行 http-server 命令
// 3. 访问 http://localhost:8080
  1. 在 Sentry 管理后台 ”Issues“ 菜单页面中可以看到新产生的错误记录，查看详情后发现已经可以看到未压缩的代码了： image.png
avatar
文章
阅读
粉丝