使用Raven.JS集成Sentry未捕获控制台错误问题排查

嘿，我来帮你排查下这个问题——核心问题其实出在Raven初始化的时机太晚，咱们一步步拆解：

1. 为什么手动调用Raven.captureException有效，但自动捕获无效？ #

你把Raven.config().install()放在了$(window).load()回调里，这个事件是要等页面所有资源（图片、样式、脚本全加载完）才会触发的。但页面加载过程中（比如脚本执行时的语法错误、DOM渲染时的报错）的错误，早在这个回调触发前就已经发生了，这时候Raven还没完成初始化，自然抓不到这些错误。

而你手动调用Raven.captureException是在初始化之后执行的，所以能正常把测试错误发送到Sentry。

2. 为什么自定义window.onerror也无效？ #

还是时机的问题：你的window.onerror是全局定义的，但Raven.install()会自动覆盖默认的window.onerror来接管错误捕获。但你的Raven.install()是在$(window).load()里才执行，页面加载早期的错误发生时，要么window.onerror还没被Raven接管，要么你的自定义逻辑和Raven的内置逻辑冲突了，自然也抓不到。

正确的集成方式 #

要让Raven能捕获所有错误（包括页面加载过程中的早期错误），你需要尽早初始化Raven，别把它放到任何加载回调里：

<!-- 先加载Raven脚本 -->
<script src="https://cdn.ravenjs.com/3.26.4/raven.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
  // 直接在这里初始化，不要等window.load或者jQuery ready
  Raven.config('https://xxxxxxxxxxxxxxxxxxxxxxxx@sentry.io/xxxxxx').install();
  
  // 如果有依赖jQuery的业务逻辑，再单独放到jQuery的就绪回调里
  $(function() {
    // 这里写需要操作DOM、依赖jQuery的代码
  });
</script>
<!-- 最后加载jQuery -->
<script src="/assets/js/jquery.min.js"></script>

额外注意事项 #

• Raven.js的install()方法默认已经帮你监听了window.onerror、unhandledrejection等事件，不需要手动再定义window.onerror，否则容易产生冲突。
• 如果是单页应用，还需要注意路由切换时的错误捕获，但普通静态页面只要尽早初始化就足够了。
• 可以给配置加上环境标识，方便在Sentry后台区分不同环境：

  Raven.config('https://xxxxxxxxxxxxxxxxxxxxxxxx@sentry.io/xxxxxx', {
    environment: 'production' // 或者 'development'
  }).install();
  

验证方法 #

初始化完成后，你可以在浏览器控制台手动抛出一个错误测试：

throw new Error('Test Sentry automatic capture');

如果能在Sentry后台看到这个错误，说明自动捕获机制已经正常工作了。

内容的提问来源于stack exchange，提问作者softech