Loader

We recommend using our bundled CDN version for the browser as explained here.

But we also offer an alternative which is still in beta, we call it the Loader.

You install by just adding this script to you website instead of the SDK bundle. This line is everything you need, this script is <1kB gzipped and includes the Sentry.init call with your DSN.

<script src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js" crossorigin="anonymous"></script>

What does the Loader provide?

It’s small wrapper around our SDK.
The Loader does a few things:

  • You will always have the newest recommend stable version of our SDK.
  • It captures all global errors and unhandled promise rejections.
  • It lazy injects our SDK into your website.
  • After the SDK is loaded everything will be sent to Sentry.

By default, the Loader contains all information needed for our SDK to function, like the DSN. In case you want to set additional options you have to set them like this:

Sentry.onLoad(() => {
  Sentry.init({
    release: '1.0.0',
    environment: 'prod'
  });
});

onLoad is a function the only the Loader provides, it will be called once the SDK has been injected into the website. With the Loader init() works a bit different, instead of just setting the options, we merge the options internally, only for convenience so you don’t have to set the DSN again since the Loader already contains it.

As explained before, the Loader lazy loads and injects our SDK into your website but you can also tell the loader to fetch it immediately instead of only fetching it when you need it. Setting data-lazy to no will tell the Loader to inject the SDK as soon as possible:

<script
  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
  crossorigin="anonymous"
  data-lazy="no">
</script>

The Loader also provides a function called forceLoad() which does the same, so you can do the following:

<script>
  Sentry.forceLoad();
  Sentry.onLoad(() => {
    // Use whatever Sentry.* function you want
  });
</script>

Current limitations

As we inject our SDK asynchronously we will only monitor global errors and unhandled promise for you until the SDK is fully loaded. That means that it could be that we miss breadcrumbs on the way that happened during the download.
For example a user clicking on a button or your website is doing a XHR request.
We will not miss any errors, only breadcrumbs and only up until the SDK is fully loaded. You can reduce this time by manually calling forceLoad or set data-lazy="no". So keep this in mind.