diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx index 72389d55aa207..1c326463a5be8 100644 --- a/docs/platforms/javascript/guides/angular/index.mdx +++ b/docs/platforms/javascript/guides/angular/index.mdx @@ -32,7 +32,7 @@ npx @sentry/wizard@latest -i angular The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. - + This guide assumes that you enable all features and allow the wizard to add an example component to your application. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. @@ -71,7 +71,7 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col - + ## Next Steps diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx index e26fcc61d13e3..16ac0887997cc 100644 --- a/docs/platforms/javascript/guides/angular/manual-setup.mdx +++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx @@ -75,7 +75,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + The main configuration should happen as early as possible in your app's lifecycle. Typically that means in your `main.ts` file. In addition, you'll need to register some providers to fully instrument your application. @@ -414,7 +414,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx index 40ba29240c5dc..e8f35f030fd57 100644 --- a/docs/platforms/javascript/guides/astro/index.mdx +++ b/docs/platforms/javascript/guides/astro/index.mdx @@ -41,9 +41,6 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index 8aa7e62e94c78..ae6e4d5958733 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -19,7 +19,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "profiling", "logs"]} /> - + ### Install the Sentry SDK @@ -173,7 +173,7 @@ Deploy and trigger your function to start a child span. Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/bun/index.mdx b/docs/platforms/javascript/guides/bun/index.mdx index 7829ca4f6e412..a9018d52c22d5 100644 --- a/docs/platforms/javascript/guides/bun/index.mdx +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -19,7 +19,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "logs"]} /> - + ### Install the SDK @@ -134,7 +134,7 @@ Sentry.startSpan( Finally, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index 8045dd63039b1..23be2a1570658 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -58,7 +58,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Initialize the Sentry SDK @@ -260,7 +260,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx index 638681c2dc85a..e344a20999b9f 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx @@ -80,6 +80,9 @@ export const onRequest = [ ]} /> - + - + diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx index f4364bdbe918b..6482572677c46 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hono.mdx @@ -6,10 +6,10 @@ description: "Learn how to instrument your Hono app on Cloudflare Workers and ca - The community-maintained `@hono/sentry` middleware that uses `toucan-js` has been deprecated in favor of - using `@sentry/cloudflare` directly. - If you're currently using the `@hono/sentry` middleware with `toucan-js`, you should migrate to - `@sentry/cloudflare` directly as shown in this guide. + The community-maintained `@hono/sentry` middleware that uses `toucan-js` has + been deprecated in favor of using `@sentry/cloudflare` directly. If you're + currently using the `@hono/sentry` middleware with `toucan-js`, you should + migrate to `@sentry/cloudflare` directly as shown in this guide. ## Step 1: Install @@ -20,7 +20,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "logs"]} /> - + ### Install the Sentry SDK @@ -83,6 +83,8 @@ export default Sentry.withSentry( platform="javascript.hono" /> + + ## Next Steps At this point, you should have integrated Sentry and should already be sending data to your Sentry project. diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx index 534beca39954c..48b293c215453 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx @@ -30,10 +30,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK @@ -360,7 +357,7 @@ Open the `/sentry-test` route in your browser. You should start a trace and trig Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx index 6d2cd09112470..98de8efa12dbd 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx @@ -22,10 +22,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index 01e8df9a36dc5..91b792cbd2e87 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -34,7 +34,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "logs"]} /> - + ### Install the Sentry SDK @@ -213,7 +213,7 @@ export async function onRequest(context) { Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Known Limitations diff --git a/docs/platforms/javascript/guides/deno/index.mdx b/docs/platforms/javascript/guides/deno/index.mdx index 6976988e763f0..91f6f55a6c128 100644 --- a/docs/platforms/javascript/guides/deno/index.mdx +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -25,7 +25,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "logs"]} /> - + ### Import the Sentry SDK @@ -136,7 +136,7 @@ Sentry.startSpan({ Finally, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index 9a7498e4ea236..995152113344a 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -41,7 +41,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + You should initialize the SDK in both the `main` process and every `renderer` process you spawn. @@ -252,7 +252,7 @@ Start your app and trigger two errors that Sentry will capture: one from the mai Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/ember/index.mdx b/docs/platforms/javascript/guides/ember/index.mdx index 4d4d61e9a6fb1..b6bbd83d70dba 100644 --- a/docs/platforms/javascript/guides/ember/index.mdx +++ b/docs/platforms/javascript/guides/ember/index.mdx @@ -31,7 +31,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Initialize the SDK @@ -173,7 +173,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/firebase/index.mdx b/docs/platforms/javascript/guides/firebase/index.mdx index c56bf0719647d..bb9328810896b 100644 --- a/docs/platforms/javascript/guides/firebase/index.mdx +++ b/docs/platforms/javascript/guides/firebase/index.mdx @@ -33,7 +33,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "profiling", "logs"]} /> - + ### Install the Sentry SDK @@ -176,7 +176,7 @@ exports.tracedFunction = onRequest(async (request, response) => { Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index 2fdc357a800b4..bff36acdc743b 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -76,7 +76,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Initialize the Sentry SDK @@ -196,7 +196,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 77dc7aa54be8d..84340b5685edd 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -31,7 +31,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "profiling", "logs"]} /> - + ### Install the Sentry SDK @@ -133,7 +133,7 @@ exports.helloEvent = Sentry.wrapCloudEventFunction(async (context) => { Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/nestjs/index.mdx b/docs/platforms/javascript/guides/nestjs/index.mdx index 3a5dd57bc8195..6c9f102d6f53d 100644 --- a/docs/platforms/javascript/guides/nestjs/index.mdx +++ b/docs/platforms/javascript/guides/nestjs/index.mdx @@ -29,7 +29,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "profiling", "logs"]} /> - + ### Initialize the Sentry SDK @@ -103,7 +103,7 @@ Let's test your setup and confirm that Sentry is working correctly and sending d Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx index 2fe4b2165d775..d9c87244201d3 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -20,7 +20,7 @@ npx @sentry/wizard@latest -i nuxt The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. - + This guide assumes that you enable all features and allow the wizard to create an example page or component. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. @@ -55,9 +55,10 @@ To test Sentry, you can run your Nuxt application in either production or develo We **recommend testing in production mode** as it most closely resembles your deployed application's environment. - By default, the SDK will add the server config as `sentry.server.config.mjs` to the build. - To find the exact path to this file, enable `debug` mode in your Sentry configuration within `nuxt.config.ts`. - Sentry will then print the exact path during the build process. + By default, the SDK will add the server config as `sentry.server.config.mjs` + to the build. To find the exact path to this file, enable `debug` mode in your + Sentry configuration within `nuxt.config.ts`. Sentry will then print the exact + path during the build process. ### Run in Production Mode (Recommended) @@ -95,7 +96,7 @@ Now, head over to your project on [Sentry.io](https://sentry.io/) to view the co - + ## Next Steps diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 7504409b216c7..100de8b26a163 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -84,7 +84,7 @@ Select which Sentry features you'd like to install in addition to Error Monitori ]} /> - + @@ -248,7 +248,7 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col - + ## Next Steps diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 799694929c321..f9e75753ddc7b 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -73,7 +73,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Expose Entry Point Files @@ -565,7 +565,7 @@ Open the route in your browser. You should start a trace and trigger an error. Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index 84db6936f704a..8ee2dc94081fb 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -14,6 +14,7 @@ categories: If you're using Next.js, Remix, or another framework with server-side rendering, use the dedicated SDK instead: + - [Next.js](/platforms/javascript/guides/nextjs/) - [Remix](/platforms/javascript/guides/remix/) - [Gatsby](/platforms/javascript/guides/gatsby/) @@ -54,7 +55,7 @@ Choose the features you want to configure: ]} /> - + @@ -172,7 +173,7 @@ const container = document.getElementById("app"); const root = createRoot(container, { // Callback called when an error is thrown and not caught by an ErrorBoundary. onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { - console.warn('Uncaught error', error, errorInfo.componentStack); + console.warn("Uncaught error", error, errorInfo.componentStack); }), // Callback called when React catches an error in an ErrorBoundary. onCaughtError: Sentry.reactErrorHandler(), @@ -295,10 +296,7 @@ import * as Sentry from "@sentry/react"; const sentryEnhancer = Sentry.createReduxEnhancer(); -const store = createStore( - rootReducer, - compose(sentryEnhancer) -); +const store = createStore(rootReducer, compose(sentryEnhancer)); ``` diff --git a/docs/platforms/javascript/guides/remix/index.mdx b/docs/platforms/javascript/guides/remix/index.mdx index 0557f18f36572..d5ed822cf07df 100644 --- a/docs/platforms/javascript/guides/remix/index.mdx +++ b/docs/platforms/javascript/guides/remix/index.mdx @@ -21,7 +21,7 @@ npx @sentry/wizard@latest -i remix The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. - + This guide assumes that you enable all features and allow the wizard to create an example page. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. @@ -95,7 +95,7 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col - + ## Next Steps diff --git a/docs/platforms/javascript/guides/remix/manual-setup.mdx b/docs/platforms/javascript/guides/remix/manual-setup.mdx index 35e1a936fcfd5..9657c82438026 100644 --- a/docs/platforms/javascript/guides/remix/manual-setup.mdx +++ b/docs/platforms/javascript/guides/remix/manual-setup.mdx @@ -29,7 +29,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK diff --git a/docs/platforms/javascript/guides/solid/index.mdx b/docs/platforms/javascript/guides/solid/index.mdx index 7e2f7607c5107..b8d79b3a780d8 100644 --- a/docs/platforms/javascript/guides/solid/index.mdx +++ b/docs/platforms/javascript/guides/solid/index.mdx @@ -44,7 +44,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Initialize the Sentry SDK @@ -190,7 +190,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/solidstart/index.mdx b/docs/platforms/javascript/guides/solidstart/index.mdx index 8fbef30f0787f..b04bdb221d94b 100644 --- a/docs/platforms/javascript/guides/solidstart/index.mdx +++ b/docs/platforms/javascript/guides/solidstart/index.mdx @@ -35,7 +35,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK @@ -368,7 +368,7 @@ Open the page in the browser and click the button to trigger a frontend error, a Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx index 09fa9131a98c2..feb8cdae7f8ae 100644 --- a/docs/platforms/javascript/guides/svelte/index.mdx +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -51,7 +51,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your `main.js` or `main.ts` file. @@ -283,7 +283,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx index 61ae03e43d1f4..84f33a11652a5 100644 --- a/docs/platforms/javascript/guides/sveltekit/index.mdx +++ b/docs/platforms/javascript/guides/sveltekit/index.mdx @@ -23,7 +23,7 @@ npx @sentry/wizard@latest -i sveltekit The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. - + This guide assumes that you enable all features and allow the wizard to create an example page. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. @@ -66,7 +66,7 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col - + ## Next Steps diff --git a/docs/platforms/javascript/guides/sveltekit/manual-setup__v10.7.0.mdx b/docs/platforms/javascript/guides/sveltekit/manual-setup__v10.7.0.mdx index e87c2ac008fa4..00c0ef1df6836 100644 --- a/docs/platforms/javascript/guides/sveltekit/manual-setup__v10.7.0.mdx +++ b/docs/platforms/javascript/guides/sveltekit/manual-setup__v10.7.0.mdx @@ -15,7 +15,7 @@ You need: - A Sentry [account](https://sentry.io/signup/) and [project](/product/projects/) - Your application up and running -- SvelteKit version `2.0.0`+ +- SvelteKit version `2.0.0`+ - Vite version `4.2`+ @@ -49,7 +49,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK @@ -323,7 +323,7 @@ Additionally, this starts a trace to measure the time it takes for the API reque Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx index b710e5821ec89..fe05168eb4c34 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx @@ -28,7 +28,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK @@ -443,7 +443,7 @@ Additionally, this starts a performance trace to measure the time it takes for t Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx index bc62cca30cf78..dcf83089c37ee 100644 --- a/docs/platforms/javascript/guides/vue/index.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -41,7 +41,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + To initialize Sentry in your Vue application, add the following code snippet to your `main.js`: @@ -296,7 +296,7 @@ Open the page in a browser and click the button to trigger a frontend error and Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index edd06a8484f6f..02dff63aea87e 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -25,7 +25,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "logs"]} /> - + ### Install the Sentry SDK @@ -193,7 +193,7 @@ function testWasmTracing() { Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/includes/quick-start-features-expandable-cloudflare-frameworks.mdx b/includes/quick-start-features-expandable-cloudflare-frameworks.mdx new file mode 100644 index 0000000000000..fc54d571892c2 --- /dev/null +++ b/includes/quick-start-features-expandable-cloudflare-frameworks.mdx @@ -0,0 +1,10 @@ +import { FeatureInfo } from "sentry-docs/components/featureInfo"; + + + + + + diff --git a/includes/quick-start-features-expandable.mdx b/includes/quick-start-features-expandable.mdx new file mode 100644 index 0000000000000..d3be59cddbefe --- /dev/null +++ b/includes/quick-start-features-expandable.mdx @@ -0,0 +1,44 @@ +import { FeatureInfo } from "sentry-docs/components/featureInfo"; + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/includes/quick-start-locate-data-expandable-cloudflare-frameworks.mdx b/includes/quick-start-locate-data-expandable-cloudflare-frameworks.mdx new file mode 100644 index 0000000000000..062f60ba3a67d --- /dev/null +++ b/includes/quick-start-locate-data-expandable-cloudflare-frameworks.mdx @@ -0,0 +1,10 @@ +import { FeatureInfo } from "sentry-docs/components/featureInfo"; + + + + + + diff --git a/includes/quick-start-locate-data-expandable.mdx b/includes/quick-start-locate-data-expandable.mdx new file mode 100644 index 0000000000000..466a8883a61d8 --- /dev/null +++ b/includes/quick-start-locate-data-expandable.mdx @@ -0,0 +1,44 @@ +import { FeatureInfo } from "sentry-docs/components/featureInfo"; + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/platform-includes/getting-started-complete/javascript.astro.mdx b/platform-includes/getting-started-complete/javascript.astro.mdx index 21cb659529b80..ee648b4470084 100644 --- a/platform-includes/getting-started-complete/javascript.astro.mdx +++ b/platform-includes/getting-started-complete/javascript.astro.mdx @@ -415,7 +415,17 @@ To test tracing, create a custom span to measure the time it takes for the API r Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + + + + + + + + + + + ## Next Steps diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx index 8c73f92de2407..3cc6257b3b8d7 100644 --- a/platform-includes/getting-started-complete/javascript.mdx +++ b/platform-includes/getting-started-complete/javascript.mdx @@ -14,7 +14,7 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + ### Install the Sentry SDK @@ -42,7 +42,7 @@ Choose the features you want to configure, and this guide will show you how: Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + At this point, you should have integrated Sentry into your JavaScript application and should already be sending data to your Sentry project. diff --git a/platform-includes/getting-started-complete/javascript.nuxt.mdx b/platform-includes/getting-started-complete/javascript.nuxt.mdx index adb312e62cdaa..758c7d3da4201 100644 --- a/platform-includes/getting-started-complete/javascript.nuxt.mdx +++ b/platform-includes/getting-started-complete/javascript.nuxt.mdx @@ -17,7 +17,17 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + + + + + + + + + + + ### Install the Sentry SDK @@ -366,7 +376,17 @@ After running your project: Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + + + + + + + + + + + ## Next Steps diff --git a/platform-includes/getting-started-complete/javascript.remix.mdx b/platform-includes/getting-started-complete/javascript.remix.mdx index 21648673b1d69..c738b3d7e9837 100644 --- a/platform-includes/getting-started-complete/javascript.remix.mdx +++ b/platform-includes/getting-started-complete/javascript.remix.mdx @@ -401,7 +401,16 @@ Open the page in a browser (for most Remix applications, this will be at localho Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + + + + + + + + + + ## Next Steps diff --git a/platform-includes/getting-started-complete/javascript.sveltekit.mdx b/platform-includes/getting-started-complete/javascript.sveltekit.mdx index 9088503457f04..95bd0eefe3382 100644 --- a/platform-includes/getting-started-complete/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-complete/javascript.sveltekit.mdx @@ -65,10 +65,16 @@ Choose the features you want to configure, and this guide will show you how: ]} /> - + + + + + + + + + + ### Install the Sentry SDK @@ -457,7 +463,16 @@ Additionally, this starts a trace to measure the time it takes for the API reque Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + + + + + + + + + + ## Next Steps diff --git a/platform-includes/getting-started-features-expandable/_default.mdx b/platform-includes/getting-started-features-expandable/_default.mdx index fbc9fe9ee8a4b..2f7c4b0f1c3d6 100644 --- a/platform-includes/getting-started-features-expandable/_default.mdx +++ b/platform-includes/getting-started-features-expandable/_default.mdx @@ -1,17 +1 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Session Replay**](/product/explore/session-replay/web): - Get to the root cause of an issue faster by viewing a video-like reproduction - of what was happening in the user's browser before, during, and after the - problem. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - + diff --git a/platform-includes/getting-started-features-expandable/javascript.astro.mdx b/platform-includes/getting-started-features-expandable/javascript.astro.mdx deleted file mode 100644 index 94ca5436fc63d..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.astro.mdx +++ /dev/null @@ -1,18 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Session Replay**](/product/explore/session-replay/web): - Get to the root cause of an issue faster by viewing a video-like reproduction - of what was happening in the user's browser before, during, and after the - problem. -- [**Profiling**](/product/explore/profiling/): Gain deeper insight than traditional tracing without custom instrumentation, letting you discover slow-to-execute or resource-intensive functions in your app. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.azure-functions.mdx b/platform-includes/getting-started-features-expandable/javascript.azure-functions.mdx deleted file mode 100644 index a728d1e44466b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.azure-functions.mdx +++ /dev/null @@ -1,14 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Profiling**](/product/explore/profiling/): Gain deeper insight than traditional tracing without custom instrumentation, letting you discover slow-to-execute or resource-intensive functions in your app. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.bun.mdx b/platform-includes/getting-started-features-expandable/javascript.bun.mdx deleted file mode 100644 index 24c6ca4523b0b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.bun.mdx +++ /dev/null @@ -1,13 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.cloudflare.mdx b/platform-includes/getting-started-features-expandable/javascript.cloudflare.mdx deleted file mode 100644 index 24c6ca4523b0b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.cloudflare.mdx +++ /dev/null @@ -1,13 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.deno.mdx b/platform-includes/getting-started-features-expandable/javascript.deno.mdx deleted file mode 100644 index 24c6ca4523b0b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.deno.mdx +++ /dev/null @@ -1,13 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.node.mdx b/platform-includes/getting-started-features-expandable/javascript.node.mdx deleted file mode 100644 index a728d1e44466b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.node.mdx +++ /dev/null @@ -1,14 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Profiling**](/product/explore/profiling/): Gain deeper insight than traditional tracing without custom instrumentation, letting you discover slow-to-execute or resource-intensive functions in your app. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.react-router.mdx b/platform-includes/getting-started-features-expandable/javascript.react-router.mdx deleted file mode 100644 index 94ca5436fc63d..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.react-router.mdx +++ /dev/null @@ -1,18 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Session Replay**](/product/explore/session-replay/web): - Get to the root cause of an issue faster by viewing a video-like reproduction - of what was happening in the user's browser before, during, and after the - problem. -- [**Profiling**](/product/explore/profiling/): Gain deeper insight than traditional tracing without custom instrumentation, letting you discover slow-to-execute or resource-intensive functions in your app. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-features-expandable/javascript.wasm.mdx b/platform-includes/getting-started-features-expandable/javascript.wasm.mdx deleted file mode 100644 index 24c6ca4523b0b..0000000000000 --- a/platform-includes/getting-started-features-expandable/javascript.wasm.mdx +++ /dev/null @@ -1,13 +0,0 @@ - - -- [**Issues**](/product/issues) (always enabled): Sentry's core error monitoring product that automatically reports errors, - uncaught exceptions, and unhandled rejections. If you have something that - looks like an exception, Sentry can capture it. -- [**Tracing**](/product/tracing): Track software performance while seeing the - impact of errors across multiple systems. For example, distributed tracing - allows you to follow a request from the frontend to the backend and back. -- [**Logs**](/product/explore/logs): Centralize and analyze your application logs to - correlate them with errors and performance issues. Search, filter, and - visualize log data to understand what's happening in your applications. - - diff --git a/platform-includes/getting-started-node/javascript.mdx b/platform-includes/getting-started-node/javascript.mdx index 82065334b18c0..564fc2678e241 100644 --- a/platform-includes/getting-started-node/javascript.mdx +++ b/platform-includes/getting-started-node/javascript.mdx @@ -8,7 +8,7 @@ Choose the features you want to configure, and this guide will show you how: options={["error-monitoring", "performance", "profiling", "logs"]} /> - + ### Install the Sentry SDK @@ -74,7 +74,7 @@ Let's test your setup and confirm that Sentry is working correctly and sending d Finally, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps diff --git a/platform-includes/getting-started-verify-locate-data/javascript.astro.mdx b/platform-includes/getting-started-verify-locate-data/javascript.astro.mdx deleted file mode 100644 index 1a85cccbb610d..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.astro.mdx +++ /dev/null @@ -1,9 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Replays**](https://sentry.io/explore/replays) page and select an entry from the list to get a detailed view where you can replay the interaction and get more information to help you troubleshoot. -4. Open the [**Profiles**](https://sentry.io/orgredirect/organizations/:orgslug/profiling) page, select a transaction, and then a profile ID to view its flame graph. For more information, click [here](/product/explore/profiling/profile-details/). -5. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.azure-functions.mdx b/platform-includes/getting-started-verify-locate-data/javascript.azure-functions.mdx deleted file mode 100644 index 4d0bdfc550bd3..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.azure-functions.mdx +++ /dev/null @@ -1,8 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues) page and select an error from the issues list to view the full details and context of this error. For an interactive UI walkthrough, click [here](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/orgredirect/organizations/:orgslug/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Profiles**](https://sentry.io/orgredirect/organizations/:orgslug/profiling) page, select a transaction, and then a profile ID to view its flame graph. For more information, click [here](/product/explore/profiling/profile-details/). -4. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.bun.mdx b/platform-includes/getting-started-verify-locate-data/javascript.bun.mdx deleted file mode 100644 index 2aeda41f6656d..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.bun.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.cloudflare.mdx b/platform-includes/getting-started-verify-locate-data/javascript.cloudflare.mdx deleted file mode 100644 index 2aeda41f6656d..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.cloudflare.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.deno.mdx b/platform-includes/getting-started-verify-locate-data/javascript.deno.mdx deleted file mode 100644 index 2aeda41f6656d..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.deno.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.mdx b/platform-includes/getting-started-verify-locate-data/javascript.mdx index 57fcd701a29dc..35236edf62cd0 100644 --- a/platform-includes/getting-started-verify-locate-data/javascript.mdx +++ b/platform-includes/getting-started-verify-locate-data/javascript.mdx @@ -1,8 +1 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Replays**](https://sentry.io/explore/replays) page and select an entry from the list to get a detailed view where you can replay the interaction and get more information to help you troubleshoot. -4. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - \ No newline at end of file + diff --git a/platform-includes/getting-started-verify-locate-data/javascript.node.mdx b/platform-includes/getting-started-verify-locate-data/javascript.node.mdx deleted file mode 100644 index 4d0bdfc550bd3..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.node.mdx +++ /dev/null @@ -1,8 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues) page and select an error from the issues list to view the full details and context of this error. For an interactive UI walkthrough, click [here](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/orgredirect/organizations/:orgslug/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Profiles**](https://sentry.io/orgredirect/organizations/:orgslug/profiling) page, select a transaction, and then a profile ID to view its flame graph. For more information, click [here](/product/explore/profiling/profile-details/). -4. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/platform-includes/getting-started-verify-locate-data/javascript.wasm.mdx b/platform-includes/getting-started-verify-locate-data/javascript.wasm.mdx deleted file mode 100644 index 2aeda41f6656d..0000000000000 --- a/platform-includes/getting-started-verify-locate-data/javascript.wasm.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -1. Open the [**Issues**](https://sentry.io/issues) page and select an error from the issues list to view the full details and context of this error. For more details, see this [interactive walkthrough](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). -2. Open the [**Traces**](https://sentry.io/explore/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). -3. Open the [**Logs**](https://sentry.io/explore/logs) page and filter by service, environment, or search keywords to view log entries from your application. For an interactive UI walkthrough, click [here](/product/explore/logs/#overview). - - diff --git a/src/components/featureInfo.tsx b/src/components/featureInfo.tsx new file mode 100644 index 0000000000000..efb752616b2ab --- /dev/null +++ b/src/components/featureInfo.tsx @@ -0,0 +1,181 @@ +import type {ReactNode} from 'react'; +import {Fragment} from 'react'; + +import {ExternalLink} from './externalLink'; + +type FeatureKey = + | 'issues' + | 'tracing' + | 'sessionReplay' + | 'logs' + | 'profiling' + | 'userFeedback' + | 'metrics'; + +const FEATURE_DATA: Record< + FeatureKey, + { + findInSentry: ReactNode; + learnMore: ReactNode; + link: string; + title: string; + } +> = { + issues: { + title: 'Issues', + link: '/product/issues', + learnMore: + "Sentry's core error monitoring product that automatically reports errors, uncaught exceptions, and unhandled rejections. If you have something that looks like an exception, Sentry can capture it.", + findInSentry: ( + + Open the{' '} + + Issues + {' '} + page and select an error from the issues list to view the full details and context + of this error. For more details, see this{' '} + + interactive walkthrough + + . + + ), + }, + tracing: { + title: 'Tracing', + link: '/product/tracing', + learnMore: + 'Track software performance while seeing the impact of errors across multiple systems. For example, distributed tracing allows you to follow a request from the frontend to the backend and back.', + findInSentry: ( + + Open the{' '} + + Traces + {' '} + page and select a trace to reveal more information about each span, its duration, + and any errors. For an interactive UI walkthrough, click{' '} + + here + + . + + ), + }, + sessionReplay: { + title: 'Session Replay', + link: '/product/explore/session-replay/web', + learnMore: + "Get to the root cause of an issue faster by viewing a video-like reproduction of what was happening in the user's browser before, during, and after the problem.", + findInSentry: ( + + Open the{' '} + + Replays + {' '} + page and select an entry from the list to get a detailed view where you can replay + the interaction and get more information to help you troubleshoot. + + ), + }, + logs: { + title: 'Logs', + link: '/product/explore/logs', + learnMore: + "Centralize and analyze your application logs to correlate them with errors and performance issues. Search, filter, and visualize log data to understand what's happening in your applications.", + findInSentry: ( + + Open the{' '} + + Logs + {' '} + page and filter by service, environment, or search keywords to view log entries + from your application. For an interactive UI walkthrough, click{' '} + here. + + ), + }, + profiling: { + title: 'Profiling', + link: '/product/explore/profiling/', + learnMore: + 'Gain deeper insight than traditional tracing without custom instrumentation, letting you discover slow-to-execute or resource-intensive functions in your app.', + findInSentry: ( + + Open the{' '} + + Profiles + {' '} + page, select a transaction, and then a profile ID to view its flame graph. For + more information, click{' '} + here. + + ), + }, + userFeedback: { + title: 'User Feedback', + link: '/product/user-feedback', + learnMore: + 'Collect feedback directly from users when they encounter errors, allowing them to describe what happened and provide context that helps you understand and resolve issues faster.', + findInSentry: ( + + Open the{' '} + + User Feedback + {' '} + page and click on individual feedback to see more details all in one view. For + more information, click here. + + ), + }, + metrics: { + title: 'Metrics', + link: '/product/explore/metrics', + learnMore: + "Track and analyze custom metrics, such as response times and database query durations, to understand trends and patterns in your application's performance and behavior over time.", + findInSentry: ( + + Open the{' '} + + Metrics + {' '} + page to view and analyze your custom metrics. For more details, see this{' '} + interactive walkthrough. + + ), + }, +}; + +type FeatureInfoProps = { + features: FeatureKey[]; + type: 'learnMore' | 'findInSentry'; +}; + +/** + * FeatureInfo displays information about Sentry features in list format. + * For example, we use it in our quick start guides to show helpful information about features + * + * @param features - Array of feature keys to display + * @param type - learnMore shows feature descriptions, findInSentry shows navigation help + */ +export function FeatureInfo({features, type}: FeatureInfoProps) { + return ( +
    + {features.map(key => { + const feature = FEATURE_DATA[key]; + + if (type === 'learnMore') { + return ( +
  • + + {feature.title} + + {key === 'issues' && ' (always enabled)'}: {feature.learnMore} +
    • + ); + } + + return
  • {feature.findInSentry}
    • ; + })} +
+ ); +}