乐趣区

vue项目前端错误收集之sentry

jiezi

sentry 简介

Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息; 支持几乎所有主流开发语言 (JS/Java/Python/php) 和平台, 并提供了 web 来展示输出错误。
sentry 官网：https://sentry.io/

sentry 安装

sentry 是一个开源的工具，可以自行搭建。
官方支持两种安装和运行 Sentry 服务器的方法，Docker 和 Python。推荐使用 Docker。
当然，对于刚开始接触 sentry 的同学，也可以直接使用官方提供的免费服务，但是有一些限制。
下面先来介绍一下利用官方的免费服务，在前端项目中如何使用 sentry。

如何在项目中使用 sentry

  1. 首先需要在 sentry 的官网注册一个账号。注册完选择新建一个项目，sentry 支持多种框架，在其中选择 vue 创建项目。我创建了一个名为 test 的项目。

  1. 创建项目页面会自动跳转到如何配置 vue 项目页面。接下来就按照指引在 vue 代码里引入 sentry。可以通过 cdn 或者 npm 引入。我们采用 npm 引入。引入的时候需要给 init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目，在创建项目的时候系统会自动生成。如果不传这个参数，sentry 不会发送错误。
// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生产环境中让 sentry 报错
process.env.NODE_ENV === "production" && Sentry.init({
  dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

在项目跟目录下增加.sentryclirc 文件，其中的 token 可以在左上角头像里的 api keys 里面获取。

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test

然后我们在代码里制造一个错误，就可以让 sentry 捕获了。本地如何模拟线上环境访问 dist 下的文件呢？需要装一个 http-server，在 dist 文件夹下启动一个 http 服务就可以了。

npm i http-server 
cd dist
http-server -p 8888

注意：sentry 捕获到的错误不会在打印在控制台中。

在 network 中可以看到，sentry 发送了一个错误请求，请求参数如下：

接下来我们就可以在后台看到刚才上传的错误信息，同时 sentry 也会给你的邮箱发送一封错误邮件。

错误信息查看

在后台找到我们的 test 项目，点击进去就能看到多了一条错误信息。

点击信息可以进入信息详情进行查看。

但是这个错误信息是压缩后的，不能定位到代码的实际位置。使用意义不大，因此需要上传 source-map。

上传 source-map

上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map，但是需要手动上传。也可以采用 webpack-plugin 这个插件，可以在 build 的同时自动上传 source-map。本文采用自动上传策略。

项目配置：

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"
    })
]
// main.js
Sentry.init({
    dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()],
    release: process.env.RELEASE_VERSION
});
// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: '"production"',
    RELEASE_VERSION: `"${release}"`
};

需要保证 plugins 和 Sentry.init 两个配置中的 release 版本号相同，这样的话 sentry 才能将 source-map 文件一一对应上。
修改完之后我们重新 build 一下项目，build 的过程比较慢：

之后我们去后台可以看见在版本中多了一个 test-1 版本，也就是我们刚刚上传的版本。

点进去可以看见我们刚才上传的 source-map 文件。

这时我们重新触发一次错误，就可以看到具体的出错位置了。

sentry 关联 github

在设置 -> 集成里面可以设置 sentry 关联各种服务，如 github、jira 等。关联上 github 后，可以直接为该异常创建 issue。

这样在该异常的详情页就可以创建 issue 到 sentry 这个仓库了。

创建时可以选择仓库，名称，详情及指定给谁：

打开 github，在 sentry 这个仓库下，发现多了一个 issue，就是刚才我们创建的。

在我们向 github 提交 commit 的时候，如果加上了异常的 id，例如这样：

git commit -m 'Fixes TEST-3'

这样在下次发版 build 的时候，sentry 会自动将该异常的状态从 unresolved 变成 resolved，并会给出本次提交的 diff 地址。

搭建 sentry 服务

官方给出的有两种方法可以自行搭建 sentry：

  • python
  • docker

推荐使用 docker。下面来介绍一下通过 docker 如何搭建 sentry。

首先需要下载 docker
mac 桌面版地址：https://hub.docker.com/editions/community/docker-ce-desktop-mac

其中已经集成了 docker 命令行、docker-compose 等。

然后需要去 github 拉取 Sentry On-Premise，这个是官方提供的通过 docker 安装 sentry 的仓库，里面介绍了如何一步一步搭建 sentry。

创建服务步骤：

cd onpremise
// 创建本地数据库
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 创建环境配置文件
cp -n .env.example .env 
// 构建 docker 服务
docker-compose build
// 产生秘钥，将其作为 SENTRY_SECRET_KEY 加入到.env 文件中
// 创建数据库，用交互式的提示生成管理员账号
docker-compose run --rm web upgrade
// 启动所有服务
docker-compose up -d

如果过程一切正常的话，现在访问 localhost:9000 就能看到 sentry 的登录页面了，用刚才生成的管理员账号密码登录即可。

以后的操作就跟上面介绍的一样了。

注意事项

  1. 利用本地搭建的 sentry 创建项目的时候，发现 dsn 那一栏是空的，系统并没有自动生成。需要自己拼接这个 dsn。它由以下几部分组成，分别是协议、公钥、私钥、主机、路径（一般为空）、项目 id。
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
// 类似这样，把它放在 sentry.init 中的 dsn 即可
http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2
退出移动版