-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
replay: onboarding specific per sdk (#7883)
Co-authored-by: Shana Matthews <[email protected]>
- Loading branch information
1 parent
dca5dd3
commit b2d8bd4
Showing
24 changed files
with
549 additions
and
17 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
src/platform-includes/session-replay/install/javascript.angular.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
```bash {tabTitle:npm} | ||
# Angular 12 and newer: | ||
npm install --save @sentry/angular-ivy | ||
|
||
# Angular 10 and 11: | ||
npm install --save @sentry/angular | ||
``` | ||
|
||
```bash {tabTitle:Yarn} | ||
# Angular 12 and newer: | ||
yarn add @sentry/angular-ivy | ||
|
||
# Angular 10 and 11: | ||
yarn add @sentry/angular | ||
``` | ||
|
||
### Angular Version Compatibility | ||
|
||
Because of the way Angular libraries are compiled, you need to use a specific version of the Sentry SDK for each corresponding version of Angular as shown below: | ||
|
||
| Angular version | Recommended Sentry SDK | | ||
| --------------- | ---------------------- | | ||
| 12 and newer | `@sentry/angular-ivy` | | ||
| 10, 11 | `@sentry/angular` | |
16 changes: 13 additions & 3 deletions
16
src/platform-includes/session-replay/install/javascript.capacitor.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,17 @@ | ||
```bash {tabTitle: Yarn} | ||
yarn add @sentry/capacitor @sentry/replay | ||
Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using, such as Angular in this example: | ||
|
||
```bash {tabTitle:Angular} | ||
# npm | ||
npm install --save @sentry/capacitor @sentry/angular-ivy @sentry/replay | ||
|
||
# yarn | ||
yarn add @sentry/capacitor @sentry/angular-ivy @sentry/replay | ||
``` | ||
|
||
```html {tabTitle: npm} | ||
```bash {tabTitle:Other Frameworks} | ||
# npm | ||
npm install --save @sentry/capacitor @sentry/replay | ||
|
||
# yarn | ||
yarn add @sentry/capacitor @sentry/replay | ||
``` |
8 changes: 8 additions & 0 deletions
8
src/platform-includes/session-replay/install/javascript.electron.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,9 @@ | ||
The Replay integration is **already included** with the Electron SDK package. | ||
|
||
```bash {tabTitle: npm} | ||
npm install --save @sentry/electron | ||
``` | ||
|
||
```bash {tabTitle: Yarn} | ||
yarn add @sentry/electron | ||
``` |
3 changes: 3 additions & 0 deletions
3
src/platform-includes/session-replay/install/javascript.ember.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```bash {tabTitle:ember-cli} | ||
ember install @sentry/ember | ||
``` |
9 changes: 9 additions & 0 deletions
9
src/platform-includes/session-replay/install/javascript.gatsby.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
The Replay integration is **already included** with the Gatsby SDK package. | ||
|
||
```bash {tabTitle: npm} | ||
npm install --save @sentry/gatsby | ||
``` | ||
|
||
```bash {tabTitle: Yarn} | ||
yarn add @sentry/gatsby | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
src/platform-includes/session-replay/install/javascript.nextjs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: | ||
|
||
```bash | ||
npx @sentry/wizard@latest -i nextjs | ||
``` |
9 changes: 9 additions & 0 deletions
9
src/platform-includes/session-replay/install/javascript.react.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
The Replay integration is **already included** with the React SDK package. | ||
|
||
```bash {tabTitle:npm} | ||
npm install --save @sentry/react | ||
``` | ||
|
||
```bash {tabTitle:Yarn} | ||
yarn add @sentry/react | ||
``` |
23 changes: 23 additions & 0 deletions
23
src/platform-includes/session-replay/install/javascript.remix.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: | ||
|
||
```bash | ||
npx @sentry/wizard@latest -i remix | ||
``` | ||
|
||
The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: | ||
|
||
- create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). | ||
- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`. | ||
- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`). | ||
- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application. | ||
|
||
If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features. | ||
|
||
After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. | ||
You can also <PlatformLink to="/usage/">manually capture errors</PlatformLink>. | ||
|
||
<Note> | ||
|
||
If the wizard setup isn't working for you, you can <PlatformLink to="/manual-setup/">set up the SDK manually</PlatformLink>. | ||
|
||
</Note> |
9 changes: 9 additions & 0 deletions
9
src/platform-includes/session-replay/install/javascript.svelte.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
The Replay integration is **already included** with the Svelte SDK package. | ||
|
||
```bash {tabTitle:npm} | ||
npm install --save @sentry/svelte | ||
``` | ||
|
||
```bash {tabTitle:Yarn} | ||
yarn add @sentry/svelte | ||
``` |
22 changes: 22 additions & 0 deletions
22
src/platform-includes/session-replay/install/javascript.sveltekit.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
The Replay integration is already included with the Sentry SDK. We recommend installing the SDK by running our installation wizard in the root directory of your project: | ||
|
||
```bash | ||
npx @sentry/wizard@latest -i sveltekit | ||
``` | ||
|
||
The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: | ||
|
||
- create or update SvelteKit files with the default Sentry configuration: | ||
- `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) | ||
- `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins. | ||
- create a `.sentryclirc` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) | ||
- add an example page to your app to verify your Sentry setup | ||
|
||
After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. | ||
You can also <PlatformLink to="/usage/">manually capture errors</PlatformLink>. | ||
|
||
<Note> | ||
|
||
If the setup through the wizard doesn't work for you, you can also <PlatformLink to="/manual-setup/">set up the SDK manually</PlatformLink>. | ||
|
||
</Note> |
9 changes: 9 additions & 0 deletions
9
src/platform-includes/session-replay/install/javascript.vue.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
The Replay integration is **already included** with the Vue SDK package. | ||
|
||
```bash {tabTitle:npm} | ||
npm install --save @sentry/vue | ||
``` | ||
|
||
```bash {tabTitle:Yarn} | ||
yarn add @sentry/vue | ||
``` |
45 changes: 45 additions & 0 deletions
45
src/platform-includes/session-replay/setup/javascript.angular.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
```javascript | ||
import * as Sentry from "@sentry/angular-ivy"; | ||
|
||
Sentry.init({ | ||
dsn: "___PUBLIC_DSN___", | ||
|
||
// This sets the sample rate to be 10%. You may want this to be 100% while | ||
// in development and sample at a lower rate in production | ||
replaysSessionSampleRate: 0.1, | ||
|
||
// If the entire session is not sampled, use the below sample rate to sample | ||
// sessions when an error occurs. | ||
replaysOnErrorSampleRate: 1.0, | ||
|
||
integrations: [ | ||
new Sentry.Replay({ | ||
// Additional SDK configuration goes in here, for example: | ||
maskAllText: true, | ||
blockAllMedia: true, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
With the settings above, session replays with errors are always captured. | ||
You can verify that with the following: | ||
|
||
```javascript | ||
myUndefinedFunction(); | ||
``` | ||
|
||
### Lazy-loading Replay | ||
|
||
Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: | ||
|
||
```js | ||
Sentry.init({ | ||
// Note, Replay is NOT instantiated below: | ||
integrations: [], | ||
}); | ||
|
||
// Sometime later | ||
const { getCurrentHub, Replay } = await import("@sentry/angular-ivy"); | ||
getCurrentHub().getClient().addIntegration(new Replay()); | ||
``` |
8 changes: 0 additions & 8 deletions
8
src/platform-includes/session-replay/setup/javascript.electron.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
src/platform-includes/session-replay/setup/javascript.ember.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
```javascript | ||
import * as Sentry from "@sentry/ember"; | ||
|
||
Sentry.init({ | ||
dsn: "___PUBLIC_DSN___", | ||
|
||
// This sets the sample rate to be 10%. You may want this to be 100% while | ||
// in development and sample at a lower rate in production | ||
replaysSessionSampleRate: 0.1, | ||
|
||
// If the entire session is not sampled, use the below sample rate to sample | ||
// sessions when an error occurs. | ||
replaysOnErrorSampleRate: 1.0, | ||
|
||
integrations: [ | ||
new Sentry.Replay({ | ||
// Additional SDK configuration goes in here, for example: | ||
maskAllText: true, | ||
blockAllMedia: true, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
With the settings above, session replays with errors are always captured. | ||
You can verify that with the following: | ||
|
||
```javascript | ||
myUndefinedFunction(); | ||
``` | ||
|
||
### Lazy-loading Replay | ||
|
||
Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: | ||
|
||
```js | ||
Sentry.init({ | ||
// Note, Replay is NOT instantiated below: | ||
integrations: [], | ||
}); | ||
|
||
// Sometime later | ||
const { getCurrentHub, Replay } = await import("@sentry/ember"); | ||
getCurrentHub().getClient().addIntegration(new Replay()); | ||
``` |
45 changes: 45 additions & 0 deletions
45
src/platform-includes/session-replay/setup/javascript.gatsby.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
```javascript | ||
import * as Sentry from "@sentry/gatsby"; | ||
|
||
Sentry.init({ | ||
dsn: "___PUBLIC_DSN___", | ||
|
||
// This sets the sample rate to be 10%. You may want this to be 100% while | ||
// in development and sample at a lower rate in production | ||
replaysSessionSampleRate: 0.1, | ||
|
||
// If the entire session is not sampled, use the below sample rate to sample | ||
// sessions when an error occurs. | ||
replaysOnErrorSampleRate: 1.0, | ||
|
||
integrations: [ | ||
new Sentry.Replay({ | ||
// Additional SDK configuration goes in here, for example: | ||
maskAllText: true, | ||
blockAllMedia: true, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
With the settings above, session replays with errors are always captured. | ||
You can verify that with the following: | ||
|
||
```javascript | ||
myUndefinedFunction(); | ||
``` | ||
|
||
### Lazy-loading Replay | ||
|
||
Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: | ||
|
||
```js | ||
Sentry.init({ | ||
// Note, Replay is NOT instantiated below: | ||
integrations: [], | ||
}); | ||
|
||
// Sometime later | ||
const { getCurrentHub, Replay } = await import("@sentry/gatsby"); | ||
getCurrentHub().getClient().addIntegration(new Replay()); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
src/platform-includes/session-replay/setup/javascript.nextjs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
On your client-side NextJS app, add: | ||
|
||
```javascript | ||
import * as Sentry from "@sentry/nextjs"; | ||
|
||
Sentry.init({ | ||
dsn: "___PUBLIC_DSN___", | ||
|
||
// This sets the sample rate to be 10%. You may want this to be 100% while | ||
// in development and sample at a lower rate in production | ||
replaysSessionSampleRate: 0.1, | ||
|
||
// If the entire session is not sampled, use the below sample rate to sample | ||
// sessions when an error occurs. | ||
replaysOnErrorSampleRate: 1.0, | ||
|
||
integrations: [ | ||
new Sentry.Replay({ | ||
// Additional SDK configuration goes in here, for example: | ||
maskAllText: true, | ||
blockAllMedia: true, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
With the settings above, session replays with errors are always captured. | ||
You can verify that with the following: | ||
|
||
```javascript | ||
myUndefinedFunction(); | ||
``` | ||
|
||
### Lazy-loading Replay | ||
|
||
Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: | ||
|
||
```js | ||
Sentry.init({ | ||
// Note, Replay is NOT instantiated below: | ||
integrations: [], | ||
}); | ||
|
||
// Sometime later | ||
const { getCurrentHub, Replay } = await import("@sentry/nextjs"); | ||
getCurrentHub().getClient().addIntegration(new Replay()); | ||
``` |
Oops, something went wrong.
b2d8bd4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
sentry-docs – ./
sentry-docs-git-master.sentry.dev
sentry-docs.sentry.dev
docs.sentry.io