Loader Script

Learn about the Sentry JavaScript Loader Script

The Loader Script is the easiest way to initialize the Sentry SDK. The Loader Script also automatically keeps your Sentry SDK up to date and offers configuration for different Sentry features.

To use the loader, go in the Sentry UI to Settings > Projects > (select project) > Client Keys (DSN), and then press the "Configure" button. Copy the script tag from the "JavaScript Loader" section and include it as the first script on your page. By including it first, you allow it to catch and buffer events from any subsequent scripts, while still ensuring the full SDK doesn't load until after everything else has run.

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

By default, Tracing and Session Replay are disabled.

To have correct stack traces for minified asset files when using the Loader Script, you will have to either host your Source Maps publicly or upload them to Sentry.

The loader has a few configuration options:

  • What version of the SDK to load
  • Using Tracing
  • Using Session Replay
  • Showing debug logs

To configure the version, use the dropdown in the "JavaScript Loader" settings, directly beneath the script tag you copied earlier.

Note that because of caching, it can take a few minutes for version changes made here to take effect.

If you only use the Loader for errors, the loader won't load the full SDK until triggered by one of the following:

  • an unhandled error
  • an unhandled promise rejection
  • a call to Sentry.captureException
  • a call to Sentry.captureMessage
  • a call to Sentry.captureEvent

Once one of those occurs, the loader will buffer that event and immediately request the full SDK from our CDN. Any events that occur between that request being made and the completion of SDK initialization will also be buffered, and all buffered events will be sent to Sentry once the SDK is fully initialized.

Alternatively, you can set the loader to request the full SDK earlier: still as part of page load, but after all of the other JavaScript on the page has run. (In other words, in a subsequent event loop.) To do this, include data-lazy="no" in your script tag.

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

Finally, if you want to control the timing yourself, you can call Sentry.forceLoad(). You can do this as early as immediately after the loader runs (which has the same effect as setting data-lazy="no") and as late as the first unhandled error, unhandled promise rejection, or call to Sentry.captureMessage or Sentry.captureEvent (which has the same effect as not calling it at all). Note that you can't delay loading past one of the aforementioned triggering events.

If Tracing and/or Session Replay is enabled, the SDK will immediately fetch and initialize the bundle to make sure it can capture transactions and/or replays once the page loads.

While the Loader Script will work out of the box without any configuration in your application, you can still configure the SDK according to your needs.

For Tracing, the SDK will be initialized with tracesSampleRate: 1 by default. This means that the SDK will capture all traces.

For Session Replay, the defaults are replaysSessionSampleRate: 0.1 and replaysOnErrorSampleRate: 1. This means Replays will be captured for 10% of all normal sessions and for all sessions with an error.

You can configure the release by adding the following to your page:

Copied
<script>
  window.SENTRY_RELEASE = {
    id: "...",
  };
</script>

The loader script always includes a call to Sentry.init with a default configuration, including your DSN. If you want to configure your SDK beyond that, you can configure a custom init call by defining a window.sentryOnLoad function. Whatever is defined inside of this function will always be called first, before any other SDK method is called.

Be sure to define this function before you add the loader script, to ensure it can be called at the right time:

Copied
<script>
  // Configure sentryOnLoad before adding the Loader Script
  window.sentryOnLoad = function () {
    Sentry.init({
      // add custom config here
    });
  };
</script>

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

Inside of the window.sentryOnLoad function, you can configure a custom Sentry.init() call. You can configure your SDK exactly the way you would if you were using the CDN, with one difference: your Sentry.init() call doesn't need to include your DSN, since it's already been set. Inside of this function, the full Sentry SDK is guaranteed to be loaded & available.

Copied
<script>
  // Configure sentryOnLoad before adding the Loader Script
  window.sentryOnLoad = function () {
    Sentry.init({
      release: " ... ",
      environment: " ... "
    });
    Sentry.setTag(...);
    // etc.
  };
</script>

