I am getting many errors in Sentry saying that "ReferenceError: jQuery is not defined", but still it occurs quite rarely in compare with total number of page loads.
<script src="/js/compiled/jquery.min-2fe08f7.js" defer></script>
<script src="/js/my-script-e6f35a4.js" defer></script>
Where my-script.js is something like:
(function($) {
$('h1').text('Hello world');
})(jQuery);
but I have no clue from the Sentry report why the jQuery was not loaded.
The only clues given in Sentry breadcrumbs are pretty useless:
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
Deferred scripts should be loaded in the order they are present in the document, so I don't think that the problem is in asynchronous loading.
Maybe the jQuery file loading timeouts on some slow devices? or was the file unavailable on the server in some moment?
This happens to me in various JS files and also with various dependencies, not only jQuery. Can anyone advise me how to properly solve such problem, or at least get full console output to Sentry, including failed HTTP subrequests to resources like JS files, to find out what is the actual cause?
Thanks in advance.
You want to wrap your code in an event handler that is fired only once the entire DOM is ready so it's guaranteed to run after all deferred scripts have been loaded.
Typically if jQuery were available this would be a $(document).ready() call, but since that's not guaranteed I would suggest doing something like this in your my-script.js file
document.addEventListener("DOMContentLoaded", function(event) {
(function($) {
$('h1').text('Hello world');
})(jQuery);
});