为了让前端错误能够得到有效的反馈和监控,让系统告别裸奔,我们接入了Sentry前端错误监控系统。Sentry官网地址。在React框架下使用的过程中有以下几点发现,记录下来,可供参考:
- 加入了Sentry监控代码,为啥我的错误迟迟未上报?
- webpack打包后的代码如何定位到正确的源码位置?
- 屏蔽无效的开发环境监控代码,只在线上环境使用。
- 如何通过sentry提供的api获取到想要的接口数据?
问题一:加入了Sentry监控代码,为啥我的错误迟迟未上报?
报错已在代码中catch,则不会再上报,如下:
// 片段1
console.log(testSentry);
// 片段2
try {
console.log(testSentryAgain);
} catch (error) {
}
片段1中的错误会上报到sentry服务端,但片段2中的不会,因为我们做了捕获。这种情况下,若还想要捕获到具体错信息,可以主动上报,如下:
try {
console.log(testSentryAgain);
} catch (error) {
Sentry.captureException(error);
}
问题二:webpack打包后的代码如何定位到正确的源码位置?
可以将SourceMap文件上传到Sentry服务器,上传方式有以下三种:详细查看
- 使用sentry提供的webpack插件@sentry/webpack-plugin在项目打包时自动上传。这种方式只需要在webpack打包配置中加入相关配置即可,是三种方式中最方便的方式。
- sentry-cli上传
- 第三种是直接直接调用sentry API 上传。
问题三:只在线上环境加入监控代码
打包时,区分开发、测试和线上环境,通过将sentry监控代码的打包控制在想要的环境即可,开发环境尽量避免,测试环境视个人需要,主要需要在线上环境。
// webpack.config.js
// 本例通过区分模版文件来区别监控代码是否加入
// 只在indexpro.template.html中引入了监控代码
module.export.plugin = [
...,
new HtmlWebpackPlugin({
filename: `${item}.html`,
template: (isProd || isTest) ? './indexpro.template.html' : './index.template.html',
...,
})),
...
]
问题四:自己项目域名下如何调用sentry api
如果我们想要通过sentry提供的api获取到相应的信息,首先需要获取到token,然后带着token去请求相关的api。若想要解决跨域的问题,可以写个代理服务,如下:
//代理
const http = require('http');
const request = require('request');
const config = require('./config');
const { serverConfig, sentryConfig } = { ...config };
//创建 API 代理服务
const apiServer = http.createServer((req, res) => {
const url = `http://${sentryConfig.remoteDomainStr}${req.url}`;
const options = {
url: url,
auth: {
'bearer': 'XXXXXXX',
}
};
request.get(options, function (error, response, body) {
if (!error && response.statusCode === 200) {
//编码类型
res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
//允许跨域
res.setHeader('Access-Control-Allow-Origin', '*');
//返回代理内容
res.end(body);
} else {
res.end(JSON.stringify({
success: false,
message: 'error'
}));
}
});
});
//监听 API 端口
apiServer.listen(serverConfig.port, serverConfig.domainStr, () => {
console.log('代理接口,运行于 http://' + serverConfig.domainStr + ':' + serverConfig.port + '/');
});
将该node服务部署到自己的域名下,就可以正确通过自己的域名访问sentry api接口了~
如上~陆续补充~