Provide snippet so bugs that occur when bugsnag is still loading are still captured

When you load bugsnag asynchronously, bugs can still occur that are not captured.

import scriptjs from 'scriptjs';

window.addEventListener('unhandledrejection', (event) => {
  Bugsnag.notifyException(event.reason);
});

scriptjs('https://d2wy8f7a9ursnm.cloudfront.net/bugsnag-2.min.js', () => {
  Bugsnag.apiKey = 'xx';
});

// in this scenario, unhandledrejection happens before Bugsnag is loaded

We can fix this by using a snippet inspired by Google Analytics.

1. Provide a small snippet that created Bugsnag inline and stores any exceptions.
2. When bugsnag loads, it detects Bugsnag and the stored exceptions.
3. If those exceptions exist, it sends them immediately

I’d like to avoid blocking the page from loading by not loading it async.

[eanakashima]

@jacobmarshall thanks, that’s a great summary of some of the nuances.

[jmshal]

The problem is if the Bugsnag notifier doesn’t get a chance to inject itself into the various JavaScript functions, timers & event hooks before other code on the page utilises them, you end up losing the guarantee that if/when an error occurs that it will be picked up by the notifier and sent to Bugsnag.

As @eanakashima is suggesting, if you need the notifier loaded async, it needs to still be invoked before any other code loads. Bundling the notifier with your own code is the best (and easiest) way to do this.

I wouldn’t say this goes against the web best practices. Much like you may decide to depend upon a version of jQuery hosted on a CDN within your project, it needs to load before any of your code does.

Additionally, there should be no issues using the notifier with the defer attribute attached to the script element, as long as all your script tags have it as well. I’ve done this on previous projects which didn’t use code bundling (ie. webpack or browserify) with no problems.

<script
    src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-3.min.js"
    data-apikey="YOUR-API-KEY-HERE"
    defer>
</script>
<script src="/bundle.js" defer></script>

I think it’s also important to remember that Bugsnag is only really totally beneficial if it able to capture any errors that occur during any part your web app/website’s lifecycle. For instance, if you deployed a change which accidentally included a typo right at the beginning of your code bundle, which subsequently caused your app to fail to load entirely, there is no way Bugsnag would be able to do anything if your code asynchronously loaded Bugsnag somewhere after that typo.

You should be able to rely upon Bugsnag for notifying you of all errors that occur, and loading async does not offer that. Which is super important especially if you do rapid deployments.