Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: extend guides in docs and add simpler way to enable Replay (#559)
- Loading branch information
Showing
17 changed files
with
218 additions
and
67 deletions.
There are no files selected for viewing
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
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
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
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,16 @@ | ||
| --- | ||
| title: Enriching Events | ||
| description: Enriching Reported Events | ||
| position: 21 | ||
| category: Guide | ||
| --- | ||
|
|
||
| Sentry SDK provides API for enhancing events that are being reported. For example, you can: | ||
| - set user information like IP address or username using `Sentry.setUser` API | ||
| - add custom structured data using `Sentry.setContext` API | ||
| - set custom key/value pairs (tags) that get indexed and can be used for filtering and searching using `Sentry.setTag` API | ||
| - add file attachments using `scope.addAttachment` API | ||
| - manually add breadcrumbs using `Sentry.addBreadcrumb` API | ||
| - and other... | ||
|
|
||
| Read more about [Enriching Events](https://docs.sentry.io/platforms/javascript/guides/vue/enriching-events/). |
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
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
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,20 @@ | ||
| --- | ||
| title: Performance Monitoring | ||
| description: Track performance metrics | ||
| position: 23 | ||
| category: Guide | ||
| --- | ||
|
|
||
| To automatically configure and enable performance monitoring, enable the [tracing](/configuration/options#tracing) option. | ||
|
|
||
| This enables various additional integrations for monitoring and instrumentation. On the client-side it enables [`BrowserTracing`](https://docs.sentry.io/platforms/javascript/guides/vue/performance/instrumentation/automatic-instrumentation/) and [`Vue Router Instrumentation`](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/vue-router/) integrations. On the server-side it enables the [`Http` and `tracingHandler`](https://docs.sentry.io/platforms/node/guides/express/performance/instrumentation/automatic-instrumentation/) integrations for tracing HTTP requests and `connect`/`express` routes. | ||
|
|
||
| See the description of the [tracing](/configuration/options#tracing) option if you want to customize some aspect of that functionality like the percentage of requests to capture. | ||
|
|
||
| <alert type="info"> | ||
|
|
||
| Note that the `tracesSampleRate` value can be between 0.0 and 1.0 (percentage of requests to capture) and Sentry documentation strongly recommends reducing the value from the default 1.0. | ||
|
|
||
| </alert> | ||
|
|
||
| See also Sentry's SDK [client](https://docs.sentry.io/platforms/javascript/guides/vue/performance/) and [server](https://docs.sentry.io/platforms/node/guides/express/performance/) Performance Monitoring pages for additional information about those integrations. |
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 @@ | ||
| --- | ||
| title: Session Replay | ||
| description: Record and replay user interactions that lead to an error | ||
| position: 24 | ||
| category: Guide | ||
| --- | ||
|
|
||
| Session Replay helps you get to the root cause of an error or latency issue faster by providing you with a video-like reproduction of what was happening in the user's browser before, during, and after the issue. | ||
|
|
||
| ### Setup | ||
|
|
||
| Session Replay comes as a separate integration that is not enabled by default. To enable it, add `Replay: {}` to the [`clientIntegrations`](/configuration/options#clientintegrations) option like so: | ||
|
|
||
| ```js [nuxt.config.js] | ||
| sentry: { | ||
| dsn: '...', | ||
| clientIntegrations: [ | ||
| Reply: {}, | ||
| ], | ||
| clientConfig: { | ||
| // 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, | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| You can customize integration options by passing them within the `{}` object. | ||
|
|
||
| <alert type="info"> | ||
|
|
||
| Note that the `replaysSessionSampleRate` and `replaysOnErrorSampleRate` options are part of the global client options and not options of the `Replay` integration itself. | ||
|
|
||
| </alert> | ||
|
|
||
| <alert type="info"> | ||
|
|
||
| Refer to the Sentry documentation below to make sure that Content Security Policy (CSP) is configured properly for allowing `Replay` integration to do its work. | ||
|
|
||
| </alert> | ||
|
|
||
| ### Documentation | ||
|
|
||
| See Sentry's [Session Replay](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/) pages for additional information. |
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
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,44 @@ | ||
| --- | ||
| title: User Feedback | ||
| description: A feedback dialog for providing additional user information | ||
| position: 25 | ||
| category: Guide | ||
| --- | ||
|
|
||
| When a user experiences an error, Sentry provides the ability to collect additional feedback through a feedback dialog. | ||
|
|
||
| ### Setup | ||
|
|
||
| `showReportDialog` is a function that should be called to trigger the User Feedback dialog. Due to how Nuxt works, we can't reference it directly from within Nuxt config as Sentry configuration is strinigified and the function reference does not survive that. We have to use the `clientConfig` option with a path to a custom client configuration that imports the function like so: | ||
|
|
||
| ```js [nuxt.config.js] | ||
| sentry: { | ||
| dsn: '...', | ||
| clientConfig: '~/config/sentry-client-config.js', | ||
| } | ||
| ``` | ||
|
|
||
| ```js [~/config/sentry-client-config.js] | ||
| import { showReportDialog } from '@sentry/vue' | ||
|
|
||
| export default function(context) { | ||
| return { | ||
| beforeSend (event, hint) { | ||
| if (event.exception) { | ||
| showReportDialog({ eventId: event.event_id }) | ||
| } | ||
| return event | ||
| }, | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| <alert type="info"> | ||
|
|
||
| The configuration provided through `clientConfig` is merged with the configuration provided in the Nuxt config so other configuration options can (but don't have to) be defined in Nuxt config. | ||
|
|
||
| </alert> | ||
|
|
||
| ### Documentation | ||
|
|
||
| See Sentry's [User Feedback](https://docs.sentry.io/platforms/javascript/guides/vue/enriching-events/user-feedback/) pages for additional information. |
Oops, something went wrong.