vue项⽬前端错误收集之sentry教程详解
sentry简介
Sentry 是⼀个开源的错误追踪⼯具，可以帮助开发⼈员实时监控和修复系统中的错误。其专注于错误监控以及提取⼀切事后处理所需的信息;⽀持⼏乎所有主流开发语⾔( JS/Java/Python/php )和平台, 并提供了web来展⽰输出错误。
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报错
dsn: '1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
integrations: [
new Integrations.Vue({
Vue,
attachProps: true,
}),
],
});
在项⽬跟⽬录下增加.sentryclirc⽂件，其中的token可以在左上⾓头像⾥的api keys⾥⾯获取。
[auth]
token="your token"
[defaults]
url = 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项⽬，点击进去就能看到多了⼀条错误信息。
点击信息可以进⼊信息详情进⾏查看。
python新建项目教程
但是这个错误信息是压缩后的，不能定位到代码的实际位置。使⽤意义不⼤，因此需要上传 source-map 。
上传source-map
上传的⽅式有多种。可以通过 sentry-cli 通过命令⾏的⽅式来上传 source-map ，但是需要⼿动上传。也可以采⽤ webpack-plugin 这个插件，可以在 build 的同时⾃动上传 source-map 。本⽂采⽤⾃动上传策略。
项⽬配置：
// f
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
new SentryCliPlugin({
include: "./dist",
release: v.RELEASE_VERSION,
configFile: "sentry.properties"
})
]
// main.js
Sentry.init({
dsn: "4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
}),
new Integrations.RewriteFrames()
],
release: v.RELEASE_VERSION
});
/
/ v.js
"use strict";
const release = "test-1";
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 地址。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。