Skip to content

Commit 867c9a1

Browse files
mydeaCopilotandreiborza
authored
feat: Update CDN bundle & loader docs (#14774)
I noticed we had a few incorrect things in our loader/cdn docs: 1. Instructions to get to loader settings where not correct anymore 2. Instructions about es5 bundles where incorrect (they no longer exist) 3. We missed a few bundles/I updated some things to be more up-to-date, including feedback as well. --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Andrei <[email protected]>
1 parent cd32d62 commit 867c9a1

File tree

1 file changed

+28
-13
lines changed
  • docs/platforms/javascript/common/install

1 file changed

+28
-13
lines changed

docs/platforms/javascript/common/install/loader.mdx

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ The Loader Script is the easiest way to initialize the Sentry SDK. The Loader Sc
4141

4242
## Using the Loader
4343

44-
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.
44+
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.
4545

4646
```html
4747
<script
@@ -63,11 +63,11 @@ The loader has a few configuration options:
6363
- What version of the SDK to load
6464
- Using Tracing
6565
- Using Session Replay
66-
- Showing debug logs
66+
- Enabling SDK debugging
6767

6868
### SDK Version
6969

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

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

@@ -171,6 +171,7 @@ By default, the loader will make sure you can call these functions directly on `
171171
- `Sentry.showReportDialog()`
172172

173173
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:
174+
174175
```html
175176
<script>
176177
window.sentryOnLoad = function () {
@@ -238,7 +239,19 @@ Please be aware that both of these options will add delay to your `fetch` calls
238239

239240
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.
240241

241-
## Default Bundle
242+
## Full Bundle
243+
244+
To use all Sentry features, including error monitoring, tracing, [Session Replay](../../session-replay), and [User Feedback](../../user-feedback), you can use the following bundle:
245+
246+
```html {tabTitle: CDN}
247+
<script
248+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.replay.feedback.min.js"
249+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.replay.feedback.min.js', 'sha384-base64') }}"
250+
crossorigin="anonymous"
251+
></script>
252+
```
253+
254+
## Performance Bundle
242255

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

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

277290
## Errors-only Bundle
278291

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

281294
```html {tabTitle: CDN}
282295
<script
@@ -315,13 +328,16 @@ Sentry.init({
315328

316329
Our CDN hosts a variety of bundles:
317330

318-
- `@sentry/browser` with error monitoring only (named `bundle.<modifiers>.js`)
319-
- `@sentry/browser` with error and tracing (named `bundle.tracing.<modifiers>.js`)
320-
- `@sentry/browser` with error and session replay (named `bundle.replay.<modifiers>.js`)
321-
- `@sentry/browser` with error, tracing and session replay (named `bundle.tracing.replay.<modifiers>.js`)
322-
- each of the integrations in `@sentry/integrations` (named `<integration-name>.<modifiers>.js`)
331+
- `bundle.<modifiers>.js` is `@sentry/browser` with error monitoring only
332+
- `bundle.tracing.<modifiers>.js` is `@sentry/browser` with error and tracing
333+
- `bundle.replay.<modifiers>.js` is `@sentry/browser` with error and session replay
334+
- `bundle.feedback.<modifiers>.js` is `@sentry/browser` with error and user feedback
335+
- `bundle.tracing.replay.<modifiers>.js` is `@sentry/browser` with error, tracing and session replay
336+
- `bundle.tracing.replay.feedback.<modifiers>.js` is `@sentry/browser` with error, tracing, session replay and user feedback
337+
338+
Additionally, each of the integrations in `@sentry/integrations` is available as a bundle named `<integration-name>.<modifiers>.js`.
323339

324-
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.
340+
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.
325341

326342
Each version has three bundle varieties:
327343

@@ -335,8 +351,7 @@ Unminified and debug logging bundles have a greater bundle size than minified on
335351
For example:
336352

337353
- `bundle.js` is `@sentry/browser`, compiled to ES6 but not minified, with debug logging included (as it is for all unminified bundles)
338-
- `rewriteframes.es5.min.js` is the `RewriteFrames` integration, compiled to ES5 and minified, with no debug logging
339-
- `bundle.tracing.es5.debug.min.js` is `@sentry/browser` with tracing enabled, compiled to ES5 and minified, with debug logging included
354+
- `bundle.tracing.debug.min.js` is `@sentry/browser` with tracing enabled, minified, with sdk debug logging included
340355

341356
<JsBundleList />
342357

0 commit comments

Comments
 (0)