By default, the loader will make sure you can call these functions directly on Sentry at any time, even if the SDK is not yet loaded:

  • Sentry.captureException()
  • Sentry.captureMessage()
  • Sentry.captureEvent()
  • Sentry.addBreadcrumb()
  • Sentry.withScope()
  • Sentry.showReportDialog()

If you want to call any other method when using the Loader, you have to guard it with Sentry.onLoad(). Any callback given to onLoad() will be called either immediately (if the SDK is already loaded), or later once the SDK has been loaded:

Copied
<script>
  window.sentryOnLoad = function () {
    Sentry.init({
      // ...
    });
  };
</script>

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

<script>
  // Guard against window.Sentry not being available, e.g. due to Ad-blockers
  window.Sentry &&
    Sentry.onLoad(function () {
      // Inside of this callback,
      // we guarantee that `Sentry` is fully loaded and all APIs are available
      const client = Sentry.getClient();
      // do something custom here
    });
</script>

When using the Loader Script with just errors, the script injects the SDK asynchronously. This means that only unhandled errors and unhandled promise rejections will be caught and buffered before the SDK is fully loaded. Specifically, capturing breadcrumb data will not be available until the SDK is fully loaded and initialized. To reduce the amount of time these features are unavailable, set data-lazy="no" or call forceLoad() as described above.

If you want to understand the inner workings of the loader itself, you can read the documented source code in all its glory over at the Sentry repository.

Because the loader script injects the actual SDK asynchronously to keep your pageload performance high, the SDK's tracing functionality is only available once the SDK is loaded and initialized. This means that if you e.g. have fetch calls right at the beginning of your application, they might not be traced. If this is a critical issue for you, you have two options to ensure that all your fetch calls are traced:

  • Initialize the SDK in window.sentryOnLoad as described in Custom Configuration. Then make your fetch call in the Sentry.onload callback.
    Example
    Copied
    <script>
      window.sentryOnLoad = function () {
        Sentry.init({
          // ...
        });
      };
    </script>
    
    <script
      src="https://js.sentry-cdn.com/examplePublicKey.min.js"
      crossorigin="anonymous"
    ></script>
    
    <script>
      Sentry.onLoad(function () {
        fetch("/api/users");
      });
    </script>
    
  • Use the CDN bundles instead of the Loader Script. This will ensure that the SDK is loaded synchronously, and that all your fetch calls are traced.

Sentry supports loading the JavaScript SDK from a CDN. Generally we suggest using our Loader instead. If you must use a CDN, see Available Bundles below.

To use Sentry for error and tracing, you can use the following bundle:

Copied
<script
  src="https://browser.sentry-cdn.com/9.34.0/bundle.tracing.min.js"
  integrity="sha384-cRQDJUZkpn4UvmWYrVsTWGTyulY9B4H5Tp2s75ZVjkIAuu1TIxzabF3TiyubOsQ8"
  crossorigin="anonymous"
></script>

To use Sentry for error and tracing, as well as for Session Replay, you can use the following bundle:

Copied
<script
  src="https://browser.sentry-cdn.com/9.34.0/bundle.tracing.replay.min.js"
  integrity="sha384-gHcGsjf15+oILUd/CRoMCbLIjr/uvLY+dIT3+olcPVFtghwoWJjtIHCrDMaOkdbN"
  crossorigin="anonymous"
></script>

To use Sentry for error monitoring, as well as for Session Replay, but not for tracing, you can use the following bundle:

Copied
<script
  src="https://browser.sentry-cdn.com/9.34.0/bundle.replay.min.js"
  integrity="sha384-lZ1G75zByMnlFeZydgHd7zf/yOUL0qCVrb20JP6GNSPaSDKnRCOcJp1V1WExXX4b"
  crossorigin="anonymous"
></script>

If you only use Sentry for error monitoring, and don't need performance tracing or replay functionality, you can use the following bundle:

Copied
<script
  src="https://browser.sentry-cdn.com/9.34.0/bundle.min.js"
  integrity="sha384-53P6MMkVn0DDaKYIzeUJsL4myy0ml1QVsErYuIdCyys2xCGn9wplX9qhVMmqnl/B"
  crossorigin="anonymous"
