为什么Raven.js/Sentry会说jQuery未定义

Question

我在Sentry中收到很多错误报告，显示“ReferenceError: jQuery未定义”，但与页面总加载次数相比，这种错误出现得相对较少。

<script src="/js/compiled/jquery.min-2fe08f7.js" defer></script>
<script src="/js/my-script-e6f35a4.js" defer></script>

我的脚本文件my-script.js大致如下：

(function($) {
    $('h1').text('Hello world');
})(jQuery);

但是从Sentry报告中我并不清楚为什么jQuery没有被加载。

Sentry面包屑提供的线索非常无用:

12:15:25 sentry ReferenceError: jQuery is not defined
12:15:25 sentry ReferenceError: jQuery is not defined
12:15:26 exception ReferenceError: jQuery is not defined

延迟加载的脚本应按照它们在文档中出现的顺序进行加载，因此我认为问题不在于异步加载。也许jQuery文件在某些慢速设备上加载超时了？或者服务器上的文件在某些时刻无法访问？我在各种JS文件以及各种依赖项中都遇到过这种情况，不仅仅是jQuery。是否有人能建议我如何正确解决这个问题，或者至少将完整的控制台输出发送到Sentry，包括对JS文件等资源的失败HTTP子请求，以找出实际原因是什么？提前致谢。

- amik

---

从Sentry获取URL并访问页面，检查是否多次包含（jquery）文件或检查ravan.js是否必须在jquery文件之后包含。 - Firoz Tennali

根据另一个答案，"你不能信任defer"和"在某些情况下，一些浏览器存在错误，导致defer脚本无序运行。"参见：https://dev59.com/gW435IYBdhLWcg3wuikn#10731231 - Dem Pilafian

你知道它在哪些浏览器上发生吗？https://dev59.com/V1wY5IYBdhLWcg3wno4r - andyhasit

是的，这可能与延迟执行顺序出现问题有关。感谢您发布了可能与其他人相关的参考资料，但是现在已经过去将近4年了，我甚至不记得当时是在哪个项目上进行的 :) - amik

Answer 1

你想将代码包装在一个事件处理程序中，该处理程序仅在整个DOM准备就绪时触发，以确保在所有延迟脚本加载后运行。

通常情况下，如果jQuery可用，这将是一个$(document).ready()调用，但由于这不是保证的，我建议在你的my-script.js文件中执行类似以下的操作。

document.addEventListener("DOMContentLoaded", function(event) {
   (function($) {
     $('h1').text('Hello world');
   })(jQuery);
});

- Michael Angstadt