diff --git a/src/gatsby/onPostBuild.ts b/src/gatsby/onPostBuild.ts index 9914fb833eeb4c..3f8a5dc979e92e 100644 --- a/src/gatsby/onPostBuild.ts +++ b/src/gatsby/onPostBuild.ts @@ -45,11 +45,6 @@ export default async function onPostBuild({graphql}) { frontmatter { name doc_link - wizard_setup { - childMarkdownRemark { - html - } - } support_level type } @@ -108,13 +103,13 @@ const parsePathSlug = (slug: string) => { }; } - if (slug.includes('/react/') && slug !== '/javascript/react/') { + if (slug.match('^/javascript/([A-Za-z]+)/(.*?)/$')) { const pathMatch = slug.match( /^\/(?[^/]+)\/(?[^/]+)\/(?index|with-error-monitoring|with-error-monitoring-and-performance|with-error-monitoring-and-replay|with-error-monitoring-performance-and-replay)\/$/ ); if (!pathMatch) { - throw new Error(`Unable to parse react doc paths from slug: ${slug}`); + throw new Error(`Unable to parse javascript doc paths from slug: ${slug}`); } const {platform, product, sub_platform} = pathMatch.groups; @@ -126,6 +121,7 @@ const parsePathSlug = (slug: string) => { } const pathMatch = slug.match(/^\/([^/]+)(?:\/([^/]+))?\/$/); + if (!pathMatch) { throw new Error('cant identify language'); } diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 83ad13f92a236c..c62ad63d4c92ae 100644 --- a/src/platform-includes/getting-started-config/javascript.vue.mdx +++ b/src/platform-includes/getting-started-config/javascript.vue.mdx @@ -19,7 +19,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% @@ -56,7 +55,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx index 55dbd862efaae3..7c062cb40a3cac 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.electron.mdx @@ -9,12 +9,7 @@ import * as Sentry from "@sentry/electron/renderer"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx index 2dd1fe2dbe7b81..d8898c768e71f7 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -5,17 +5,12 @@ After configuration, you will see both `pageload` and `navigation` transactions ```javascript // If you're using one of our framework SDK packages, like `@sentry/angular`, // substitute its name for `@sentry/browser` here -import * as Sentry from "@sentry/browser"; +import * as Sentry from '@sentry/browser'; Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', - integrations: [ - new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], + integrations: [new Sentry.BrowserTracing()], // We recommend adjusting this value in production, or using tracesSampler // for finer control diff --git a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx index 11ea14dd940a53..d29eb7dcb63d30 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx @@ -15,11 +15,8 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - // Can also use reactRouterV3Instrumentation or reactRouterV4Instrumentation routingInstrumentation: Sentry.reactRouterV5Instrumentation(history), - // ... other options }), ], diff --git a/src/platform-includes/performance/enable-tracing/react-native.mdx b/src/platform-includes/performance/enable-tracing/react-native.mdx index 2466e0870fd8f3..e9e145b3f410e3 100644 --- a/src/platform-includes/performance/enable-tracing/react-native.mdx +++ b/src/platform-includes/performance/enable-tracing/react-native.mdx @@ -10,11 +10,6 @@ import * as Sentry from "@sentry/react-native"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.ReactNativeTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], + integrations: [new Sentry.ReactNativeTracing()], }); ``` diff --git a/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx b/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx index c3fb309ca521de..9ca667f20a0fc7 100644 --- a/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx +++ b/src/platforms/react-native/performance/instrumentation/automatic-instrumentation.mdx @@ -352,12 +352,7 @@ import * as Sentry from "@sentry/react-native"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.ReactNativeTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - // ... other options - }), - ], + integrations: [new Sentry.ReactNativeTracing()], }); ``` diff --git a/src/wizard/javascript/angular.md b/src/wizard/javascript/angular/index.md similarity index 100% rename from src/wizard/javascript/angular.md rename to src/wizard/javascript/angular/index.md diff --git a/src/wizard/javascript/angular/with-error-monitoring-and-performance.md b/src/wizard/javascript/angular/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..c258710673b23b --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-and-performance.md @@ -0,0 +1,108 @@ +--- +name: Angular +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/ +support_level: production +type: framework +--- + +## Install + +To use Sentry with your Angular application, you'll need `@sentry/angular-ivy` or `@sentry/angular`, Sentry’s Browser Angular SDKs: + +- If you're using Angular 12 or newer, use `@sentry/angular-ivy` +- If you're using Angular 10 or 11, use `@sentry/angular` + +Add the Sentry SDK as a dependency using `yarn` or `npm`: + +```bash +# Using yarn (Angular 12+) +yarn add @sentry/angular-ivy +# Using yarn (Angular 10 and 11) +yarn add @sentry/angular + +# Using npm (Angular 12+) +npm install --save @sentry/angular-ivy +# Using npm (Angular 10 and 11) +npm install --save @sentry/angular +``` + +## Configure + +You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: + +```javascript +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +import {AppModule} from './app/app.module'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.routingInstrumentation, + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +enableProdMode(); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(success => console.log(`Bootstrap success`)) + .catch(err => console.error(err)); +``` + +### ErrorHandler and Tracer + +The Sentry Angular SDK exports a function to instantiate `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. + +```javascript +import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core'; +import {Router} from '@angular/router'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +@NgModule({ + // ... + providers: [ + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler({ + showDialog: true, + }), + }, + { + provide: Sentry.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [Sentry.TraceService], + multi: true, + }, + ], + // ... +}) +export class AppModule {} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Angular Features](https://docs.sentry.io/platforms/javascript/guides/angular/features/): Learn about our first class integration with the Angular framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/angular/with-error-monitoring-and-replay.md b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..c97d85454575d3 --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md @@ -0,0 +1,95 @@ +--- +name: Angular +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/ +support_level: production +type: framework +--- + +## Install + +To use Sentry with your Angular application, you'll need `@sentry/angular-ivy` or `@sentry/angular`, Sentry’s Browser Angular SDKs: + +- If you're using Angular 12 or newer, use `@sentry/angular-ivy` +- If you're using Angular 10 or 11, use `@sentry/angular` + +Add the Sentry SDK as a dependency using `yarn` or `npm`: + +```bash +# Using yarn (Angular 12+) +yarn add @sentry/angular-ivy +# Using yarn (Angular 10 and 11) +yarn add @sentry/angular + +# Using npm (Angular 12+) +npm install --save @sentry/angular-ivy +# Using npm (Angular 10 and 11) +npm install --save @sentry/angular +``` + +## Configure + +You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: + +```javascript +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +import {AppModule} from './app/app.module'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +enableProdMode(); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(success => console.log(`Bootstrap success`)) + .catch(err => console.error(err)); +``` + +### ErrorHandler + +The Sentry Angular SDK exports a function to instantiate `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. + +```javascript +import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core'; +import {Router} from '@angular/router'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +@NgModule({ + // ... + providers: [ + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler({ + showDialog: true, + }), + }, + ], + // ... +}) +export class AppModule {} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Angular Features](https://docs.sentry.io/platforms/javascript/guides/angular/features/): Learn about our first class integration with the Angular framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/angular/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..bc33b2687207ff --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,111 @@ +--- +name: Angular +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/ +support_level: production +type: framework +--- + +## Install + +To use Sentry with your Angular application, you'll need `@sentry/angular-ivy` or `@sentry/angular`, Sentry’s Browser Angular SDKs: + +- If you're using Angular 12 or newer, use `@sentry/angular-ivy` +- If you're using Angular 10 or 11, use `@sentry/angular` + +Add the Sentry SDK as a dependency using `yarn` or `npm`: + +```bash +# Using yarn (Angular 12+) +yarn add @sentry/angular-ivy +# Using yarn (Angular 10 and 11) +yarn add @sentry/angular + +# Using npm (Angular 12+) +npm install --save @sentry/angular-ivy +# Using npm (Angular 10 and 11) +npm install --save @sentry/angular +``` + +## Configure + +You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: + +```javascript +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +import {AppModule} from './app/app.module'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.routingInstrumentation, + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +enableProdMode(); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(success => console.log(`Bootstrap success`)) + .catch(err => console.error(err)); +``` + +### ErrorHandler and Tracer + +The Sentry Angular SDK exports a function to instantiate `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. + +```javascript +import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core'; +import {Router} from '@angular/router'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +@NgModule({ + // ... + providers: [ + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler({ + showDialog: true, + }), + }, + { + provide: Sentry.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [Sentry.TraceService], + multi: true, + }, + ], + // ... +}) +export class AppModule {} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Angular Features](https://docs.sentry.io/platforms/javascript/guides/angular/features/): Learn about our first class integration with the Angular framework. diff --git a/src/wizard/javascript/angular/with-error-monitoring.md b/src/wizard/javascript/angular/with-error-monitoring.md new file mode 100644 index 00000000000000..d2fa6805de2889 --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring.md @@ -0,0 +1,92 @@ +--- +name: Angular +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/ +support_level: production +type: framework +--- + +## Install + +To use Sentry with your Angular application, you'll need `@sentry/angular-ivy` or `@sentry/angular`, Sentry’s Browser Angular SDKs: + +- If you're using Angular 12 or newer, use `@sentry/angular-ivy` +- If you're using Angular 10 or 11, use `@sentry/angular` + +Add the Sentry SDK as a dependency using `yarn` or `npm`: + +```bash +# Using yarn (Angular 12+) +yarn add @sentry/angular-ivy +# Using yarn (Angular 10 and 11) +yarn add @sentry/angular + +# Using npm (Angular 12+) +npm install --save @sentry/angular-ivy +# Using npm (Angular 10 and 11) +npm install --save @sentry/angular +``` + +## Configure + +You should `init` the Sentry browser SDK in your `main.ts` file as soon as possible during application load up, before initializing Angular: + +```javascript +import {enableProdMode} from '@angular/core'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +import {AppModule} from './app/app.module'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', +}); + +enableProdMode(); +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(success => console.log(`Bootstrap success`)) + .catch(err => console.error(err)); +``` + +### ErrorHandler + +The Sentry Angular SDK exports a function to instantiate `ErrorHandler` provider that will automatically send JavaScript errors captured by the Angular's error handler. + +```javascript +import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core'; +import {Router} from '@angular/router'; +// import * as Sentry from "@sentry/angular" // for Angular 10/11 instead +import * as Sentry from '@sentry/angular-ivy'; + +@NgModule({ + // ... + providers: [ + { + provide: ErrorHandler, + useValue: Sentry.createErrorHandler({ + showDialog: true, + }), + }, + ], + // ... +}) +export class AppModule {} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Angular Features](https://docs.sentry.io/platforms/javascript/guides/angular/features/): Learn about our first class integration with the Angular framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/angular/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/angularjs.md b/src/wizard/javascript/angularjs/index.md similarity index 100% rename from src/wizard/javascript/angularjs.md rename to src/wizard/javascript/angularjs/index.md diff --git a/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..d0d21dc56e02f1 --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md @@ -0,0 +1,59 @@ +--- +name: AngularJS +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/angular1/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser @sentry/integrations + +# Using npm +npm install --save @sentry/browser @sentry/integrations +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +```javascript +import angular from 'angular'; +import * as Sentry from '@sentry/browser'; +import {Angular as AngularIntegration} from '@sentry/integrations'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [ + new AngularIntegration(), + new Sentry.BrowserTracing({ + tracePropagationTargets: ['localhost', 'https://yourserver.io/api'], + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +// Finally require ngSentry as a dependency in your application module. +angular.module('yourApplicationModule', ['ngSentry']); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [AngularJS Features](https://docs.sentry.io/platforms/javascript/guides/angular/angular1/): Learn about our first class integration with the AngularJS framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md b/src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..dd9cb3374fe868 --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md @@ -0,0 +1,55 @@ +--- +name: AngularJS +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/angular1/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser @sentry/integrations + +# Using npm +npm install --save @sentry/browser @sentry/integrations +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +```javascript +import angular from 'angular'; +import * as Sentry from '@sentry/browser'; +import {Angular as AngularIntegration} from '@sentry/integrations'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new AngularIntegration(), new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +// Finally require ngSentry as a dependency in your application module. +angular.module('yourApplicationModule', ['ngSentry']); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [AngularJS Features](https://docs.sentry.io/platforms/javascript/guides/angular/angular1/): Learn about our first class integration with the AngularJS framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/angular/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..b533ec2133f99c --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,62 @@ +--- +name: AngularJS +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/angular1/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser @sentry/integrations + +# Using npm +npm install --save @sentry/browser @sentry/integrations +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +```javascript +import angular from 'angular'; +import * as Sentry from '@sentry/browser'; +import {Angular as AngularIntegration} from '@sentry/integrations'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [ + new AngularIntegration(), + new Sentry.BrowserTracing({ + tracePropagationTargets: ['localhost', 'https://yourserver.io/api'], + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +// Finally require ngSentry as a dependency in your application module. +angular.module('yourApplicationModule', ['ngSentry']); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [AngularJS Features](https://docs.sentry.io/platforms/javascript/guides/angular/angular1/): Learn about our first class integration with the AngularJS framework. diff --git a/src/wizard/javascript/angularjs/with-error-monitoring.md b/src/wizard/javascript/angularjs/with-error-monitoring.md new file mode 100644 index 00000000000000..a5b7ca7a5c73e3 --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring.md @@ -0,0 +1,52 @@ +--- +name: AngularJS +doc_link: https://docs.sentry.io/platforms/javascript/guides/angular/angular1/ +support_level: production +type: framework +--- + +## Install +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser @sentry/integrations + +# Using npm +npm install --save @sentry/browser @sentry/integrations +``` + +## Configure +Initialize Sentry as early as possible in your application's lifecycle. + +```javascript +import angular from "angular"; +import * as Sentry from "@sentry/browser"; +import { Angular as AngularIntegration } from "@sentry/integrations"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + new AngularIntegration(), + tracePropagationTargets: ["localhost", "https://yourserver.io/api"], + }), + ], +}); + +// Finally require ngSentry as a dependency in your application module. +angular.module("yourApplicationModule", ["ngSentry"]); +``` + +## Verify +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- +## Next Steps +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [AngularJS Features](https://docs.sentry.io/platforms/javascript/guides/angular/angular1/): Learn about our first class integration with the AngularJS framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/angular/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/backbone.md b/src/wizard/javascript/backbone/index.md similarity index 100% rename from src/wizard/javascript/backbone.md rename to src/wizard/javascript/backbone/index.md diff --git a/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md b/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..ba0cff27c4709d --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md @@ -0,0 +1,48 @@ +--- +name: Backbone +doc_link: https://docs.sentry.io/platforms/javascript/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser +# Using npm +npm install --save @sentry/browser +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application: + +```javascript +import * as Sentry from '@sentry/browser'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/backbone/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Backbone Features](https://docs.sentry.io/platforms/javascript/guides/backbone/features/): Learn about our first class integration with the Backbone framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/backbone/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..804871f8e105f3 --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md @@ -0,0 +1,49 @@ +--- +name: Backbone +doc_link: https://docs.sentry.io/platforms/javascript/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser +# Using npm +npm install --save @sentry/browser +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application: + +```javascript +import * as Sentry from '@sentry/browser'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/backbone/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Backbone Features](https://docs.sentry.io/platforms/javascript/guides/backbone/features/): Learn about our first class integration with the Backbone framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/backbone/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..0892b0e72b2a35 --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,50 @@ +--- +name: Backbone +doc_link: https://docs.sentry.io/platforms/javascript/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser +# Using npm +npm install --save @sentry/browser +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application: + +```javascript +import * as Sentry from '@sentry/browser'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/backbone/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Backbone Features](https://docs.sentry.io/platforms/javascript/guides/backbone/features/): Learn about our first class integration with the Backbone framework. diff --git a/src/wizard/javascript/backbone/with-error-monitoring.md b/src/wizard/javascript/backbone/with-error-monitoring.md new file mode 100644 index 00000000000000..0e4d16e1665543 --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring.md @@ -0,0 +1,46 @@ +--- +name: Backbone +doc_link: https://docs.sentry.io/platforms/javascript/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/browser +# Using npm +npm install --save @sentry/browser +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application: + +```javascript +import * as Sentry from "@sentry/browser"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/backbone/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Backbone Features](https://docs.sentry.io/platforms/javascript/guides/backbone/features/): Learn about our first class integration with the Backbone framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/backbone/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/backbone/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/ember.md b/src/wizard/javascript/ember/index.md similarity index 100% rename from src/wizard/javascript/ember.md rename to src/wizard/javascript/ember/index.md diff --git a/src/wizard/javascript/ember/with-error-monitoring-and-performance.md b/src/wizard/javascript/ember/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..a08eff8bf1814a --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring-and-performance.md @@ -0,0 +1,57 @@ +--- +name: Ember +doc_link: https://docs.sentry.io/platforms/javascript/guides/ember/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using ember-cli +ember install @sentry/ember +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application load up in `app.js`, before initializing Ember: + +```javascript +import Application from '@ember/application'; +import Resolver from 'ember-resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +import * as Sentry from '@sentry/ember'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/ember/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Ember Features](https://docs.sentry.io/platforms/javascript/guides/ember/features/): Learn about our first class integration with the Ember framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/ember/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/ember/with-error-monitoring-and-replay.md b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..54f5ace3023db4 --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md @@ -0,0 +1,58 @@ +--- +name: Ember +doc_link: https://docs.sentry.io/platforms/javascript/guides/ember/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using ember-cli +ember install @sentry/ember +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application load up in `app.js`, before initializing Ember: + +```javascript +import Application from '@ember/application'; +import Resolver from 'ember-resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +import * as Sentry from '@sentry/ember'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/ember/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Ember Features](https://docs.sentry.io/platforms/javascript/guides/ember/features/): Learn about our first class integration with the Ember framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/ember/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..974055506b930a --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,59 @@ +--- +name: Ember +doc_link: https://docs.sentry.io/platforms/javascript/guides/ember/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using ember-cli +ember install @sentry/ember +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application load up in `app.js`, before initializing Ember: + +```javascript +import Application from '@ember/application'; +import Resolver from 'ember-resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +import * as Sentry from '@sentry/ember'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/ember/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Ember Features](https://docs.sentry.io/platforms/javascript/guides/ember/features/): Learn about our first class integration with the Ember framework. diff --git a/src/wizard/javascript/ember/with-error-monitoring.md b/src/wizard/javascript/ember/with-error-monitoring.md new file mode 100644 index 00000000000000..a42a9d4bb25313 --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring.md @@ -0,0 +1,55 @@ +--- +name: Ember +doc_link: https://docs.sentry.io/platforms/javascript/guides/ember/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using ember-cli +ember install @sentry/ember +``` + +## Configure + +You should `init` the Sentry SDK as soon as possible during your application load up in `app.js`, before initializing Ember: + +```javascript +import Application from "@ember/application"; +import Resolver from "ember-resolver"; +import loadInitializers from "ember-load-initializers"; +import config from "./config/environment"; + +import * as Sentry from "@sentry/ember"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", +}); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/ember/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Ember Features](https://docs.sentry.io/platforms/javascript/guides/ember/features/): Learn about our first class integration with the Ember framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/ember/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/ember/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/gatsby.md b/src/wizard/javascript/gatsby/index.md similarity index 100% rename from src/wizard/javascript/gatsby.md rename to src/wizard/javascript/gatsby/index.md diff --git a/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md b/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..ea5fabdf7948ff --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md @@ -0,0 +1,61 @@ +--- +name: Gatsby +doc_link: https://docs.sentry.io/platforms/javascript/guides/gatsby/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/gatsby + +# Using npm +npm install --save @sentry/gatsby +``` + +## Configure + +Register the `@sentry/gatsby` plugin in your Gatsby configuration file (typically `gatsby-config.js`). + +```javascript {filename:gatsby-config.js} +module.exports = { + plugins: [ + { + resolve: '@sentry/gatsby', + }, + ], +}; +``` + +Then, configure your `Sentry.init`: + +```javascript {filename:sentry.config.js} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/gatsby/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Gatsby Features](https://docs.sentry.io/platforms/javascript/guides/gatsby/features/): Learn about our first class integration with the Gatsby framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md b/src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..ee7604a0a8d591 --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md @@ -0,0 +1,62 @@ +--- +name: Gatsby +doc_link: https://docs.sentry.io/platforms/javascript/guides/gatsby/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/gatsby + +# Using npm +npm install --save @sentry/gatsby +``` + +## Configure + +Register the `@sentry/gatsby` plugin in your Gatsby configuration file (typically `gatsby-config.js`). + +```javascript {filename:gatsby-config.js} +module.exports = { + plugins: [ + { + resolve: '@sentry/gatsby', + }, + ], +}; +``` + +Then, configure your `Sentry.init`: + +```javascript {filename:sentry.config.js} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/gatsby/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Gatsby Features](https://docs.sentry.io/platforms/javascript/guides/gatsby/features/): Learn about our first class integration with the Gatsby framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/gatsby/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..b241da6038e9b2 --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,63 @@ +--- +name: Gatsby +doc_link: https://docs.sentry.io/platforms/javascript/guides/gatsby/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/gatsby + +# Using npm +npm install --save @sentry/gatsby +``` + +## Configure + +Register the `@sentry/gatsby` plugin in your Gatsby configuration file (typically `gatsby-config.js`). + +```javascript {filename:gatsby-config.js} +module.exports = { + plugins: [ + { + resolve: '@sentry/gatsby', + }, + ], +}; +``` + +Then, configure your `Sentry.init`: + +```javascript {filename:sentry.config.js} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/gatsby/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Gatsby Features](https://docs.sentry.io/platforms/javascript/guides/gatsby/features/): Learn about our first class integration with the Gatsby framework. diff --git a/src/wizard/javascript/gatsby/with-error-monitoring.md b/src/wizard/javascript/gatsby/with-error-monitoring.md new file mode 100644 index 00000000000000..5084b00813c0fb --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring.md @@ -0,0 +1,59 @@ +--- +name: Gatsby +doc_link: https://docs.sentry.io/platforms/javascript/guides/gatsby/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/gatsby + +# Using npm +npm install --save @sentry/gatsby +``` + +## Configure + +Register the `@sentry/gatsby` plugin in your Gatsby configuration file (typically `gatsby-config.js`). + +```javascript {filename:gatsby-config.js} +module.exports = { + plugins: [ + { + resolve: '@sentry/gatsby', + }, + ], +}; +``` + +Then, configure your `Sentry.init`: + +```javascript {filename:sentry.config.js} +import * as Sentry from '@sentry/gatsby'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/gatsby/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Gatsby Features](https://docs.sentry.io/platforms/javascript/guides/gatsby/features/): Learn about our first class integration with the Gatsby framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/gatsby/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/nextjs.md b/src/wizard/javascript/nextjs/index.md similarity index 90% rename from src/wizard/javascript/nextjs.md rename to src/wizard/javascript/nextjs/index.md index e1511dcbcb67a5..d4a3ede4d532e1 100644 --- a/src/wizard/javascript/nextjs.md +++ b/src/wizard/javascript/nextjs/index.md @@ -3,7 +3,6 @@ name: Next.js doc_link: https://docs.sentry.io/platforms/javascript/guides/nextjs/ support_level: production type: framework -wizard_setup: "./nextjs_wizard.md" --- Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). @@ -32,7 +31,7 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. @@ -46,14 +45,7 @@ The above configuration has automatic error tracking with source maps for both J Then create an intentional error, so you can test that everything is working from your development environment. For example, a button whose `onClick` handler throws an error: ```javascript - +return ; ``` If you're new to Sentry, use the email alert to access your account and complete a product tour. diff --git a/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..3ec36cbdf4d932 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md @@ -0,0 +1,59 @@ +--- +name: Next.js +doc_link: https://docs.sentry.io/platforms/javascript/guides/nextjs/ +support_level: production +type: framework +--- + +## Install + +Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). + +```bash +npx @sentry/wizard -i nextjs +``` + +## Configure + +Sentry wizard will automatically patch your application: + +- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init`. +- create `next.config.js` with the default configuration. +- create `sentry.properties` with configuration for sentry-cli (which is used when automatically uploading source maps). + +You can also [configure it manually](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/). + +Configure the Sentry initialization: + +Install Sentry’s Next.js SDK using either `yarn` or `npm`: + +```bash +yarn add @sentry/nextjs +# or +npm install --save @sentry/nextjs +``` + +```javascript +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +return ; +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Next.js Features](https://docs.sentry.io/platforms/javascript/guides/nextjs/features/): Learn about our first class integration with the Next.js framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..939e5bb1398ccd --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md @@ -0,0 +1,60 @@ +--- +name: Next.js +doc_link: https://docs.sentry.io/platforms/javascript/guides/nextjs/ +support_level: production +type: framework +--- + +## Install + +Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). + +```bash +npx @sentry/wizard -i nextjs +``` + +## Configure + +Sentry wizard will automatically patch your application: + +- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init`. +- create `next.config.js` with the default configuration. +- create `sentry.properties` with configuration for sentry-cli (which is used when automatically uploading source maps). + +You can also [configure it manually](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/). + +Configure the Sentry initialization: + +Install Sentry’s Next.js SDK using either `yarn` or `npm`: + +```bash +yarn add @sentry/nextjs +# or +npm install --save @sentry/nextjs +``` + +```javascript +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +return ; +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Next.js Features](https://docs.sentry.io/platforms/javascript/guides/nextjs/features/): Learn about our first class integration with the Next.js framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/nextjs/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..62cfd136760c03 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,61 @@ +--- +name: Next.js +doc_link: https://docs.sentry.io/platforms/javascript/guides/nextjs/ +support_level: production +type: framework +--- + +## Install + +Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). + +```bash +npx @sentry/wizard -i nextjs +``` + +## Configure + +Sentry wizard will automatically patch your application: + +- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init`. +- create `next.config.js` with the default configuration. +- create `sentry.properties` with configuration for sentry-cli (which is used when automatically uploading source maps). + +You can also [configure it manually](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/). + +Configure the Sentry initialization: + +Install Sentry’s Next.js SDK using either `yarn` or `npm`: + +```bash +yarn add @sentry/nextjs +# or +npm install --save @sentry/nextjs +``` + +```javascript +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +return ; +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Next.js Features](https://docs.sentry.io/platforms/javascript/guides/nextjs/features/): Learn about our first class integration with the Next.js framework. diff --git a/src/wizard/javascript/nextjs/with-error-monitoring.md b/src/wizard/javascript/nextjs/with-error-monitoring.md new file mode 100644 index 00000000000000..1d33baeb2af552 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring.md @@ -0,0 +1,57 @@ +--- +name: Next.js +doc_link: https://docs.sentry.io/platforms/javascript/guides/nextjs/ +support_level: production +type: framework +--- + +## Install + +Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). + +```bash +npx @sentry/wizard -i nextjs +``` + +## Configure + +Sentry wizard will automatically patch your application: + +- create `sentry.client.config.js` and `sentry.server.config.js` with the default `Sentry.init`. +- create `next.config.js` with the default configuration. +- create `sentry.properties` with configuration for sentry-cli (which is used when automatically uploading source maps). + +You can also [configure it manually](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/). + +Configure the Sentry initialization: + +Install Sentry’s Next.js SDK using either `yarn` or `npm`: + +```bash +yarn add @sentry/nextjs +# or +npm install --save @sentry/nextjs +``` + +```javascript +Sentry.init({ + dsn: '___PUBLIC_DSN___', +}); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +return ; +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Next.js Features](https://docs.sentry.io/platforms/javascript/guides/nextjs/features/): Learn about our first class integration with the Next.js framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/nextjs/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/react/with-error-monitoring-and-replay.md b/src/wizard/javascript/react/with-error-monitoring-and-replay.md index 14aeb0cec1ecfb..a79bf3f228bf7f 100644 --- a/src/wizard/javascript/react/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/react/with-error-monitoring-and-replay.md @@ -3,10 +3,10 @@ name: React doc_link: https://docs.sentry.io/platforms/javascript/guides/react/ support_level: production type: framework - --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -15,11 +15,12 @@ yarn add @sentry/react ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript import { createRoot } React from "react-dom/client"; -import React from "react"; +import React from "react"; import * as Sentry from "@sentry/react"; import App from "./App"; @@ -37,6 +38,7 @@ root.render() ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -44,7 +46,9 @@ return ; ``` --- + ## Next Steps + - [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. - [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features/): Learn about our first class integration with the React framework. - [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/react/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/remix.md b/src/wizard/javascript/remix/index.md similarity index 78% rename from src/wizard/javascript/remix.md rename to src/wizard/javascript/remix/index.md index 39f2bb5dcf4985..e3186c8148ea01 100644 --- a/src/wizard/javascript/remix.md +++ b/src/wizard/javascript/remix/index.md @@ -15,15 +15,15 @@ yarn add @sentry/remix npm install --save @sentry/remix ``` -Next, import and initialize initialize Sentry in your Remix entry points for both the client and server: +Next, import and initialize Sentry in your Remix entry points for both the client and server: ```javascript -import { useLocation, useMatches } from "@remix-run/react"; -import * as Sentry from "@sentry/remix"; -import { useEffect } from "react"; +import {useLocation, useMatches} from '@remix-run/react'; +import * as Sentry from '@sentry/remix'; +import {useEffect} from 'react'; Sentry.init({ - dsn: "___DSN___", + dsn: '___DSN___', tracesSampleRate: 1, integrations: [ new Sentry.BrowserTracing({ @@ -40,14 +40,14 @@ Sentry.init({ Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls: ```javascript -import { prisma } from "~/db.server"; +import {prisma} from '~/db.server'; -import * as Sentry from "@sentry/remix"; +import * as Sentry from '@sentry/remix'; Sentry.init({ - dsn: "___DSN___", + dsn: '___DSN___', tracesSampleRate: 1, - integrations: [new Sentry.Integrations.Prisma({ client: prisma })], + integrations: [new Sentry.Integrations.Prisma({client: prisma})], }); ``` @@ -61,9 +61,9 @@ import { Outlet, Scripts, ScrollRestoration, -} from "@remix-run/react"; +} from '@remix-run/react'; -import { withSentry } from "@sentry/remix"; +import {withSentry} from '@sentry/remix'; function App() { return ( @@ -90,9 +90,7 @@ After this step, Sentry will report any uncaught exceptions triggered by your ap You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist: ```javascript - +return ; ``` Once you've verified the SDK is initialized properly and sent a test event, check out our [complete Remix docs](https://docs.sentry.io/platforms/javascript/guides/remix/)for additional configuration instructions. diff --git a/src/wizard/javascript/remix/with-error-monitoring-and-performance.md b/src/wizard/javascript/remix/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..c8ec5d9abc4a5b --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring-and-performance.md @@ -0,0 +1,110 @@ +--- +name: Remix +doc_link: https://docs.sentry.io/platforms/javascript/guides/remix/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/remix + +# Using npm +npm install --save @sentry/remix +``` + +## Configure + +Import and initialize Sentry in your Remix entry points for both the client and server: + +```javascript +import {useLocation, useMatches} from '@remix-run/react'; +import * as Sentry from '@sentry/remix'; +import {useEffect} from 'react'; + +Sentry.init({ + dsn: '___DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches + ), + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls: + +```javascript +import {prisma} from '~/db.server'; + +import * as Sentry from '@sentry/remix'; + +Sentry.init({ + dsn: '___DSN___', + integrations: [new Sentry.Integrations.Prisma({client: prisma})], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +Lastly, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions: + +```javascript +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from '@remix-run/react'; + +import {withSentry} from '@sentry/remix'; + +function App() { + return ( + + + + + + + + + + + + + ); +} + +export default withSentry(App); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist: + +```javascript + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Remix Features](https://docs.sentry.io/platforms/javascript/guides/remix/features/): Learn about our first class integration with the Remix framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/remix/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/remix/with-error-monitoring-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..2f1877ea738a8c --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md @@ -0,0 +1,98 @@ +--- +name: Remix +doc_link: https://docs.sentry.io/platforms/javascript/guides/remix/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/remix + +# Using npm +npm install --save @sentry/remix +``` + +## Configure + +Import and initialize Sentry in your Remix entry points for both the client and server: + +```javascript +import {useLocation, useMatches} from '@remix-run/react'; +import * as Sentry from '@sentry/remix'; +import {useEffect} from 'react'; + +Sentry.init({ + dsn: '___DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions: + +```javascript +import * as Sentry from '@sentry/remix'; + +Sentry.init({ + dsn: '___DSN___', +}); +``` + +Lastly, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions: + +```javascript +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from '@remix-run/react'; + +import {withSentry} from '@sentry/remix'; + +function App() { + return ( + + + + + + + + + + + + + ); +} + +export default withSentry(App); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist: + +```javascript + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Remix Features](https://docs.sentry.io/platforms/javascript/guides/remix/features/): Learn about our first class integration with the Remix framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/remix/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..3adcb5062e108a --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,113 @@ +--- +name: Remix +doc_link: https://docs.sentry.io/platforms/javascript/guides/remix/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/remix + +# Using npm +npm install --save @sentry/remix +``` + +## Configure + +Import and initialize Sentry in your Remix entry points for both the client and server: + +```javascript +import {useLocation, useMatches} from '@remix-run/react'; +import * as Sentry from '@sentry/remix'; +import {useEffect} from 'react'; + +Sentry.init({ + dsn: '___DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches + ), + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); +``` + +Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls: + +```javascript +import {prisma} from '~/db.server'; + +import * as Sentry from '@sentry/remix'; + +Sentry.init({ + dsn: '___DSN___', + integrations: [new Sentry.Integrations.Prisma({client: prisma})], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); +``` + +Lastly, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions: + +```javascript +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from '@remix-run/react'; + +import {withSentry} from '@sentry/remix'; + +function App() { + return ( + + + + + + + + + + + + + ); +} + +export default withSentry(App); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist: + +```javascript + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Remix Features](https://docs.sentry.io/platforms/javascript/guides/remix/features/): Learn about our first class integration with the Remix framework. diff --git a/src/wizard/javascript/remix/with-error-monitoring.md b/src/wizard/javascript/remix/with-error-monitoring.md new file mode 100644 index 00000000000000..b6fbdb218c15a3 --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring.md @@ -0,0 +1,95 @@ +--- +name: Remix +doc_link: https://docs.sentry.io/platforms/javascript/guides/remix/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/remix + +# Using npm +npm install --save @sentry/remix +``` + +## Configure + +Import and initialize Sentry in your Remix entry points for both the client and server: + +```javascript +import {useLocation, useMatches} from '@remix-run/react'; +import * as Sentry from '@sentry/remix'; +import {useEffect} from 'react'; + +Sentry.init({ + dsn: '___DSN___', +}); +``` + +Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions: + +```javascript +import * as Sentry from '@sentry/remix'; + +Sentry.init({ + dsn: '___DSN___', +}); +``` + +Lastly, wrap your Remix root with `withSentry` to catch React component errors and to get parameterized router transactions: + +```javascript +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts, + ScrollRestoration, +} from '@remix-run/react'; + +import {withSentry} from '@sentry/remix'; + +function App() { + return ( + + + + + + + + + + + + + ); +} + +export default withSentry(App); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +You can trigger your first event from your development environment by raising an exception somewhere within your application. An example of this would be rendering a button whose `onClick` handler attempts to invoke a method that does not exist: + +```javascript +return ; +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/remix/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Remix Features](https://docs.sentry.io/platforms/javascript/guides/remix/features/): Learn about our first class integration with the Remix framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/remix/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/remix/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/svelte.md b/src/wizard/javascript/svelte/index.md similarity index 86% rename from src/wizard/javascript/svelte.md rename to src/wizard/javascript/svelte/index.md index 777496d9a0b4c1..747a9375ea50c1 100644 --- a/src/wizard/javascript/svelte.md +++ b/src/wizard/javascript/svelte/index.md @@ -18,14 +18,14 @@ npm install --save @sentry/svelte Next, import and initialize initialize Sentry in your Svelte app's entry point (`main.ts/js`): ```javascript -import "./app.css"; -import App from "./App.svelte"; +import './app.css'; +import App from './App.svelte'; -import * as Sentry from "@sentry/svelte"; +import * as Sentry from '@sentry/svelte'; // Initialize the Sentry SDK here Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [new Sentry.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% @@ -35,7 +35,7 @@ Sentry.init({ }); const app = new App({ - target: document.getElementById("app"), + target: document.getElementById('app'), }); export default app; @@ -49,10 +49,7 @@ You can trigger your first event from your development environment by raising an ```html // SomeComponent.svelte - - + ``` Once you've verified the SDK is initialized properly and you've sent a test event, check out our [complete Svelte docs](https://docs.sentry.io/platforms/javascript/guides/svelte/) for additional configuration instructions. diff --git a/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..a6607dd2bdeb8a --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md @@ -0,0 +1,59 @@ +--- +name: Svelte +doc_link: https://docs.sentry.io/platforms/javascript/guides/svelte/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/svelte + +# Using npm +npm install --save @sentry/svelte +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle, usually your Svelte app's entry point (`main.ts/js`): + +```javascript +import './app.css'; +import App from './App.svelte'; + +import * as Sentry from '@sentry/svelte'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```html +// SomeComponent.svelte + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Svelte Features](https://docs.sentry.io/platforms/javascript/guides/svelte/features/): Learn about our first class integration with the Svelte framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..b27446eb7f3f01 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md @@ -0,0 +1,60 @@ +--- +name: Svelte +doc_link: https://docs.sentry.io/platforms/javascript/guides/svelte/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/svelte + +# Using npm +npm install --save @sentry/svelte +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle, usually your Svelte app's entry point (`main.ts/js`): + +```javascript +import './app.css'; +import App from './App.svelte'; + +import * as Sentry from '@sentry/svelte'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```html +// SomeComponent.svelte + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Svelte Features](https://docs.sentry.io/platforms/javascript/guides/svelte/features/): Learn about our first class integration with the Svelte framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/svelte/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..bbf21dafaa6057 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,61 @@ +--- +name: Svelte +doc_link: https://docs.sentry.io/platforms/javascript/guides/svelte/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/svelte + +# Using npm +npm install --save @sentry/svelte +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +```javascript +import './app.css'; +import App from './App.svelte'; + +import * as Sentry from '@sentry/svelte'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```html +// SomeComponent.svelte + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Svelte Features](https://docs.sentry.io/platforms/javascript/guides/svelte/features/): Learn about our first class integration with the Svelte framework. diff --git a/src/wizard/javascript/svelte/with-error-monitoring.md b/src/wizard/javascript/svelte/with-error-monitoring.md new file mode 100644 index 00000000000000..42a9b040181603 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring.md @@ -0,0 +1,57 @@ +--- +name: Svelte +doc_link: https://docs.sentry.io/platforms/javascript/guides/svelte/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/svelte + +# Using npm +npm install --save @sentry/svelte +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle, usually your Svelte app's entry point (`main.ts/js`): + +```javascript +import './app.css'; +import App from './App.svelte'; + +import * as Sentry from '@sentry/svelte'; + +Sentry.init({ + dsn: '___PUBLIC_DSN___', +}); + +const app = new App({ + target: document.getElementById('app'), +}); + +export default app; +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```html +// SomeComponent.svelte + +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Svelte Features](https://docs.sentry.io/platforms/javascript/guides/svelte/features/): Learn about our first class integration with the Svelte framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/svelte/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue/index.md similarity index 93% rename from src/wizard/javascript/vue.md rename to src/wizard/javascript/vue/index.md index 84fbfdb447582a..e7f2fc146a2255 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue/index.md @@ -42,7 +42,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% @@ -79,7 +78,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Set tracesSampleRate to 1.0 to capture 100% diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md new file mode 100644 index 00000000000000..c15c4e63687853 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md @@ -0,0 +1,101 @@ +--- +name: Vue +doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/vue + +# Using npm +npm install --save @sentry/vue +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +#### Vue 2 + +```javascript +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +Vue.use(Router); + +const router = new Router({ + // ... +}); + +Sentry.init({ + Vue, + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.vueRouterInstrumentation(router), + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +// ... + +new Vue({ + router, + render: h => h(App), +}).$mount('#app'); +``` + +#### Vue 3 + +```javascript +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +const app = createApp({ + // ... +}); +const router = createRouter({ + // ... +}); + +Sentry.init({ + app, + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.vueRouterInstrumentation(router), + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! +}); + +app.use(router); +app.mount('#app'); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Vue Features](https://docs.sentry.io/platforms/javascript/guides/vue/features/): Learn about our first class integration with the Vue framework. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md new file mode 100644 index 00000000000000..5f15e21db6dcf7 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md @@ -0,0 +1,95 @@ +--- +name: Vue +doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/vue + +# Using npm +npm install --save @sentry/vue +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +#### Vue 2 + +```javascript +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +Vue.use(Router); + +const router = new Router({ + // ... +}); + +Sentry.init({ + Vue, + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +// ... + +new Vue({ + router, + render: h => h(App), +}).$mount('#app'); +``` + +#### Vue 3 + +```javascript +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +const app = createApp({ + // ... +}); +const router = createRouter({ + // ... +}); + +Sentry.init({ + app, + dsn: '___PUBLIC_DSN___', + integrations: [new Sentry.Replay()], + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +app.use(router); +app.mount('#app'); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Vue Features](https://docs.sentry.io/platforms/javascript/guides/vue/features/): Learn about our first class integration with the Vue framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/vue/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. diff --git a/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md new file mode 100644 index 00000000000000..c7703b521f10a2 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,108 @@ +--- +name: Vue +doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/vue + +# Using npm +npm install --save @sentry/vue +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +#### Vue 2 + +```javascript +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +Vue.use(Router); + +const router = new Router({ + // ... +}); + +Sentry.init({ + Vue, + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.vueRouterInstrumentation(router), + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +// ... + +new Vue({ + router, + render: h => h(App), +}).$mount('#app'); +``` + +#### Vue 3 + +```javascript +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; + +const app = createApp({ + // ... +}); +const router = createRouter({ + // ... +}); + +Sentry.init({ + app, + dsn: '___PUBLIC_DSN___', + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.vueRouterInstrumentation(router), + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! + // Session Replay + replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. + replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. +}); + +app.use(router); +app.mount('#app'); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Vue Features](https://docs.sentry.io/platforms/javascript/guides/vue/features/): Learn about our first class integration with the Vue framework. diff --git a/src/wizard/javascript/vue/with-error-monitoring.md b/src/wizard/javascript/vue/with-error-monitoring.md new file mode 100644 index 00000000000000..53801c3d107db4 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring.md @@ -0,0 +1,88 @@ +--- +name: Vue +doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ +support_level: production +type: framework +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash +# Using yarn +yarn add @sentry/vue + +# Using npm +npm install --save @sentry/vue +``` + +## Configure + +Initialize Sentry as early as possible in your application's lifecycle. + +#### Vue 2 + +```javascript +import Vue from "vue"; +import Router from "vue-router"; +import * as Sentry from "@sentry/vue"; + +Vue.use(Router); + +const router = new Router({ + // ... +}); + +Sentry.init({ + Vue, + dsn: "___PUBLIC_DSN___", +}); + +// ... + +new Vue({ + router, + render: h => h(App), +}).$mount("#app"); +``` + +#### Vue 3 + +```javascript +import { createApp } from "vue"; +import { createRouter } from "vue-router"; +import * as Sentry from "@sentry/vue"; + +const app = createApp({ + // ... +}); +const router = createRouter({ + // ... +}); + +Sentry.init({ + app, + dsn: "___PUBLIC_DSN___", +}); + +app.use(router); +app.mount("#app"); +``` + +## Verify + +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript +myUndefinedFunction(); +``` + +--- + +## Next Steps + +- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/): Learn how to enable readable stack traces in your Sentry errors. +- [Vue Features](https://docs.sentry.io/platforms/javascript/guides/vue/features/): Learn about our first class integration with the Vue framework. +- [Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/vue/performance/): Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries. +- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/): Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.