></script>

Once you've included the Sentry SDK bundle in your page, you can use Sentry in your own bundle:

Copied
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  // this assumes your build process replaces `process.env.npm_package_version` with a value
  release: "my-project-name@" + process.env.npm_package_version,
  integrations: [
    // If you use a bundle with tracing enabled, add the BrowserTracing integration
    Sentry.browserTracingIntegration(),
    // If you use a bundle with session replay enabled, add the Replay integration
    Sentry.replayIntegration(),
  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

Our CDN hosts a variety of bundles:

  • @sentry/browser with error monitoring only (named bundle.<modifiers>.js)
  • @sentry/browser with error and tracing (named bundle.tracing.<modifiers>.js)
  • @sentry/browser with error and session replay (named bundle.replay.<modifiers>.js)
  • @sentry/browser with error, tracing and session replay (named bundle.tracing.replay.<modifiers>.js)
  • each of the integrations in @sentry/integrations (named <integration-name>.<modifiers>.js)

Each bundle is offered in both ES6 and ES5 versions. Since v7 of the SDK, the bundles are ES6 by default. To use the ES5 bundle, add the .es5 modifier.

Each version has three bundle varieties:

  • minified (.min)
  • unminified (no .min), includes debug logging
  • minified with debug logging (.debug.min)

Bundles that include debug logging output more detailed log messages, which can be helpful for debugging problems. Make sure to enable debug to see debug messages in the console. Unminified and debug logging bundles have a greater bundle size than minified ones.

For example:

  • bundle.js is @sentry/browser, compiled to ES6 but not minified, with debug logging included (as it is for all unminified bundles)
  • rewriteframes.es5.min.js is the RewriteFrames integration, compiled to ES5 and minified, with no debug logging
  • bundle.tracing.es5.debug.min.js is @sentry/browser with tracing enabled, compiled to ES5 and minified, with debug logging included
FileIntegrity Checksum
browserprofiling.debug.min.jssha384-+Fr2d5u0JVDtfhAcbbXpLPMgswpbNpbncHx7dEQI1C3n8yXZC8erY0CLL5s9bsei
browserprofiling.jssha384-W4YRRfxxXuPUM/tM/OKgnDEKjxWTJL0YMi4enwsh8Mo38bg84gGIHlSyM++sxS+o
browserprofiling.min.jssha384-nTylKpk8+19GLDPiHIR4PAuxg8va4bfX7S2xYetC3vERnbQ0PVvRA7fLemk4GARX
bundle.debug.min.jssha384-9UrCov1I6GFDJ7ci3RAYmNUYV1qOtbihYZFfH80gC/meqp/qZCnliaRmLQJNmfMJ
bundle.feedback.debug.min.jssha384-3aMXcEvL3+MABFKAucXjM+bvHQlrAkrkFpOHZHWu9xF+ZzXghiuB7TvK8fsJjh8+
bundle.feedback.jssha384-G6ZrAx4dKdQjIKYMq7d3QQxWH34uz+M3Zd2n2nfbSmmhwj3I3rCh9jIozC7LM4p5
bundle.feedback.min.jssha384-qPUNGY/nJ3Ghbv28WVGa8wvno61di7gYLDw59TNl1jnTLYI0eZwLaZhCYTVvKz7+
bundle.jssha384-Q0bw3ANAijhuyI0woS1sZncb0XO0xBJe27YA0ynOwdLmk+LPWMQhM8B2nnkgYUrj
bundle.min.jssha384-OeXjkPMDAnxIgoEIBDnXWKhce+ctYZHJjn+VcfoEzUIV/YPFgf5sPIMT6Fr68nfq
bundle.replay.debug.min.jssha384-4y/h2ohKwdVPq3+dO3d+3xqrXcakDIuH3Gxlj6HvwKOSXCP9F0Gu/7+WZV8kAkT+
bundle.replay.jssha384-msmAyydBS6H8gQry7j5bzpJWH5JzrZ5Adp7wrmWYMhesY6t/AEsBIgQp/zNJajn1
bundle.replay.min.jssha384-1GmBZYPjprz8SnHRHngR1vD+kITPuIuD2nPPHl66G7GTcwvrO18vK9IR5BsYRung
bundle.tracing.debug.min.jssha384-4r3227n2bWN2BI2oNcW42oi8iQgeUxuGAnwA3px4oICnSPNpESYw+azb7zkb9gAx
bundle.tracing.jssha384-LFCuUZuJ9YFa8SOZkaMelcmY9gd9x63WTFRWNSMsTYChPBEgYzH/s9e1WC7Joe6H
bundle.tracing.min.jssha384-TR8N680qOm0pCmrHg2oG0fjpZYcpLanuLrMZck1DTR0NnaJjnqAPuCPI7pMJRmFp
bundle.tracing.replay.debug.min.jssha384-Aa/rLwNbbXcUDCer5oZX7+K0dw9tcQSKHWelEhivBk6vjxfJSvvHuxFcySMJDYcm
bundle.tracing.replay.feedback.debug.min.jssha384-Fk1YtTr4QjilwBRbKegtgBAlR2Cg+J0eGbWLzUcXapFU9Pso9MWTrxCAx6GkTrKn
bundle.tracing.replay.feedback.jssha384-AEYdYwPVz9jcruTt0+n68T2O4vrm80AcC7jk9Vrn1At9Ys+2QIOwNWZxgitlrUjT
bundle.tracing.replay.feedback.min.jssha384-Yy2UXIFrWRfe56w1BuJ8/pgltHwWyYP4Q7dYKueJ/c6RG8B/bPJmGv+TBTQSuTSv
bundle.tracing.replay.jssha384-33j2UBN6HDKPRAwD7GjzkSeWHiqP6RV+0wJeMLwSlG9GoPs+ZfUYGq4IPpJwJsPI
bundle.tracing.replay.min.jssha384-o9UXGQbKb76G6UNZasN50E5922I6aQx9CSzbN02knpjeqhcgl2Vi8SAlCUEqIa+0
captureconsole.debug.min.jssha384-R8TzqJK/a7Jt9GI7s8WZEMjP1EKXQnWxZ1KX8ldurEy9bADgZ2pE/TxqjPHusbAX
captureconsole.jssha384-TJbCsKmxUuKH45/zh3fCnEXw45FZmlDEhhR4b7GJ6pURod+ydWcS1yFOHZ5gnDHl
captureconsole.min.jssha384-Tdjuj6YqNhEbBKUV/4qaA9HfdUpY1SlEpjF6dyBCAgeQifd0as1sdCFq2TQ9IpnW
contextlines.debug.min.jssha384-umR6vZ8IltVZSl7PiwF07vSL/sv6mxeIrzFh77/RzGsjTN9QkJqg9SXRgiRvyLyN
contextlines.jssha384-ot49/9TfuzSpxLYWYQng1bqsEiGDRGqtZgcIEA6UPsBWLCp6Lesf1oUoOyPgav7C
contextlines.min.jssha384-F86p3wIoUcNEO2mxMzq2HmVxK1J6qryD7byTbJf/STYaCLmJhM/uKZPEjqbxJRYt
dedupe.debug.min.jssha384-YrP95Rg1dmdDHsImGWrAE36lX8cqhpVA6y9Htq31AlKyqc9fjrthlTOhEfXxSmsj
dedupe.jssha384-r0fTpgDbxlBo7/U/oYUjQmwDiH38/fuvQO2vCe0uLc01VnXxOhh9kn29M8fza2LN
dedupe.min.jssha384-p87AUJGTGj11TuX572qtHhHjItQwuUWAkIJi+KY1kf8iHqDBNOuA0ta55ZcYq0zB
extraerrordata.debug.min.jssha384-OZ5MskkRP293nOUUgrstwmDkamQxhKI75XpioL/L5ShKvgMI+RrlF1Mq1Csl9YPE
extraerrordata.jssha384-BoaFW8aU75hMYa+xZgaQ/k4+9lbUDxEKYRTEmFWnHlZ5jbN+/1CkTnjPSM3qJlJ2
extraerrordata.min.jssha384-11hE2gyt+dqQDRE4vAATitBCcB/lVKQ6Gd9xwpG1fgTS7v3kqHnaT9Dn9LcAqGPq
feedback-modal.debug.min.jssha384-VYji3VQt8x8fM0SDTwtuLsnNDA8FtiQ0cMJvuw/EL2sUKxqcpItbWYqvi+Iq05r7
feedback-modal.jssha384-snLeUvvcYlJLwimeu11inBbhzbMe0rrQ0LT+cixG1vC1hWV4bOzDGKJNyjElACTc
feedback-modal.min.jssha384-8Tn1zMUn2cw50tDkSJC82cL8KPbMOUCxLFy5vLZCjrd4hLGr1A9hEHrrPZcYT1BP
feedback-screenshot.debug.min.jssha384-fVwrzPUblk6XZPkpltcLchKRKUEL56EeKJu9yw/FZw62N8jvfLRQK6QoleCYEZks
feedback-screenshot.jssha384-gHTDXHr8jGXKF9C6Nm8JTt0yEAguY6kAvqkvH7GaI7VAWlcg5eshRSaNYatjEgwM
feedback-screenshot.min.jssha384-vhZqUxwaEFNc7NhYgeMlXD4rBi3WoMRkZwKtgttWxyQjvRnbtnqDoysj8zyOdQfD
feedback.debug.min.jssha384-557TJX6DTZSdAG4fgzqQAYwo25kvweo1uUDZel5lRxjqO25OJYn/VLoyRwcpRsDN
feedback.jssha384-9o5VlGG7zLtzceYHv+5jyIgV+yvXpRNB8abPhUvmbMHeLitczvHDQqk+1OzUNFnt
feedback.min.jssha384-EjapUQmJj/gaNlHec9kYJ71u9frII2mr6OHazVmlWtHDV33yqQFmMf60w6P3siYB
graphqlclient.debug.min.jssha384-wkrs0LcCXU07ffo9hY0cqUZtjs720Xy2KeXtyRs90b6nKQ2WYyJkX2SXmEbMdCHT
graphqlclient.jssha384-gIMvaAc3x1n7zoJUKMiehpJit0lsPPXLzbs4X0tNom8L5MlLAcnRyk7fYbvSY9H8
graphqlclient.min.jssha384-EWvMb8c+RXSleUkPBVhS4zdJYSX0PDzNQE6wC5A1AiDA4Id1FTfIjqBwL/YXiwZD
httpclient.debug.min.jssha384-T8rwd+hzV36maBESZW25Vhwxz3B56xBfXNuLHUNjfm92KWfB4Be4P64snCHUDf7B
httpclient.jssha384-l80mwxzKzTss49tQNClCOcakVGbNzAALAvkU/M52OA8pv/g2Tgz/cdlwuG7VNFFI
httpclient.min.jssha384-wXCF7WyGboKONtzjvYCTdD8fUebRnUCey6Bc53lcj6RhBxb+o7FHMW3BrSyy1DRv
modulemetadata.debug.min.jssha384-/I1DPgObCrBlD3tRuW6fDn/hJbHvTNZ7sXhkC7poo6x+WhylKSTp2mKDUOKFsi0K
modulemetadata.jssha384-zwni9s8RERvVFcfM7W12kYoCiq07V2VHNESKrjwTD2NsZxMjfciH2flweZpkZl05
modulemetadata.min.jssha384-baaCd6F0pY1xc7IQQZO4W/TKq9gYkbJ3r5dlQ2SycNDECOPKsPanuWjw1IYo+Pfl
multiplexedtransport.debug.min.jssha384-Q9E9MOA2K5plIRCw/tniqY5Ln1Zatjs/8k2BD3NijNgyBzbo+PQa4HNBqUqEDxpQ
multiplexedtransport.jssha384-Zq6at2WmowvFrcN/QbeD0LR2dZiHStLWDxpQGQQ8ZgBfbXqSffp4dyW0BjzNcoXE
multiplexedtransport.min.jssha384-7mzhfnKmjaRAUmjJiLNBRDpzc3OnuHwfYp0e1b9fGea1dXjJFZE9/dcExk1B+byj
replay-canvas.debug.min.jssha384-GaeHKhc36/lhwBO7QxGKEtAcE/V/lzN6xsVec+eEegkpXxRiFLyREOJ5J/Kg9SNe
replay-canvas.jssha384-C0aD3AWsQvkF31fAp/HEYfJdxpQhyo+K9uyLDwADd/VDL7c8kJMuhmCwHdgCiFtY
replay-canvas.min.jssha384-q9RpCEotYJcg/fSPrHphqmUrAril2u/FsLMvW946fh+ZSi/sJigmgRJ5IH6SDoLL
replay.debug.min.jssha384-FW3rYGmWLuEUNDpBmQ0mcIJAeewoF/cM6W1Bbc8AjPEWWcmlOPesB40oaIXRN16Q
replay.jssha384-y/WB+G3lXjnyDwRtOHZ9rP29Jte8Taj9plx65TMox2fIpSDXWEBaptzcF8edNptP
replay.min.jssha384-Z2dON7BgR2E+Il04K4u3XPDjoTt/uzkGeYsYKMG9kqBvjn2ATkHM3D7oQGg1eElE
reportingobserver.debug.min.jssha384-0ROtH0CDV5mbjGt9nlhmZvMffJBNB/wa12Cu59mmF5ei7f7Gc+LjZ5a1ZjmCH/uK
reportingobserver.jssha384-YVraQLYMcDNB10zgtESHX7XtgQYmpdLeAaCWA6tzgd8a/zYNVb6927+4Yg9f+qYp
reportingobserver.min.jssha384-MWk9Ep8AIovWmiOfs/boE+VRMMIseTj0I4iZwRDIn0hXw0MsFYBsJAKRoWloRpqV
rewriteframes.debug.min.jssha384-P/CP5LGnCtUfvL6ZSh3kfhndqW0gYEX+s/Q2Q6zlzzbBvSoPWR/df7aWfpATCcsx
rewriteframes.jssha384-rm8VKeNa8F8CVyNj19H5KRlrsWIibFAnuAIQ4rpP7khWiwdqbPWFT1qc5zCHpa6q
rewriteframes.min.jssha384-ElRU1aWERrkVL4amO1oq4zVdUPT7RcohfM7+YHy+Wd0BhW5Iu++yYfU5bNEs4Duv
spotlight.debug.min.jssha384-j0v4DGLXrMOAWfKu2ajcwka7UEoGmCTHrrHcghanXUnTFStBfzIa9Ug6p39SJ9PS
spotlight.jssha384-AUn9qQVkDWGNm7V5w68QA+CPkGPuSdHkB4h6u00jzhArDj4BhSy/Pfy0zS9O//Qa
spotlight.min.jssha384-eYnwJCVRvyICRj31FrcOyiW3MBtxGH7y+mjo6h2cTvNgWoy14/I22k9vVhlLjeTd

To find the integrity hashes for older SDK versions, you can view our SDK release registry for the Browser SDK here.

If you use the defer script attribute, we strongly recommend that you place the script tag for the browser SDK first and mark all of your other scripts with defer (but not async). This will guarantee that that the Sentry SDK is executed before any of the others.

Without doing this you will find that it's possible for errors to occur before Sentry is loaded, which means you'll be flying blind to those issues.

If you have a Content Security Policy (CSP) set up on your site, you will need to add the script-src of wherever you're loading the SDK from, and the origin of your DSN. For example:

  • script-src: https://browser.sentry-cdn.com https://js.sentry-cdn.com
  • connect-src: *.sentry.io
Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").