Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 28 additions & 13 deletions docs/platforms/javascript/common/install/loader.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The Loader Script is the easiest way to initialize the Sentry SDK. The Loader Sc

## Using the Loader

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.
To use the loader, go in the Sentry UI to **Settings > Projects > (select project) > SDK Setup > Loader Script**. Copy the script tag 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.

```html
<script
Expand All @@ -63,11 +63,11 @@ The loader has a few configuration options:
- What version of the SDK to load
- Using Tracing
- Using Session Replay
- Showing debug logs
- Enabling SDK debugging

### SDK Version

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

![JavaScript Loader Settings](./img/js-loader-settings.png)

Expand Down Expand Up @@ -171,6 +171,7 @@ By default, the loader will make sure you can call these functions directly on `
- `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:

```html
<script>
window.sentryOnLoad = function () {
Expand Down Expand Up @@ -238,7 +239,19 @@ Please be aware that both of these options will add delay to your `fetch` calls

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](#available-bundles) below.

## Default Bundle
## Full Bundle

To use all Sentry features, including error monitoring, tracing, [Session Replay](../../session-replay), and [User Feedback](../../user-feedback), you can use the following bundle:

```html {tabTitle: CDN}
<script
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.replay.feedback.min.js"
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.replay.feedback.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>
```

## Performance Bundle

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

Expand Down Expand Up @@ -276,7 +289,7 @@ To use Sentry for error monitoring, as well as for [Session Replay](../../sessio

## Errors-only Bundle

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

```html {tabTitle: CDN}
<script
Expand Down Expand Up @@ -315,13 +328,16 @@ Sentry.init({

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`)
- `bundle.<modifiers>.js` is `@sentry/browser` with error monitoring only
- `bundle.tracing.<modifiers>.js` is `@sentry/browser` with error and tracing
- `bundle.replay.<modifiers>.js` is `@sentry/browser` with error and session replay
- `bundle.feedback.<modifiers>.js` is `@sentry/browser` with error and user feedback
- `bundle.tracing.replay.<modifiers>.js` is `@sentry/browser` with error, tracing and session replay
- `bundle.tracing.replay.feedback.<modifiers>.js` is `@sentry/browser` with error, tracing, session replay and user feedback

Additionally, each of the integrations in `@sentry/integrations` is available as a bundle 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.
Since v8 of the SDK, the bundles are ES6 by default. If you need ES5 support, make sure to add a polyfill for ES5 features yourself. Alternatively, you can use the v7 bundles and add the `.es5` modifier.

Each version has three bundle varieties:

Expand All @@ -335,8 +351,7 @@ Unminified and debug logging bundles have a greater bundle size than minified on
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
- `bundle.tracing.debug.min.js` is `@sentry/browser` with tracing enabled, minified, with sdk debug logging included

<JsBundleList />

Expand Down