Skip to content

feat(replay): Update replay CDN usage docs #6088

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 19, 2023
Merged
Show file tree
Hide file tree
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
14 changes: 2 additions & 12 deletions src/platform-includes/session-replay/install/javascript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,10 @@ yarn add @sentry/browser
```

```html {tabTitle: CDN}
<!--
Note that the Replay bundle only contains the Replay integration and not the
entire Sentry SDK. You have to add it in addition to the Sentry Browser SDK bundle:
-->

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

<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/replay.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'replay.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>
```
42 changes: 27 additions & 15 deletions src/platforms/javascript/common/install/cdn.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,43 @@ import JsBundleList from "~src/components/jsBundleList";

Sentry supports loading the JavaScript SDK from a CDN. Generally we suggest using our npm package (`@sentry/browser`) instead, as using the CDN can create scenarios where Sentry is unable to load due to networking issues or common extensions like ad blockers. If you _must_ use a CDN, take a look at [loading Sentry lazily with our JS loader](../lazy-load-sentry/), which provides a deferred version of our minified ES5 browser bundle. To see what other bundles are available, see [Available Bundles](#available-bundles) below.

## Default Bundle

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

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

<Alert level="info" title="Updates to naming scheme in SDK version 7">
## Performance & Replay Bundle

Version 7 of the Sentry JavaScript SDKs changed the bundles to be ES6 by default.
Previously, the default bundles were compiled to ES5. If you need to support ES5, see [Available Bundles](#available-bundles) or the [Migration Guide to Version 7](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md#upgrading-from-6x-to-7x).
To use Sentry for error and performance monitoring, as well as for [Session Replay](../../session-replay), you can use the following bundle:

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

## Performance Bundle
## Errors-only Bundle

To use Sentry's performance tracing, an alternative bundle is needed. This allows us to keep the filesize down for users who only need error monitoring.
If you only use Sentry for error monitoring, and don't need performance tracing or replay functionality, you can use the following bundle:

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

<Note>

You only need to load `bundle.tracing.min.js`, which provides both error and performance monitoring. There is also an ES5 version of the tracing bundle, `bundle.tracing.es5.min.js`.

</Note>
## Usage & Configuration

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

Expand Down Expand Up @@ -72,6 +77,13 @@ For example:
- `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` and `@sentry/tracing` bundled together, compiled to ES5 and minified, with debug logging included

<Alert level="info" title="Updates to naming scheme in SDK version 7">

Version 7 of the Sentry JavaScript SDKs changed the bundles to be ES6 by default.
Previously, the default bundles were compiled to ES5. If you need to support ES5, see [Available Bundles](#available-bundles) or the [Migration Guide to Version 7](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md#upgrading-from-6x-to-7x).

</Alert>

<JsBundleList />

## Additional Configuration
Expand Down