React中使用Sentry的几个问题

4,126 阅读2分钟

为了让前端错误能够得到有效的反馈和监控,让系统告别裸奔,我们接入了Sentry前端错误监控系统。Sentry官网地址。在React框架下使用的过程中有以下几点发现,记录下来,可供参考:

  1. 加入了Sentry监控代码,为啥我的错误迟迟未上报?
  2. webpack打包后的代码如何定位到正确的源码位置?
  3. 屏蔽无效的开发环境监控代码,只在线上环境使用。
  4. 如何通过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服务器,上传方式有以下三种:详细查看

  1. 使用sentry提供的webpack插件@sentry/webpack-plugin在项目打包时自动上传。这种方式只需要在webpack打包配置中加入相关配置即可,是三种方式中最方便的方式。
  2. sentry-cli上传
  3. 第三种是直接直接调用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接口了~

如上~陆续补充~