返回

Sentry 入坑记：既方便又坑的报错收集服务

开发工具

Sentry是一个听起来非常厉害的开源报错收集服务，它目前在公司里有一个比较奇怪的现象，server、app都有对应的监控系统，唯独H5没有完美的解决方案。可能是H5诡异的case太多了，而且追查还需要依赖sourcemap，麻烦。但能及时获取页面报错的工具，深受前端开发者的喜爱，对于线上和服务器开发的代码来说，一旦出了错误，使用它比查日志要方便快捷的多。它支持几乎所有的程序环境的应用，覆盖面很广。只需要将相关的SDK引入项目中，即可实现错误的自动上报，还支持自定义错误，甚至支持错误发生的重现。

然而在实际的使用过程中，Sentry也有不少的坑，踩坑的时候一定不要怀疑人生。比如：在开发的时候，经常会提示一下错误：

Refused to load the script ‘https://o1193612.ingest.sentry.io/api/5/envelope/‘ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’ http: https: data:”.

这是因为Sentry的SDK在加载的时候，会自动在页面中插入一个script标签，而这个script标签的src属性指向了Sentry的服务器地址。但是，由于Content Security Policy（CSP）的限制，这个script标签无法加载，从而导致错误的发生。

后来总结了下，我决定写篇简单的指南来解决Sentry 在本地开发时遇到的问题。

解决方法有以下几种：

  1. 在CSP中添加例外

可以在CSP中添加一个例外，允许Sentry的SDK加载。具体的方法是，在HTTP头中添加以下代码：

Content-Security-Policy: script-src ‘self’ ‘unsafe-eval’ http: https: data: *.sentry.io
  1. 使用Sentry的本地开发模式

Sentry提供了本地开发模式，可以在本地开发环境中使用Sentry，而不必担心CSP的限制。要使用Sentry的本地开发模式，需要在项目中安装sentry-cli包，然后运行以下命令：

sentry-cli start

这将启动Sentry的本地服务器，并提供一个URL，可以在浏览器中打开。然后，就可以在浏览器中加载Sentry的SDK，而不会遇到CSP的限制。

  1. 使用Sentry的JavaScript SDK

Sentry还提供了一个JavaScript SDK，可以直接在浏览器中使用。要使用Sentry的JavaScript SDK，需要在项目中安装sentry-javascript包，然后在页面中引入以下代码：

<script src="https://unpkg.com/sentry-javascript@latest/dist/sentry.min.js"></script>
<script>
  Sentry.init({
    dsn: 'YOUR_DSN',
  });
</script>

然后，就可以在页面中使用Sentry的API来上报错误。

总之，Sentry是一个非常强大的错误收集服务，可以帮助开发人员快速定位和解决错误。但在使用Sentry时，也需要注意一些兼容性问题。