From d5cfce34e5f613da148b3ad8967f2b9e523149ab Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 16:56:28 -0400 Subject: [PATCH 01/20] vue --- .../with-error-monitoring-and-performance.md | 100 ++++++++++++++++ .../vue/with-error-monitoring-and-replay.md | 92 +++++++++++++++ ...error-monitoring-performance-and-replay.md | 108 ++++++++++++++++++ .../javascript/vue/with-error-monitoring.md | 84 ++++++++++++++ 4 files changed, 384 insertions(+) create mode 100644 src/wizard/javascript/vue/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/vue/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/vue/with-error-monitoring.md 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 0000000000000..2b11694749869 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md @@ -0,0 +1,100 @@ +--- +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), + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + ], + // 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), + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + ], + // 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. +- [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. 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 0000000000000..d24bb2def7234 --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md @@ -0,0 +1,92 @@ +--- +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. +- [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-performance-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..2c0ca24603269 --- /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), + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + 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), + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + 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. +- [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. 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 0000000000000..c094405c8caeb --- /dev/null +++ b/src/wizard/javascript/vue/with-error-monitoring.md @@ -0,0 +1,84 @@ +--- +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. From 998b09868cc60480522d8cc2bd6568236a3996cc Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:13:10 -0400 Subject: [PATCH 02/20] svelte --- .../with-error-monitoring-and-performance.md | 62 +++++++++++++++++ .../with-error-monitoring-and-replay.md | 59 +++++++++++++++++ ...error-monitoring-performance-and-replay.md | 66 +++++++++++++++++++ .../svelte/with-error-monitoring.md | 55 ++++++++++++++++ 4 files changed, 242 insertions(+) create mode 100644 src/wizard/javascript/svelte/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/svelte/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/svelte/with-error-monitoring.md 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 0000000000000..6c27c68acc5e4 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md @@ -0,0 +1,62 @@ +--- +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({ + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + ], + // 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. +- [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/svelte/with-error-monitoring-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..2e08370377da4 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.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. + +```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. +- [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-performance-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..4dd647e5ca127 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,66 @@ +--- +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({ + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + }), + 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. +- [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/svelte/with-error-monitoring.md b/src/wizard/javascript/svelte/with-error-monitoring.md new file mode 100644 index 0000000000000..c8ef7b84b84d4 --- /dev/null +++ b/src/wizard/javascript/svelte/with-error-monitoring.md @@ -0,0 +1,55 @@ +--- +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___", +}); + +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. From 1c935707188486bfb0d343b26da106983647a455 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:24:36 -0400 Subject: [PATCH 03/20] remix --- .../with-error-monitoring-and-performance.md | 110 ++++++++++++++++ .../remix/with-error-monitoring-and-replay.md | 100 +++++++++++++++ ...error-monitoring-performance-and-replay.md | 118 ++++++++++++++++++ .../javascript/remix/with-error-monitoring.md | 94 ++++++++++++++ 4 files changed, 422 insertions(+) create mode 100644 src/wizard/javascript/remix/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/remix/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/remix/with-error-monitoring.md 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 0000000000000..663c57e5d7574 --- /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, +}); +``` + +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, +}); +``` + +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. +- [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 0000000000000..22cb36c12ecb9 --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md @@ -0,0 +1,100 @@ +--- +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. 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___", +}); +``` + +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. +- [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-performance-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..add92b17350c5 --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,118 @@ +--- +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, + // 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 }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, + // 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. +}); +``` + +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. +- [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.md b/src/wizard/javascript/remix/with-error-monitoring.md new file mode 100644 index 0000000000000..62add121cce5c --- /dev/null +++ b/src/wizard/javascript/remix/with-error-monitoring.md @@ -0,0 +1,94 @@ +--- +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. 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___", +}); +``` + +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. +- [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. From bcc9aff416661164bb7441fcaa9eb2b0fa449d7d Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:36:10 -0400 Subject: [PATCH 04/20] angular --- .../with-error-monitoring-and-performance.md | 105 +++++++++++++++++ .../with-error-monitoring-and-replay.md | 103 +++++++++++++++++ ...error-monitoring-performance-and-replay.md | 109 ++++++++++++++++++ .../angular/with-error-monitoring.md | 97 ++++++++++++++++ .../with-error-monitoring-and-performance.md | 64 ++++++++++ .../with-error-monitoring-and-replay.md | 65 +++++++++++ ...error-monitoring-performance-and-replay.md | 68 +++++++++++ .../nextjs/with-error-monitoring.md | 59 ++++++++++ 8 files changed, 670 insertions(+) create mode 100644 src/wizard/javascript/angular/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/angular/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/angular/with-error-monitoring.md create mode 100644 src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/nextjs/with-error-monitoring.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 0000000000000..477b335af89ed --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-and-performance.md @@ -0,0 +1,105 @@ +--- +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({ + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + 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. +- [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/angular/with-error-monitoring-and-replay.md b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..12bcea7a27346 --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md @@ -0,0 +1,103 @@ +--- +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 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. +- [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/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 0000000000000..a2bee5dbe503a --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,109 @@ +--- +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({ + tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], + 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. +- [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/angular/with-error-monitoring.md b/src/wizard/javascript/angular/with-error-monitoring.md new file mode 100644 index 0000000000000..5e5857e8766c5 --- /dev/null +++ b/src/wizard/javascript/angular/with-error-monitoring.md @@ -0,0 +1,97 @@ +--- +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 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. +- [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/nextjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md new file mode 100644 index 0000000000000..d3adef5df2838 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md @@ -0,0 +1,64 @@ +--- +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, +}); +``` + +## Verify +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript + +``` + +--- +## 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/nextjs/with-error-monitoring-and-replay.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..f1f89ac106f4f --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md @@ -0,0 +1,65 @@ +--- +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 + +``` + +--- +## 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/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 0000000000000..49bf8ca30b958 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,68 @@ +--- +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, + // 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 + +``` + +--- +## 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/nextjs/with-error-monitoring.md b/src/wizard/javascript/nextjs/with-error-monitoring.md new file mode 100644 index 0000000000000..56682375193b1 --- /dev/null +++ b/src/wizard/javascript/nextjs/with-error-monitoring.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___", +}); +``` + +## Verify +This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. + +```javascript + +``` + +--- +## 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. From 5b9d632468e5dcc564b6296f49670db8143e86a9 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:40:43 -0400 Subject: [PATCH 05/20] angularjs (1.x) --- .../with-error-monitoring-and-performance.md | 60 +++++++++++++++++ .../with-error-monitoring-and-replay.md | 54 ++++++++++++++++ ...error-monitoring-performance-and-replay.md | 64 +++++++++++++++++++ .../angularjs/with-error-monitoring.md | 0 4 files changed, 178 insertions(+) create mode 100644 src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/angularjs/with-error-monitoring.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 0000000000000..008224f21e9cf --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md @@ -0,0 +1,60 @@ +--- +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"], + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches + ), + }), + ], + // Performance Monitoring + tracesSampleRate: 1.0, +}); + +// 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/angularjs/with-error-monitoring-and-replay.md b/src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..449205baa2dfc --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-replay.md @@ -0,0 +1,54 @@ +--- +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. +- [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-performance-and-replay.md b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..d3451627e1d67 --- /dev/null +++ b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md @@ -0,0 +1,64 @@ +--- +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"], + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches + ), + }), + new Sentry.Replay(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, + // 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. +- [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.md b/src/wizard/javascript/angularjs/with-error-monitoring.md new file mode 100644 index 0000000000000..e69de29bb2d1d From 700409e4a3bbc0f3c9d028938abd517e8db31c67 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:52:31 -0400 Subject: [PATCH 06/20] fix typo --- src/wizard/javascript/remix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wizard/javascript/remix.md b/src/wizard/javascript/remix.md index 39f2bb5dcf498..37a5831e0785e 100644 --- a/src/wizard/javascript/remix.md +++ b/src/wizard/javascript/remix.md @@ -15,7 +15,7 @@ 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"; From a73bbf4f2764313e8e2c02712ab86c824ec6fc76 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 11 Apr 2023 17:52:50 -0400 Subject: [PATCH 07/20] nit lines --- .../javascript/vue/with-error-monitoring-and-performance.md | 1 - src/wizard/javascript/vue/with-error-monitoring-and-replay.md | 1 - .../vue/with-error-monitoring-performance-and-replay.md | 1 - src/wizard/javascript/vue/with-error-monitoring.md | 1 - 4 files changed, 4 deletions(-) diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md index 2b11694749869..d105ffc33edf0 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md @@ -3,7 +3,6 @@ name: Vue doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ support_level: production type: framework - --- ## Install diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md index d24bb2def7234..a281f3d412179 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md @@ -3,7 +3,6 @@ name: Vue doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ support_level: production type: framework - --- ## Install 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 index 2c0ca24603269..e2198ff7a6dd8 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md @@ -3,7 +3,6 @@ name: Vue doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ support_level: production type: framework - --- ## Install diff --git a/src/wizard/javascript/vue/with-error-monitoring.md b/src/wizard/javascript/vue/with-error-monitoring.md index c094405c8caeb..7765d1e3239d9 100644 --- a/src/wizard/javascript/vue/with-error-monitoring.md +++ b/src/wizard/javascript/vue/with-error-monitoring.md @@ -3,7 +3,6 @@ name: Vue doc_link: https://docs.sentry.io/platforms/javascript/guides/vue/ support_level: production type: framework - --- ## Install From f7c2bc85e88d79bb359c02edf34049fb6fef2bb1 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 12 Apr 2023 23:43:21 -0400 Subject: [PATCH 08/20] gatsby --- .../with-error-monitoring-and-performance.md | 59 +++++++++++++++++ .../with-error-monitoring-and-replay.md | 60 ++++++++++++++++++ ...error-monitoring-performance-and-replay.md | 63 +++++++++++++++++++ .../gatsby/with-error-monitoring.md | 54 ++++++++++++++++ 4 files changed, 236 insertions(+) create mode 100644 src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/gatsby/with-error-monitoring.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 0000000000000..37437cc6d92d8 --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.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___", + integrations: [ + new Sentry.BrowserTracing(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, +}); +``` + +## 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/gatsby/with-error-monitoring-and-replay.md b/src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..0ca21fd74d113 --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring-and-replay.md @@ -0,0 +1,60 @@ +--- +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. +- [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-performance-and-replay.md b/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..54dc5d1e14614 --- /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, + // 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. +- [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.md b/src/wizard/javascript/gatsby/with-error-monitoring.md new file mode 100644 index 0000000000000..145802d92b52b --- /dev/null +++ b/src/wizard/javascript/gatsby/with-error-monitoring.md @@ -0,0 +1,54 @@ +--- +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. From a5ad64c6ca9109dc2c532fe6dc1051aba092cc1d Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 12 Apr 2023 23:45:46 -0400 Subject: [PATCH 09/20] angularjs fixes --- .../with-error-monitoring-and-performance.md | 5 -- ...error-monitoring-performance-and-replay.md | 5 -- .../angularjs/with-error-monitoring.md | 52 +++++++++++++++++++ 3 files changed, 52 insertions(+), 10 deletions(-) diff --git a/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md index 008224f21e9cf..6ffb65376b541 100644 --- a/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md @@ -30,11 +30,6 @@ Sentry.init({ new AngularIntegration(), new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], - routingInstrumentation: Sentry.remixRouterInstrumentation( - useEffect, - useLocation, - useMatches - ), }), ], // Performance Monitoring 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 index d3451627e1d67..28ef875b5797e 100644 --- a/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md @@ -30,11 +30,6 @@ Sentry.init({ new AngularIntegration(), new Sentry.BrowserTracing({ tracePropagationTargets: ["localhost", "https://yourserver.io/api"], - routingInstrumentation: Sentry.remixRouterInstrumentation( - useEffect, - useLocation, - useMatches - ), }), new Sentry.Replay(), ], diff --git a/src/wizard/javascript/angularjs/with-error-monitoring.md b/src/wizard/javascript/angularjs/with-error-monitoring.md index e69de29bb2d1d..a5b7ca7a5c73e 100644 --- a/src/wizard/javascript/angularjs/with-error-monitoring.md +++ 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. From e6afb06dd4e2bbe7b072a769f1a205c17b87970d Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 12 Apr 2023 23:48:33 -0400 Subject: [PATCH 10/20] ember --- .../with-error-monitoring-and-performance.md | 55 +++++++++++++++++ .../ember/with-error-monitoring-and-replay.md | 56 ++++++++++++++++++ ...error-monitoring-performance-and-replay.md | 59 +++++++++++++++++++ .../javascript/ember/with-error-monitoring.md | 50 ++++++++++++++++ 4 files changed, 220 insertions(+) create mode 100644 src/wizard/javascript/ember/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/ember/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/ember/with-error-monitoring.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 0000000000000..c67aee87d715c --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring-and-performance.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___", + integrations: [ + new Sentry.BrowserTracing(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, +}); + +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/ember/with-error-monitoring-and-replay.md b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..ec04fa9b43afa --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md @@ -0,0 +1,56 @@ +--- +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. +- [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-performance-and-replay.md b/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..61f678f37f020 --- /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, + // 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. +- [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.md b/src/wizard/javascript/ember/with-error-monitoring.md new file mode 100644 index 0000000000000..2bc531b144bb6 --- /dev/null +++ b/src/wizard/javascript/ember/with-error-monitoring.md @@ -0,0 +1,50 @@ +--- +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. From 1b7721aacb5e1e07a3572a872a6d4100c89800ee Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 12 Apr 2023 23:52:28 -0400 Subject: [PATCH 11/20] backbone --- .../with-error-monitoring-and-performance.md | 46 +++++++++++++++++ .../with-error-monitoring-and-replay.md | 47 +++++++++++++++++ ...error-monitoring-performance-and-replay.md | 50 +++++++++++++++++++ .../backbone/with-error-monitoring.md | 41 +++++++++++++++ 4 files changed, 184 insertions(+) create mode 100644 src/wizard/javascript/backbone/with-error-monitoring-and-performance.md create mode 100644 src/wizard/javascript/backbone/with-error-monitoring-and-replay.md create mode 100644 src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md create mode 100644 src/wizard/javascript/backbone/with-error-monitoring.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 0000000000000..034705029c842 --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-performance.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___", + integrations: [ + new Sentry.BrowserTracing(), + ], + // Performance Monitoring + tracesSampleRate: 1.0, +}); +``` + +## 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/backbone/with-error-monitoring-and-replay.md b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md new file mode 100644 index 0000000000000..fd0ed37dc379d --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md @@ -0,0 +1,47 @@ +--- +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. +- [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-performance-and-replay.md b/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md new file mode 100644 index 0000000000000..625518a07ad87 --- /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, + // 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. +- [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.md b/src/wizard/javascript/backbone/with-error-monitoring.md new file mode 100644 index 0000000000000..17f6efba7dab6 --- /dev/null +++ b/src/wizard/javascript/backbone/with-error-monitoring.md @@ -0,0 +1,41 @@ +--- +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. From ae563d1fa0fc13d99dcb229ec6d84243e607ce68 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 12 Apr 2023 23:54:35 -0400 Subject: [PATCH 12/20] Update src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md --- .../remix/with-error-monitoring-performance-and-replay.md | 4 ---- 1 file changed, 4 deletions(-) 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 index add92b17350c5..a2ff22e3d7d85 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md @@ -55,13 +55,9 @@ Sentry.init({ dsn: "___DSN___", integrations: [ new Sentry.Integrations.Prisma({ client: prisma }), - new Sentry.Replay(), ], // Performance Monitoring tracesSampleRate: 1.0, - // 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. }); ``` From a75bbc8a18e8c1654575124ede146d788994e4f1 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 14 Apr 2023 11:47:07 +0200 Subject: [PATCH 13/20] Remove tracePropagationTargets since we always have a default value --- .../getting-started-config/javascript.vue.mdx | 2 -- .../javascript.electron.mdx | 7 +------ .../javascript.mdx | 14 ++------------ .../javascript.react.mdx | 3 --- .../performance/enable-tracing/react-native.mdx | 7 +------ .../instrumentation/automatic-instrumentation.mdx | 7 +------ .../with-error-monitoring-and-performance.md | 6 +++++- ...with-error-monitoring-performance-and-replay.md | 6 +++++- .../with-error-monitoring-and-performance.md | 11 ++++++----- ...with-error-monitoring-performance-and-replay.md | 12 ++++++------ src/wizard/javascript/vue.md | 2 -- .../vue/with-error-monitoring-and-performance.md | 7 +++++-- ...with-error-monitoring-performance-and-replay.md | 7 +++++-- 13 files changed, 37 insertions(+), 54 deletions(-) diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx index 83ad13f92a236..c62ad63d4c92a 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 55dbd862efaae..7c062cb40a3ca 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 99e1bf0914a88..7d8ce3a7a52bc 100644 --- a/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx +++ b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.mdx @@ -10,12 +10,7 @@ import * as Sentry from "@sentry/browser"; 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 @@ -27,12 +22,7 @@ Sentry.init({ 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.react.mdx b/src/platform-includes/performance/enable-automatic-instrumentation/javascript.react.mdx index 11ea14dd940a5..d29eb7dcb63d3 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 2466e0870fd8f..e9e145b3f410e 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 b59b2504dc6e9..413c8cec697ac 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/with-error-monitoring-and-performance.md b/src/wizard/javascript/angular/with-error-monitoring-and-performance.md index 477b335af89ed..9ae9b7774dbc0 100644 --- a/src/wizard/javascript/angular/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/angular/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ 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` @@ -26,6 +27,7 @@ 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 @@ -40,7 +42,6 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], routingInstrumentation: Sentry.routingInstrumentation, }), ], @@ -91,6 +92,7 @@ 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 @@ -98,7 +100,9 @@ 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 index a2bee5dbe503a..32741ec9c22bf 100644 --- a/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/angular/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ 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` @@ -26,6 +27,7 @@ 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 @@ -40,7 +42,6 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], routingInstrumentation: Sentry.routingInstrumentation, }), new Sentry.Replay(), @@ -95,6 +96,7 @@ 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 @@ -102,7 +104,9 @@ 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/svelte/with-error-monitoring-and-performance.md b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md index 6c27c68acc5e4..84538f289af4f 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/svelte ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript @@ -27,11 +29,7 @@ import * as Sentry from "@sentry/svelte"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - }), - ], + integrations: [new Sentry.BrowserTracing()], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); @@ -44,6 +42,7 @@ 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 @@ -55,7 +54,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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 index 4dd647e5ca127..98a00fe740f66 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/svelte ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript @@ -27,12 +29,7 @@ import * as Sentry from "@sentry/svelte"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing({ - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], - }), - new Sentry.Replay(), - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! // Session Replay @@ -48,6 +45,7 @@ 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 @@ -59,7 +57,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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/vue.md b/src/wizard/javascript/vue.md index 84fbfdb447582..e7f2fc146a225 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue.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 index d105ffc33edf0..403c9da2ee704 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/vue ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. #### Vue 2 @@ -38,7 +40,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Performance Monitoring @@ -73,7 +74,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), ], // Performance Monitoring @@ -85,6 +85,7 @@ 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 @@ -92,7 +93,9 @@ 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 index e2198ff7a6dd8..0d3db3de2d4e2 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/vue ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. #### Vue 2 @@ -38,7 +40,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), new Sentry.Replay(), ], @@ -77,7 +78,6 @@ Sentry.init({ integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), - tracePropagationTargets: ["localhost", "my-site-url.com", /^\//], }), new Sentry.Replay(), ], @@ -93,6 +93,7 @@ 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 @@ -100,7 +101,9 @@ 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. From bc11960d683d2d879138d3d689f03348c92eb5ce Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 14 Apr 2023 13:35:53 +0200 Subject: [PATCH 14/20] Update svelte instruction configure hint --- .../svelte/with-error-monitoring-and-performance.md | 2 +- .../javascript/svelte/with-error-monitoring-and-replay.md | 7 ++++++- src/wizard/javascript/svelte/with-error-monitoring.md | 7 ++++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md index 84538f289af4f..2010114b6effa 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md @@ -19,7 +19,7 @@ npm install --save @sentry/svelte ## Configure -Initialize Sentry as early as possible in your application's lifecycle. +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"; diff --git a/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md index 2e08370377da4..36b7bd7267094 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,7 +18,8 @@ npm install --save @sentry/svelte ``` ## Configure -Initialize Sentry as early as possible in your application's lifecycle. + +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"; @@ -41,6 +43,7 @@ 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 @@ -52,7 +55,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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.md b/src/wizard/javascript/svelte/with-error-monitoring.md index c8ef7b84b84d4..902d71e76441f 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring.md +++ b/src/wizard/javascript/svelte/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,7 +18,8 @@ npm install --save @sentry/svelte ``` ## Configure -Initialize Sentry as early as possible in your application's lifecycle. + +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"; @@ -37,6 +39,7 @@ 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 @@ -48,7 +51,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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. From 48873234223942ea0b07d124bf1e19898f77b56c Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 14 Apr 2023 13:40:03 +0200 Subject: [PATCH 15/20] formatting for snippets --- .../angular/with-error-monitoring-and-replay.md | 9 ++++++--- .../with-error-monitoring-and-performance.md | 7 ++++++- ...h-error-monitoring-performance-and-replay.md | 7 ++++++- .../with-error-monitoring-and-performance.md | 11 +++++++---- .../with-error-monitoring-and-replay.md | 9 ++++++--- ...h-error-monitoring-performance-and-replay.md | 12 +++++++----- .../backbone/with-error-monitoring.md | 5 +++++ .../with-error-monitoring-and-performance.md | 11 +++++++---- .../ember/with-error-monitoring-and-replay.md | 9 ++++++--- ...h-error-monitoring-performance-and-replay.md | 12 +++++++----- .../javascript/ember/with-error-monitoring.md | 5 +++++ .../with-error-monitoring-and-performance.md | 11 +++++++---- ...h-error-monitoring-performance-and-replay.md | 12 +++++++----- .../with-error-monitoring-and-performance.md | 11 +++++++---- ...h-error-monitoring-performance-and-replay.md | 12 +++++++----- .../with-error-monitoring-and-performance.md | 17 +++++++++-------- ...h-error-monitoring-performance-and-replay.md | 17 +++++++++-------- .../vue/with-error-monitoring-and-replay.md | 5 +++++ .../javascript/vue/with-error-monitoring.md | 5 +++++ 19 files changed, 124 insertions(+), 63 deletions(-) diff --git a/src/wizard/javascript/angular/with-error-monitoring-and-replay.md b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md index 12bcea7a27346..dea1e31fe1c23 100644 --- a/src/wizard/javascript/angular/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ 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` @@ -26,6 +27,7 @@ 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 @@ -38,9 +40,7 @@ import { AppModule } from "./app/app.module"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.Replay(), - ], + 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. @@ -89,6 +89,7 @@ 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 @@ -96,7 +97,9 @@ 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/angularjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md index 6ffb65376b541..49632ff400818 100644 --- a/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/angularjs/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/browser @sentry/integrations ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript @@ -33,7 +35,7 @@ Sentry.init({ }), ], // Performance Monitoring - tracesSampleRate: 1.0, + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); // Finally require ngSentry as a dependency in your application module. @@ -41,6 +43,7 @@ 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 @@ -48,7 +51,9 @@ 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 index 28ef875b5797e..3d81fd1acc21d 100644 --- a/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/angularjs/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/browser @sentry/integrations ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. ```javascript @@ -34,7 +36,7 @@ Sentry.init({ new Sentry.Replay(), ], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -45,6 +47,7 @@ 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 @@ -52,7 +55,9 @@ 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/backbone/with-error-monitoring-and-performance.md b/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md index 034705029c842..095d4d153eb3f 100644 --- a/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -16,6 +17,7 @@ npm install --save @sentry/browser ``` ## Configure + You should `init` the Sentry SDK as soon as possible during your application: ```javascript @@ -23,15 +25,14 @@ import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - ], + integrations: [new Sentry.BrowserTracing()], // Performance Monitoring - tracesSampleRate: 1.0, + 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 @@ -39,7 +40,9 @@ 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-and-replay.md b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md index fd0ed37dc379d..0f04ba9b835f0 100644 --- a/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/backbone/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -16,6 +17,7 @@ npm install --save @sentry/browser ``` ## Configure + You should `init` the Sentry SDK as soon as possible during your application: ```javascript @@ -23,9 +25,7 @@ import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.Replay(), - ], + 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. @@ -33,6 +33,7 @@ Sentry.init({ ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -40,7 +41,9 @@ 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 index 625518a07ad87..ac68a039a6255 100644 --- a/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/backbone/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -16,6 +17,7 @@ npm install --save @sentry/browser ``` ## Configure + You should `init` the Sentry SDK as soon as possible during your application: ```javascript @@ -23,12 +25,9 @@ import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - new Sentry.Replay(), - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -36,6 +35,7 @@ Sentry.init({ ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -43,7 +43,9 @@ 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.md b/src/wizard/javascript/backbone/with-error-monitoring.md index 17f6efba7dab6..0e4d16e166554 100644 --- a/src/wizard/javascript/backbone/with-error-monitoring.md +++ b/src/wizard/javascript/backbone/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -16,6 +17,7 @@ npm install --save @sentry/browser ``` ## Configure + You should `init` the Sentry SDK as soon as possible during your application: ```javascript @@ -27,6 +29,7 @@ Sentry.init({ ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -34,7 +37,9 @@ 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/ember/with-error-monitoring-and-performance.md b/src/wizard/javascript/ember/with-error-monitoring-and-performance.md index c67aee87d715c..7f0613813624b 100644 --- a/src/wizard/javascript/ember/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/ember/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -14,6 +15,7 @@ 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 @@ -26,11 +28,9 @@ import * as Sentry from "@sentry/ember"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - ], + integrations: [new Sentry.BrowserTracing()], // Performance Monitoring - tracesSampleRate: 1.0, + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); export default class App extends Application { @@ -41,6 +41,7 @@ export default class App extends Application { ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -48,7 +49,9 @@ 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-and-replay.md b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md index ec04fa9b43afa..2b52afcbe50e7 100644 --- a/src/wizard/javascript/ember/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/ember/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -14,6 +15,7 @@ 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 @@ -26,9 +28,7 @@ import * as Sentry from "@sentry/ember"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.Replay(), - ], + 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. @@ -42,6 +42,7 @@ export default class App extends Application { ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -49,7 +50,9 @@ 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 index 61f678f37f020..9fd8aa66b0eb7 100644 --- a/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/ember/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -14,6 +15,7 @@ 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 @@ -26,12 +28,9 @@ import * as Sentry from "@sentry/ember"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - new Sentry.Replay(), - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -45,6 +44,7 @@ export default class App extends Application { ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -52,7 +52,9 @@ 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.md b/src/wizard/javascript/ember/with-error-monitoring.md index 2bc531b144bb6..a42a9d4bb2531 100644 --- a/src/wizard/javascript/ember/with-error-monitoring.md +++ b/src/wizard/javascript/ember/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -14,6 +15,7 @@ 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 @@ -36,6 +38,7 @@ export default class App extends Application { ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -43,7 +46,9 @@ 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/gatsby/with-error-monitoring-and-performance.md b/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md index 37437cc6d92d8..1460025cf8b7e 100644 --- a/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/gatsby/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ 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} @@ -36,15 +38,14 @@ import * as Sentry from "@sentry/gatsby"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - ], + integrations: [new Sentry.BrowserTracing()], // Performance Monitoring - tracesSampleRate: 1.0, + 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 @@ -52,7 +53,9 @@ 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 index 54dc5d1e14614..d8d134e1c7cf9 100644 --- a/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/gatsby/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ 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} @@ -36,12 +38,9 @@ import * as Sentry from "@sentry/gatsby"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - new Sentry.Replay(), - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -49,6 +48,7 @@ Sentry.init({ ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -56,7 +56,9 @@ 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/nextjs/with-error-monitoring-and-performance.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md index d3adef5df2838..d874714d8446b 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). ```bash @@ -13,6 +14,7 @@ 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`. @@ -34,15 +36,14 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - ], + integrations: [new Sentry.BrowserTracing()], // Performance Monitoring - tracesSampleRate: 1.0, + 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 @@ -57,7 +58,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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 index 49bf8ca30b958..26cd8d3142c80 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). ```bash @@ -13,6 +14,7 @@ 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`. @@ -34,12 +36,9 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.BrowserTracing(), - new Sentry.Replay(), - ], + integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -47,6 +46,7 @@ Sentry.init({ ``` ## Verify + This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript @@ -61,7 +61,9 @@ This snippet contains an intentional error and can be used as a test to make sur ``` --- + ## 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/remix/with-error-monitoring-and-performance.md b/src/wizard/javascript/remix/with-error-monitoring-and-performance.md index 663c57e5d7574..d5ae67998957f 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/remix/with-error-monitoring-and-performance.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/remix ``` ## Configure + Import and initialize Sentry in your Remix entry points for both the client and server: ```javascript @@ -36,7 +38,7 @@ Sentry.init({ }), ], // Performance Monitoring - tracesSampleRate: 1.0, + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); ``` @@ -49,11 +51,9 @@ import * as Sentry from "@sentry/remix"; Sentry.init({ dsn: "___DSN___", - integrations: [ - new Sentry.Integrations.Prisma({ client: prisma }), - ], + integrations: [new Sentry.Integrations.Prisma({ client: prisma })], // Performance Monitoring - tracesSampleRate: 1.0, + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); ``` @@ -92,18 +92,19 @@ 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 index a2ff22e3d7d85..4821cf982499c 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/remix ``` ## Configure + Import and initialize Sentry in your Remix entry points for both the client and server: ```javascript @@ -37,7 +39,7 @@ Sentry.init({ new Sentry.Replay(), ], // Performance Monitoring - tracesSampleRate: 1.0, + 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. @@ -53,11 +55,9 @@ import * as Sentry from "@sentry/remix"; Sentry.init({ dsn: "___DSN___", - integrations: [ - new Sentry.Integrations.Prisma({ client: prisma }), - ], + integrations: [new Sentry.Integrations.Prisma({ client: prisma })], // Performance Monitoring - tracesSampleRate: 1.0, + tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); ``` @@ -96,18 +96,19 @@ 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/vue/with-error-monitoring-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md index a281f3d412179..749e615a3ed51 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/vue ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. #### Vue 2 @@ -77,6 +79,7 @@ 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 @@ -84,7 +87,9 @@ 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.md b/src/wizard/javascript/vue/with-error-monitoring.md index 7765d1e3239d9..53801c3d107db 100644 --- a/src/wizard/javascript/vue/with-error-monitoring.md +++ b/src/wizard/javascript/vue/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/vue ``` ## Configure + Initialize Sentry as early as possible in your application's lifecycle. #### Vue 2 @@ -69,6 +71,7 @@ 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 @@ -76,7 +79,9 @@ 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. From c5b4fc018afe830d3ac16688b9a0fb8b2a4b1cd5 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 14 Apr 2023 13:41:57 +0200 Subject: [PATCH 16/20] Remix: only add prisma snippet if perf --- .../remix/with-error-monitoring-and-replay.md | 17 ++++++++--------- .../javascript/remix/with-error-monitoring.md | 13 +++++++------ 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/wizard/javascript/remix/with-error-monitoring-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md index 22cb36c12ecb9..110b63c8da98b 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/remix ``` ## Configure + Import and initialize Sentry in your Remix entry points for both the client and server: ```javascript @@ -26,20 +28,16 @@ import { useEffect } from "react"; Sentry.init({ dsn: "___DSN___", - integrations: [ - new Sentry.Replay(), - ], + 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. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls: +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 { prisma } from "~/db.server"; - import * as Sentry from "@sentry/remix"; Sentry.init({ @@ -82,18 +80,19 @@ 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.md b/src/wizard/javascript/remix/with-error-monitoring.md index 62add121cce5c..b4e09c5edc8b9 100644 --- a/src/wizard/javascript/remix/with-error-monitoring.md +++ b/src/wizard/javascript/remix/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Sentry captures data by using an SDK within your application’s runtime. ```bash @@ -17,6 +18,7 @@ npm install --save @sentry/remix ``` ## Configure + Import and initialize Sentry in your Remix entry points for both the client and server: ```javascript @@ -29,11 +31,9 @@ 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: +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 { prisma } from "~/db.server"; - import * as Sentry from "@sentry/remix"; Sentry.init({ @@ -76,18 +76,19 @@ 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. From 1ddb16dd7e8aeaf5409abfc66de8d574ceb07e50 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Fri, 14 Apr 2023 13:48:22 +0200 Subject: [PATCH 17/20] remove angular traceservice if not using perf --- .../angular/with-error-monitoring-and-replay.md | 12 +----------- .../javascript/angular/with-error-monitoring.md | 17 ++++++----------- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/wizard/javascript/angular/with-error-monitoring-and-replay.md b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md index dea1e31fe1c23..2f3e3aa12f37b 100644 --- a/src/wizard/javascript/angular/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/angular/with-error-monitoring-and-replay.md @@ -53,7 +53,7 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` -### ErrorHandler and Tracer +### 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. @@ -72,16 +72,6 @@ import * as Sentry from "@sentry/angular-ivy"; showDialog: true, }), }, - { - provide: Sentry.TraceService, - deps: [Router], - }, - { - provide: APP_INITIALIZER, - useFactory: () => () => {}, - deps: [Sentry.TraceService], - multi: true, - }, ], // ... }) diff --git a/src/wizard/javascript/angular/with-error-monitoring.md b/src/wizard/javascript/angular/with-error-monitoring.md index 5e5857e8766c5..62f41137b7a4e 100644 --- a/src/wizard/javascript/angular/with-error-monitoring.md +++ b/src/wizard/javascript/angular/with-error-monitoring.md @@ -6,6 +6,7 @@ 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` @@ -26,6 +27,7 @@ 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 @@ -47,7 +49,7 @@ platformBrowserDynamic() .catch(err => console.error(err)); ``` -### ErrorHandler and Tracer +### 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. @@ -66,16 +68,6 @@ import * as Sentry from "@sentry/angular-ivy"; showDialog: true, }), }, - { - provide: Sentry.TraceService, - deps: [Router], - }, - { - provide: APP_INITIALIZER, - useFactory: () => () => {}, - deps: [Sentry.TraceService], - multi: true, - }, ], // ... }) @@ -83,6 +75,7 @@ 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 @@ -90,7 +83,9 @@ 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. From ed530f8b810b683af5c0f564e28fbc8bd7239cef Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Thu, 20 Apr 2023 17:18:32 +0200 Subject: [PATCH 18/20] fix build --- src/gatsby/onPostBuild.ts | 16 +++++++--------- .../javascript/{angular.md => angular/index.md} | 0 .../{angularjs.md => angularjs/index.md} | 0 .../{backbone.md => backbone/index.md} | 0 .../javascript/{ember.md => ember/index.md} | 0 .../javascript/{gatsby.md => gatsby/index.md} | 0 .../javascript/{nextjs.md => nextjs/index.md} | 5 ++--- src/wizard/javascript/nextjs_wizard.md | 9 --------- .../javascript/{remix.md => remix/index.md} | 0 .../javascript/{svelte.md => svelte/index.md} | 0 src/wizard/javascript/{vue.md => vue/index.md} | 0 11 files changed, 9 insertions(+), 21 deletions(-) rename src/wizard/javascript/{angular.md => angular/index.md} (100%) rename src/wizard/javascript/{angularjs.md => angularjs/index.md} (100%) rename src/wizard/javascript/{backbone.md => backbone/index.md} (100%) rename src/wizard/javascript/{ember.md => ember/index.md} (100%) rename src/wizard/javascript/{gatsby.md => gatsby/index.md} (100%) rename src/wizard/javascript/{nextjs.md => nextjs/index.md} (94%) delete mode 100644 src/wizard/javascript/nextjs_wizard.md rename src/wizard/javascript/{remix.md => remix/index.md} (100%) rename src/wizard/javascript/{svelte.md => svelte/index.md} (100%) rename src/wizard/javascript/{vue.md => vue/index.md} (100%) diff --git a/src/gatsby/onPostBuild.ts b/src/gatsby/onPostBuild.ts index 9914fb833eeb4..460c601454101 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 } @@ -66,6 +61,7 @@ export default async function onPostBuild({graphql}) { const platformRegistry = new PlatformRegistry(); await platformRegistry.init(); + const nodes = results.data.allFile.edges.map(e => e.node.childMarkdownRemark); if (!nodes.length) { @@ -107,14 +103,15 @@ const parsePathSlug = (slug: string) => { sub, }; } - - 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,10 +123,11 @@ const parsePathSlug = (slug: string) => { } const pathMatch = slug.match(/^\/([^/]+)(?:\/([^/]+))?\/$/); + if (!pathMatch) { throw new Error('cant identify language'); } - + const [, main, sub] = pathMatch; return { 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/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/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/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/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/nextjs.md b/src/wizard/javascript/nextjs/index.md similarity index 94% rename from src/wizard/javascript/nextjs.md rename to src/wizard/javascript/nextjs/index.md index def0c912e5899..b9a09590463c5 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. @@ -49,7 +48,7 @@ Then create an intentional error, so you can test that everything is working fro +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 index d874714d8446b..3ec36cbdf4d93 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-performance.md @@ -35,7 +35,7 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [new Sentry.BrowserTracing()], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! @@ -47,14 +47,7 @@ Sentry.init({ This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript - +return ; ``` --- @@ -63,5 +56,4 @@ This snippet contains an intentional error and can be used as a test to make sur - [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/nextjs/with-error-monitoring-and-replay.md b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md index f1f89ac106f4f..939e5bb1398cc 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring-and-replay.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). ```bash @@ -13,6 +14,7 @@ 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`. @@ -33,10 +35,8 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.Replay(), - ], + 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. @@ -44,22 +44,17 @@ Sentry.init({ ``` ## 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/nextjs/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md index 26cd8d3142c80..62cfd136760c0 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring-performance-and-replay.md @@ -35,7 +35,7 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! @@ -50,14 +50,7 @@ Sentry.init({ This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected. ```javascript - +return ; ``` --- @@ -66,5 +59,3 @@ This snippet contains an intentional error and can be used as a test to make sur - [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/nextjs/with-error-monitoring.md b/src/wizard/javascript/nextjs/with-error-monitoring.md index 56682375193b1..1d33baeb2af55 100644 --- a/src/wizard/javascript/nextjs/with-error-monitoring.md +++ b/src/wizard/javascript/nextjs/with-error-monitoring.md @@ -6,6 +6,7 @@ type: framework --- ## Install + Configure your app automatically with [Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/nextjs/#configure). ```bash @@ -13,6 +14,7 @@ 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`. @@ -33,26 +35,22 @@ npm install --save @sentry/nextjs ```javascript Sentry.init({ - dsn: "___PUBLIC_DSN___", + 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. 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 14aeb0cec1ecf..a79bf3f228bf7 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/index.md b/src/wizard/javascript/remix/index.md index 37a5831e0785e..e3186c8148ea0 100644 --- a/src/wizard/javascript/remix/index.md +++ b/src/wizard/javascript/remix/index.md @@ -18,12 +18,12 @@ npm install --save @sentry/remix 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 index d5ae67998957f..c8ec5d9abc4a5 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/remix/with-error-monitoring-and-performance.md @@ -22,12 +22,12 @@ npm install --save @sentry/remix 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___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.remixRouterInstrumentation( @@ -45,13 +45,13 @@ 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___", - integrations: [new Sentry.Integrations.Prisma({ client: prisma })], + dsn: '___DSN___', + integrations: [new Sentry.Integrations.Prisma({client: prisma})], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); @@ -67,9 +67,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 ( @@ -107,5 +107,4 @@ You can trigger your first event from your development environment by raising an - [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/remix/with-error-monitoring-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md index 110b63c8da98b..2f1877ea738a8 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/remix/with-error-monitoring-and-replay.md @@ -22,12 +22,12 @@ npm install --save @sentry/remix 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___', 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. @@ -38,10 +38,10 @@ 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: ```javascript -import * as Sentry from "@sentry/remix"; +import * as Sentry from '@sentry/remix'; Sentry.init({ - dsn: "___DSN___", + dsn: '___DSN___', }); ``` @@ -55,9 +55,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 ( @@ -96,4 +96,3 @@ You can trigger your first event from your development environment by raising an - [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/remix/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md index 4821cf982499c..3adcb5062e108 100644 --- a/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/remix/with-error-monitoring-performance-and-replay.md @@ -22,12 +22,12 @@ npm install --save @sentry/remix 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___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.remixRouterInstrumentation( @@ -49,13 +49,13 @@ 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___", - integrations: [new Sentry.Integrations.Prisma({ client: prisma })], + dsn: '___DSN___', + integrations: [new Sentry.Integrations.Prisma({client: prisma})], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! }); @@ -71,9 +71,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 ( @@ -111,5 +111,3 @@ You can trigger your first event from your development environment by raising an - [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/remix/with-error-monitoring.md b/src/wizard/javascript/remix/with-error-monitoring.md index b4e09c5edc8b9..b6fbdb218c15a 100644 --- a/src/wizard/javascript/remix/with-error-monitoring.md +++ b/src/wizard/javascript/remix/with-error-monitoring.md @@ -22,22 +22,22 @@ npm install --save @sentry/remix 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___', }); ``` 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"; +import * as Sentry from '@sentry/remix'; Sentry.init({ - dsn: "___DSN___", + dsn: '___DSN___', }); ``` @@ -51,9 +51,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 ( @@ -82,7 +82,7 @@ This snippet contains an intentional error and can be used as a test to make sur 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 ; ``` --- diff --git a/src/wizard/javascript/svelte/index.md b/src/wizard/javascript/svelte/index.md index 777496d9a0b4c..747a9375ea50c 100644 --- a/src/wizard/javascript/svelte/index.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 index 2010114b6effa..a6607dd2bdeb8 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-performance.md @@ -22,20 +22,20 @@ npm install --save @sentry/svelte 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 './app.css'; +import App from './App.svelte'; -import * as Sentry from "@sentry/svelte"; +import * as Sentry from '@sentry/svelte'; Sentry.init({ - dsn: "___PUBLIC_DSN___", + 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"), + target: document.getElementById('app'), }); export default app; @@ -47,10 +47,7 @@ This snippet contains an intentional error and can be used as a test to make sur ```html // SomeComponent.svelte - - + ``` --- @@ -59,5 +56,4 @@ This snippet contains an intentional error and can be used as a test to make sur - [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/svelte/with-error-monitoring-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md index 36b7bd7267094..b27446eb7f3f0 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-and-replay.md @@ -22,13 +22,13 @@ npm install --save @sentry/svelte 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 './app.css'; +import App from './App.svelte'; -import * as Sentry from "@sentry/svelte"; +import * as Sentry from '@sentry/svelte'; Sentry.init({ - dsn: "___PUBLIC_DSN___", + 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. @@ -36,7 +36,7 @@ Sentry.init({ }); const app = new App({ - target: document.getElementById("app"), + target: document.getElementById('app'), }); export default app; @@ -48,10 +48,7 @@ This snippet contains an intentional error and can be used as a test to make sur ```html // SomeComponent.svelte - - + ``` --- @@ -61,4 +58,3 @@ This snippet contains an intentional error and can be used as a test to make sur - [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/svelte/with-error-monitoring-performance-and-replay.md b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md index 98a00fe740f66..bbf21dafaa605 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/svelte/with-error-monitoring-performance-and-replay.md @@ -22,13 +22,13 @@ npm install --save @sentry/svelte Initialize Sentry as early as possible in your application's lifecycle. ```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'; Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Performance Monitoring tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! @@ -38,7 +38,7 @@ Sentry.init({ }); const app = new App({ - target: document.getElementById("app"), + target: document.getElementById('app'), }); export default app; @@ -50,10 +50,7 @@ This snippet contains an intentional error and can be used as a test to make sur ```html // SomeComponent.svelte - - + ``` --- @@ -62,5 +59,3 @@ This snippet contains an intentional error and can be used as a test to make sur - [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/svelte/with-error-monitoring.md b/src/wizard/javascript/svelte/with-error-monitoring.md index 902d71e76441f..42a9b04018160 100644 --- a/src/wizard/javascript/svelte/with-error-monitoring.md +++ b/src/wizard/javascript/svelte/with-error-monitoring.md @@ -22,17 +22,17 @@ npm install --save @sentry/svelte 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 './app.css'; +import App from './App.svelte'; -import * as Sentry from "@sentry/svelte"; +import * as Sentry from '@sentry/svelte'; Sentry.init({ - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', }); const app = new App({ - target: document.getElementById("app"), + target: document.getElementById('app'), }); export default app; @@ -44,10 +44,7 @@ This snippet contains an intentional error and can be used as a test to make sur ```html // SomeComponent.svelte - - + ``` --- diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md index 403c9da2ee704..c15c4e6368785 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-performance.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-performance.md @@ -24,9 +24,9 @@ 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"; +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; Vue.use(Router); @@ -36,7 +36,7 @@ const router = new Router({ Sentry.init({ Vue, - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), @@ -51,15 +51,15 @@ Sentry.init({ new Vue({ router, render: h => h(App), -}).$mount("#app"); +}).$mount('#app'); ``` #### Vue 3 ```javascript -import { createApp } from "vue"; -import { createRouter } from "vue-router"; -import * as Sentry from "@sentry/vue"; +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; const app = createApp({ // ... @@ -70,7 +70,7 @@ const router = createRouter({ Sentry.init({ app, - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), @@ -81,7 +81,7 @@ Sentry.init({ }); app.use(router); -app.mount("#app"); +app.mount('#app'); ``` ## Verify @@ -98,5 +98,4 @@ myUndefinedFunction(); - [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. diff --git a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md index 749e615a3ed51..5f15e21db6dcf 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-and-replay.md @@ -24,9 +24,9 @@ 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"; +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; Vue.use(Router); @@ -36,7 +36,7 @@ const router = new Router({ Sentry.init({ Vue, - dsn: "___PUBLIC_DSN___", + 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. @@ -48,15 +48,15 @@ Sentry.init({ new Vue({ router, render: h => h(App), -}).$mount("#app"); +}).$mount('#app'); ``` #### Vue 3 ```javascript -import { createApp } from "vue"; -import { createRouter } from "vue-router"; -import * as Sentry from "@sentry/vue"; +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; const app = createApp({ // ... @@ -67,7 +67,7 @@ const router = createRouter({ Sentry.init({ app, - dsn: "___PUBLIC_DSN___", + 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. @@ -75,7 +75,7 @@ Sentry.init({ }); app.use(router); -app.mount("#app"); +app.mount('#app'); ``` ## Verify @@ -93,4 +93,3 @@ myUndefinedFunction(); - [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. 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 index 0d3db3de2d4e2..c7703b521f10a 100644 --- a/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md +++ b/src/wizard/javascript/vue/with-error-monitoring-performance-and-replay.md @@ -24,9 +24,9 @@ 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"; +import Vue from 'vue'; +import Router from 'vue-router'; +import * as Sentry from '@sentry/vue'; Vue.use(Router); @@ -36,7 +36,7 @@ const router = new Router({ Sentry.init({ Vue, - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), @@ -55,15 +55,15 @@ Sentry.init({ new Vue({ router, render: h => h(App), -}).$mount("#app"); +}).$mount('#app'); ``` #### Vue 3 ```javascript -import { createApp } from "vue"; -import { createRouter } from "vue-router"; -import * as Sentry from "@sentry/vue"; +import {createApp} from 'vue'; +import {createRouter} from 'vue-router'; +import * as Sentry from '@sentry/vue'; const app = createApp({ // ... @@ -74,7 +74,7 @@ const router = createRouter({ Sentry.init({ app, - dsn: "___PUBLIC_DSN___", + dsn: '___PUBLIC_DSN___', integrations: [ new Sentry.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), @@ -89,7 +89,7 @@ Sentry.init({ }); app.use(router); -app.mount("#app"); +app.mount('#app'); ``` ## Verify @@ -106,5 +106,3 @@ myUndefinedFunction(); - [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.