1

I've got BugSnag in place to monitor JavaScript errors on my front end. I'm noticing a small percentage of users, under 1%, are receiving errors such as:

  • jQuery is not defined
  • Bootstrap's JavaScript requires jQuery
  • number_format is not defined

...And so on. The scripts are being loaded in my template using standard script tags:

<script src="/vendor/jquery.js"></script>
<script src="/vendor/bootstrap.min.js"></script>
<script src="js/misc.js"></script>
<!-- Page-specific scripts here, typically relying on the above scripts -->

In all these cases I have more than one script being loaded which depends on the scripts that are loaded before it. For example, number_format is defined in misc.js, and then used in the page-specific scripts where an error then occurs. Or jQuery is loaded first, and then used by Bootstrap which is loaded second.

It appears that certain scripts are just failing to load for some users, but the next script is successfully loading to find its dependencies missing.

My question is this: Is this type of failure to load scripts unavoidable, caused by something like a network hiccup for specific users? Is it appropriate to simply ignore these knowing that it's not an actual error with my code? Or is there something I can do to prevent this error when a script loads but it's dependency doesn't?

Thanks!

Tyler
  • 23
  • 3
  • Have a look at the top answer on this question:https://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts - There are tons of options and different approaches for loading scripts, and that question might have enough overlapping information to answer yours. – tehp Mar 02 '19 at 21:05
  • A quick trial - add the `async` and `defer` attributes to all of your ` – Randy Casburn Mar 02 '19 at 21:10
  • @tehp The linked answer explains the browser does what I want by default - load and execute in order. So am I correct in understanding the cases where a dependency failed to load must be a user specific issue such a shoddy connection? I’m not seeing any way of preventing the issue I explained in my question for these users. Thanks! – Tyler Mar 03 '19 at 06:48

1 Answers1

0

These loading failures are unavoidable, unfortunately, due to the unpredictable nature of the Internet and end-user devices. Little things, like a drop in the network, recycling of a service, or device power can cause a browser to abandon a request and leave your page in a bad state.

I did a conference talk on debugging with this as one of my examples. I discuss this at about 33:30.

You should build your code defensively. If your script depend on something loaded from a separate request, always check that it exists before using it. Maybe even have some sort of fallback behavior, such as showing the user an error message, logging the event, or reloading the page.

I work on a service called TrackJS that tries to solve these problems by focusing on user impact to help you decide what is important. Most of these errors can be safely ignored, but you'll want to make sure you have appropriate fallbacks in place.

Todd Gardner
  • 601
  • 4
  • 17