diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx index 03c173d8ef95b..f6b9c0b8cc930 100644 --- a/docs/platforms/javascript/guides/angular/index.mdx +++ b/docs/platforms/javascript/guides/angular/index.mdx @@ -78,6 +78,8 @@ Don't forget to explore the example component's code in your project to understa + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx index 422012b083559..ec276f16beaa0 100644 --- a/docs/platforms/javascript/guides/angular/manual-setup.mdx +++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx @@ -470,6 +470,8 @@ class AppComponent { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index 9aceeaef32d89..432f4ae782859 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -220,6 +220,8 @@ module.exports = async function (context, req) { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/bun/index.mdx b/docs/platforms/javascript/guides/bun/index.mdx index 878dcf26347af..c2b52bac33162 100644 --- a/docs/platforms/javascript/guides/bun/index.mdx +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -185,6 +185,8 @@ Sentry.startSpan( + + ### View Captured Data in Sentry 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). 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 6841468456563..9795ac5faa6d9 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx @@ -453,6 +453,8 @@ export default function SentryTestPage() { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx index 71889812793f8..82ba8eba8edc4 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx @@ -266,6 +266,18 @@ To verify Sentry is capturing errors, add a test button to one of your pages: Run your app with `wrangler dev` (or through your Vite build with Cloudflare plugin), click the button, and check your Sentry project for the error. + + + + + + + + +### View Captured Data in Sentry + +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 @@ -274,6 +286,7 @@ At this point, you should have integrated Sentry and should already be sending d Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: +- Explore [practical guides](/guides/) on what to monitor, log, track, and investigate after setup - Learn how to [manually capture errors](/platforms/javascript/guides/cloudflare/usage/) - Continue to [customize your configuration](/platforms/javascript/guides/cloudflare/configuration/) - Make use of [Cloudflare-specific features](/platforms/javascript/guides/cloudflare/features) diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index 85228e0af237d..968bfa4eb225e 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -355,6 +355,8 @@ export async function onRequest(context) { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/deno/index.mdx b/docs/platforms/javascript/guides/deno/index.mdx index b5348e0a6a75b..668fffc8a8e3f 100644 --- a/docs/platforms/javascript/guides/deno/index.mdx +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -204,6 +204,8 @@ Sentry.startSpan( + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/effect/index.mdx b/docs/platforms/javascript/guides/effect/index.mdx index d20a50520e5dc..91f3827fa7ce6 100644 --- a/docs/platforms/javascript/guides/effect/index.mdx +++ b/docs/platforms/javascript/guides/effect/index.mdx @@ -330,7 +330,7 @@ const program = Effect.gen(function* () { -### Logs +### Logs @@ -370,6 +370,12 @@ const program = Effect.gen(function* () { + + + + + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index 59a16cac432d8..89e1946478452 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -370,6 +370,8 @@ document.getElementById("testError").addEventListener("click", () => { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/elysia/index.mdx b/docs/platforms/javascript/guides/elysia/index.mdx index 4ec341e1de805..b552d7e2e71f4 100644 --- a/docs/platforms/javascript/guides/elysia/index.mdx +++ b/docs/platforms/javascript/guides/elysia/index.mdx @@ -236,6 +236,8 @@ app.get("/debug-sentry", async () => { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/ember/index.mdx b/docs/platforms/javascript/guides/ember/index.mdx index 8eaa5474d28c2..d4830b3596492 100644 --- a/docs/platforms/javascript/guides/ember/index.mdx +++ b/docs/platforms/javascript/guides/ember/index.mdx @@ -220,6 +220,8 @@ export default class ApplicationController extends Controller { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/firebase/index.mdx b/docs/platforms/javascript/guides/firebase/index.mdx index 5f2f545b03829..b8a0da5b719d1 100644 --- a/docs/platforms/javascript/guides/firebase/index.mdx +++ b/docs/platforms/javascript/guides/firebase/index.mdx @@ -254,6 +254,8 @@ exports.tracedFunction = onRequest(async (request, response) => { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index be5192783e19e..286f797385998 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -248,6 +248,8 @@ Then, open the page in a browser and click the button to trigger a frontend erro + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 6a81e3b5326e9..c6f5824657b3d 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -175,6 +175,8 @@ exports.helloEvent = Sentry.wrapCloudEventFunction(async (context) => { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/nextjs/index.mdx b/docs/platforms/javascript/guides/nextjs/index.mdx index 42fec00172724..d8e5ec0206f9e 100644 --- a/docs/platforms/javascript/guides/nextjs/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/index.mdx @@ -297,7 +297,7 @@ You should see "This is a test error" with a full stack trace pointing to your s **Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) -You should see the page load trace and the button click span. Learn more about [custom spans](/platforms/javascript/guides/nextjs/tracing/instrumentation/custom-instrumentation/). +You should see the page load trace and the button click span. Learn more about custom spans. @@ -305,13 +305,13 @@ You should see the page load trace and the button click span. Learn more about [ **Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) -Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](/platforms/javascript/guides/nextjs/session-replay/). +Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration. -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) +**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) See structured log entries from your application. You can send logs from anywhere: @@ -321,10 +321,24 @@ Sentry.logger.warn("Slow response", { duration: 5000 }); Sentry.logger.error("Operation failed", { reason: "timeout" }); ``` -Learn more about [Logs configuration](/platforms/javascript/guides/nextjs/logs/). +Learn more about Logs configuration. +**Application Metrics** — [Open Metrics](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time: + +```typescript +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + +Learn more about Application Metrics. + - If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/) diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx index 1e224bfd10587..b98417bf0d70c 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx @@ -504,7 +504,7 @@ const result = await Sentry.startSpan( -### Logs +### Logs Logs are enabled by default. Use the Sentry logger to send structured logs from anywhere in your application. @@ -573,6 +573,36 @@ Sentry.init({ + + + + + +### Application Metrics + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time. +Application Metrics are enabled by default. + +**Verify:** Add a metrics statement, trigger it, then check [**Metrics**](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) in Sentry. + + + + +```typescript +import * as Sentry from "@sentry/nextjs"; + +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + + + + + +

Hybrid Apps (App Router + Pages Router)

If your application uses both the App Router and Pages Router: diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx index cd9cb10ad5411..c9f4a7b89f6a0 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx @@ -402,7 +402,7 @@ Sentry.init({ -### Logs +### Logs Logs are enabled by default. Use the Sentry logger to send structured logs. @@ -426,6 +426,36 @@ Sentry.logger.error("Error occurred"); + + + + + +### Application Metrics + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time. +Application Metrics are enabled by default. + +**Verify:** Add a metrics statement, trigger it, then check [**Metrics**](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) in Sentry. + + + + +```typescript +import * as Sentry from "@sentry/nextjs"; + +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + + + + + + ## Vercel Cron Jobs (Optional) Automatically create [Cron Monitors](/product/monitors-and-alerts/monitors/crons/) in Sentry for your [Vercel cron jobs](https://vercel.com/docs/cron-jobs). diff --git a/docs/platforms/javascript/guides/nitro/index.mdx b/docs/platforms/javascript/guides/nitro/index.mdx index 3ddd3470bfc9c..98d23fa3ca5db 100644 --- a/docs/platforms/javascript/guides/nitro/index.mdx +++ b/docs/platforms/javascript/guides/nitro/index.mdx @@ -262,6 +262,8 @@ export default defineHandler(async () => { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx index 13b943b99f447..1f7f3d013726d 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -103,6 +103,8 @@ If you used the Nuxt installation wizard, after building and running your projec Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete. + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 21126552a0542..4b1bb6270e6be 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -220,6 +220,8 @@ If you used the React Router Framework Mode installation wizard, explore the exa + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 6e19d3b6b681e..dabe1be6787e4 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -623,6 +623,8 @@ export default function ExamplePage() { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index 45fe635258a13..b8c2fe7ee126c 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -338,7 +338,7 @@ You should see "Sentry Test Error" with a stack trace pointing to your source co **Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) -You should see page load traces and the test span. Learn more about [custom instrumentation](/platforms/javascript/guides/react/tracing/instrumentation/custom-instrumentation/). +You should see page load traces and the test span. Learn more about custom instrumentation. @@ -346,18 +346,22 @@ You should see page load traces and the test span. Learn more about [custom inst **Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) -Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](/platforms/javascript/guides/react/session-replay/). +Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration. -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) +**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) -See structured log entries from your application. Learn more about [Logs configuration](/platforms/javascript/guides/react/logs/). +See structured log entries from your application. Learn more about Logs configuration. +**Application Metrics** — [Open Metrics](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time. Learn more about Application Metrics. + @@ -405,6 +409,16 @@ Sentry.logger.error("Operation failed", { reason: "timeout" }); +Track metrics from anywhere in your app: + +```javascript +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + @@ -440,6 +454,6 @@ You've successfully integrated Sentry into your React application! Here's what t - [Distributed Tracing](/platforms/javascript/guides/react/tracing/distributed-tracing/) — Trace requests from your React frontend to backend services - [Connect GitHub + Seer](/integrations/source-code-mgmt/github/#installing-github) — Enable AI-powered [root cause analysis](/product/ai-in-sentry/seer/) by connecting your repository - [Logs](/platforms/javascript/guides/react/logs/) — Send structured logs correlated with errors and traces -- [Metrics](/platforms/javascript/guides/react/metrics/) — Track custom counters, gauges, and distributions to monitor application health +- [Metrics](/platforms/javascript/guides/react/metrics/) — Track custom counters, gauges, and distributions to monitor application health diff --git a/docs/platforms/javascript/guides/remix/index.mdx b/docs/platforms/javascript/guides/remix/index.mdx index a0208a450ad51..ac18a0a26c530 100644 --- a/docs/platforms/javascript/guides/remix/index.mdx +++ b/docs/platforms/javascript/guides/remix/index.mdx @@ -119,6 +119,8 @@ Don't forget to explore the example page's code in your project to understand wh + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/solid/index.mdx b/docs/platforms/javascript/guides/solid/index.mdx index 3cc168d751cee..e417e2e9eb34c 100644 --- a/docs/platforms/javascript/guides/solid/index.mdx +++ b/docs/platforms/javascript/guides/solid/index.mdx @@ -243,6 +243,8 @@ Then, open the page in a browser and click the button to trigger a frontend erro + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/solidstart/index.mdx b/docs/platforms/javascript/guides/solidstart/index.mdx index 6b6f9a5e3307b..d2484c36444c5 100644 --- a/docs/platforms/javascript/guides/solidstart/index.mdx +++ b/docs/platforms/javascript/guides/solidstart/index.mdx @@ -506,6 +506,8 @@ Then, open the page in the browser and click the button to trigger a frontend er + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx index bb03cc7bd70d3..2cb08f8d09887 100644 --- a/docs/platforms/javascript/guides/svelte/index.mdx +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -295,6 +295,8 @@ Then, open the page in a browser and click the button to trigger a frontend erro + + ### View Captured Data in Sentry diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx index b73b4c33291bd..9e334b9eafb45 100644 --- a/docs/platforms/javascript/guides/sveltekit/index.mdx +++ b/docs/platforms/javascript/guides/sveltekit/index.mdx @@ -47,6 +47,8 @@ If you used the SvelteKit installation wizard, explore the example files' code i + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx index b9b9ad1e17854..8bf287b884710 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx @@ -72,21 +72,20 @@ You should see "Sentry Test Error" with a full stack trace pointing to your sour **Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) -You should see page load and navigation traces. Learn more about [custom spans](/platforms/javascript/guides/tanstackstart-react/tracing/instrumentation/custom-instrumentation/). - +You should see page load and navigation traces. Learn more about custom spans. **Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) -Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](/platforms/javascript/guides/tanstackstart-react/session-replay/). +Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration. -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) +**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) See structured log entries from your application. You can send logs from anywhere: @@ -96,10 +95,24 @@ Sentry.logger.warn("Slow response", { duration: 5000 }); Sentry.logger.error("Operation failed", { reason: "timeout" }); ``` -Learn more about [Logs configuration](/platforms/javascript/guides/tanstackstart-react/logs/). +Learn more about Logs configuration. +**Application Metrics** — [Open Metrics](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time: + +```typescript +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + +Learn more about Application Metrics. + - If you encountered issues with the installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/tanstackstart-react/manual-setup/) diff --git a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx index dadf7f3a9c1e0..3237ff7f671ce 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx @@ -690,6 +690,8 @@ Additionally, this starts a performance trace to measure the time it takes for t + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx index a02d37ecb6352..eb6a6b7f6219e 100644 --- a/docs/platforms/javascript/guides/vue/index.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -351,6 +351,8 @@ export default { + + ### View Captured Data in Sentry 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). diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 96d747fc21916..8ec7ed763edcb 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -266,6 +266,8 @@ function testWasmTracing() { + + ### View Captured Data in Sentry 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). diff --git a/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx b/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx index 5c3879e1fa3dd..b4c835d14cacf 100644 --- a/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx +++ b/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx @@ -1,4 +1,4 @@ -### Logs +### Logs diff --git a/includes/logs/javascript-quick-start-verify-logs.mdx b/includes/logs/javascript-quick-start-verify-logs.mdx deleted file mode 100644 index 738d92c83ff28..0000000000000 --- a/includes/logs/javascript-quick-start-verify-logs.mdx +++ /dev/null @@ -1,17 +0,0 @@ -### Logs - -To verify that Sentry catches your logs, add some log statements to your application: - -```javascript -Sentry.logger.info("User example action completed"); - -Sentry.logger.warn("Slow operation detected", { - operation: "data_fetch", - duration: 3500, -}); - -Sentry.logger.error("Validation failed", { - field: "email", - reason: "Invalid email", -}); -``` diff --git a/includes/metrics/javascript-quick-start-verify-metrics-splitlayout.mdx b/includes/metrics/javascript-quick-start-verify-metrics-splitlayout.mdx new file mode 100644 index 0000000000000..ee6011fa08dec --- /dev/null +++ b/includes/metrics/javascript-quick-start-verify-metrics-splitlayout.mdx @@ -0,0 +1,28 @@ +### Application Metrics + +Application Metrics are enabled by default. + + + + + +Send test metrics from your app to verify that metrics are arriving in Sentry: + + +In a Node.js runtime, you can use the [NodeRuntimeMetrics](/platforms/javascript/guides/node/configuration/integrations/noderuntimemetrics/) integration to automatically collect Node.js runtime health metrics. + + + + + +```javascript +Sentry.metrics.count("checkout.failed", 1) +Sentry.metrics.gauge("queue.depth", 42) +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + + + + diff --git a/includes/metrics/python-quick-start-verify-metrics-splitlayout.mdx b/includes/metrics/python-quick-start-verify-metrics-splitlayout.mdx index f3a5bccaf7e86..b99ff1b168f35 100644 --- a/includes/metrics/python-quick-start-verify-metrics-splitlayout.mdx +++ b/includes/metrics/python-quick-start-verify-metrics-splitlayout.mdx @@ -1,10 +1,10 @@ -### Metrics +### Application Metrics -Send test metrics from your app to verify metrics are arriving in Sentry: +Send test metrics from your app to verify that metrics are arriving in Sentry: diff --git a/includes/quick-start-features-expandable-cloudflare-frameworks.mdx b/includes/quick-start-features-expandable-cloudflare-frameworks.mdx index fc54d571892c2..02b338117cb1d 100644 --- a/includes/quick-start-features-expandable-cloudflare-frameworks.mdx +++ b/includes/quick-start-features-expandable-cloudflare-frameworks.mdx @@ -3,7 +3,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; diff --git a/includes/quick-start-features-expandable.mdx b/includes/quick-start-features-expandable.mdx index be0cf30e3ebb7..ba7cb1d6588e0 100644 --- a/includes/quick-start-features-expandable.mdx +++ b/includes/quick-start-features-expandable.mdx @@ -12,15 +12,16 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; "sessionReplay", "logs", "userFeedback", + "metrics" ]} type="learnMore" /> - + @@ -29,7 +30,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; @@ -37,7 +38,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; - + @@ -50,6 +51,15 @@ 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 index 3235e9d516024..9b5fde4ae6dca 100644 --- a/includes/quick-start-locate-data-expandable.mdx +++ b/includes/quick-start-locate-data-expandable.mdx @@ -12,15 +12,16 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; "sessionReplay", "logs", "userFeedback", + "metrics" ]} type="findInSentry" /> - + @@ -29,7 +30,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; @@ -37,7 +38,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; - + @@ -50,6 +51,15 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; + + + + + + + + ### View Captured Data in Sentry 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). diff --git a/platform-includes/getting-started-complete/javascript.nuxt.mdx b/platform-includes/getting-started-complete/javascript.nuxt.mdx index 2ad1969a746c5..c32189178033a 100644 --- a/platform-includes/getting-started-complete/javascript.nuxt.mdx +++ b/platform-includes/getting-started-complete/javascript.nuxt.mdx @@ -502,6 +502,8 @@ Then update the test page by including a new button that executes a function to + + Once you have your test code in place, open the page in a browser and click the button to trigger an error. diff --git a/platform-includes/getting-started-complete/javascript.remix.mdx b/platform-includes/getting-started-complete/javascript.remix.mdx index 9e240377c4c78..1be853ff07fe8 100644 --- a/platform-includes/getting-started-complete/javascript.remix.mdx +++ b/platform-includes/getting-started-complete/javascript.remix.mdx @@ -519,6 +519,8 @@ Open the page in a browser and click the button to trigger the frontend error an + + ### View Captured Data in Sentry 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). diff --git a/platform-includes/getting-started-complete/javascript.sveltekit.mdx b/platform-includes/getting-started-complete/javascript.sveltekit.mdx index c557aec4777c1..2352446c8765e 100644 --- a/platform-includes/getting-started-complete/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-complete/javascript.sveltekit.mdx @@ -607,6 +607,8 @@ Additionally, this starts a trace to measure the time it takes for the API reque + + ### View Captured Data in Sentry 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). diff --git a/platform-includes/getting-started-verify/javascript.connect.mdx b/platform-includes/getting-started-verify/javascript.connect.mdx index 54fd54d994c31..7449938a9aa41 100644 --- a/platform-includes/getting-started-verify/javascript.connect.mdx +++ b/platform-includes/getting-started-verify/javascript.connect.mdx @@ -58,3 +58,5 @@ app.use("/debug-sentry", async (req, res) => { + + diff --git a/platform-includes/getting-started-verify/javascript.express.mdx b/platform-includes/getting-started-verify/javascript.express.mdx index 5c35577926d0e..3cb0b89c252f5 100644 --- a/platform-includes/getting-started-verify/javascript.express.mdx +++ b/platform-includes/getting-started-verify/javascript.express.mdx @@ -58,3 +58,5 @@ app.get("/debug-sentry", async (req, res) => { + + diff --git a/platform-includes/getting-started-verify/javascript.fastify.mdx b/platform-includes/getting-started-verify/javascript.fastify.mdx index ac34cfe1f400a..116530e770384 100644 --- a/platform-includes/getting-started-verify/javascript.fastify.mdx +++ b/platform-includes/getting-started-verify/javascript.fastify.mdx @@ -58,3 +58,5 @@ app.get("/debug-sentry", async (request, reply) => { + + diff --git a/platform-includes/getting-started-verify/javascript.hapi.mdx b/platform-includes/getting-started-verify/javascript.hapi.mdx index 2c08d2a0d9ea2..183d9c7798e5a 100644 --- a/platform-includes/getting-started-verify/javascript.hapi.mdx +++ b/platform-includes/getting-started-verify/javascript.hapi.mdx @@ -66,3 +66,5 @@ server.route({ + + diff --git a/platform-includes/getting-started-verify/javascript.hono.mdx b/platform-includes/getting-started-verify/javascript.hono.mdx index be542f17c14da..479d3496a2062 100644 --- a/platform-includes/getting-started-verify/javascript.hono.mdx +++ b/platform-includes/getting-started-verify/javascript.hono.mdx @@ -58,3 +58,5 @@ app.get("/debug-sentry", async () => { + + diff --git a/platform-includes/getting-started-verify/javascript.koa.mdx b/platform-includes/getting-started-verify/javascript.koa.mdx index 819d13ae31656..5cadff1d4ea99 100644 --- a/platform-includes/getting-started-verify/javascript.koa.mdx +++ b/platform-includes/getting-started-verify/javascript.koa.mdx @@ -57,3 +57,5 @@ router.get("/debug-sentry", async (ctx) => { + + diff --git a/platform-includes/getting-started-verify/javascript.mdx b/platform-includes/getting-started-verify/javascript.mdx index d16e2551f85b0..8abdeaef11b36 100644 --- a/platform-includes/getting-started-verify/javascript.mdx +++ b/platform-includes/getting-started-verify/javascript.mdx @@ -79,3 +79,5 @@ Open the page in a browser and click the button to throw an error and create a t + + diff --git a/platform-includes/getting-started-verify/javascript.nestjs.mdx b/platform-includes/getting-started-verify/javascript.nestjs.mdx index 4b19126968b4b..a8e42429fd124 100644 --- a/platform-includes/getting-started-verify/javascript.nestjs.mdx +++ b/platform-includes/getting-started-verify/javascript.nestjs.mdx @@ -60,3 +60,5 @@ To test your tracing configuration, update the previous code snippet by starting + + diff --git a/platform-includes/getting-started-verify/javascript.node.mdx b/platform-includes/getting-started-verify/javascript.node.mdx index 57a444f0f8469..8190b444daf1e 100644 --- a/platform-includes/getting-started-verify/javascript.node.mdx +++ b/platform-includes/getting-started-verify/javascript.node.mdx @@ -64,3 +64,5 @@ Sentry.startSpan( + + diff --git a/platform-includes/getting-started-wizard-verify-additional-features/javascript.mdx b/platform-includes/getting-started-wizard-verify-additional-features/javascript.mdx new file mode 100644 index 0000000000000..3ae089ab9609c --- /dev/null +++ b/platform-includes/getting-started-wizard-verify-additional-features/javascript.mdx @@ -0,0 +1,31 @@ +### Verify Additional Features + + + +**Logs** (enabled by default) + +See structured log entries from your application. You can send logs from anywhere: + +```typescript +Sentry.logger.info("User action", { userId: "123" }); +Sentry.logger.warn("Slow response", { duration: 5000 }); +Sentry.logger.error("Operation failed", { reason: "timeout" }); +``` + +Learn more about Logs configuration. + + + +**Application Metrics** (enabled by default) + +Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time: + +```typescript +Sentry.metrics.count("checkout.failed", 1); +Sentry.metrics.gauge("queue.depth", 42); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", +}); +``` + +Learn more about Application Metrics. diff --git a/src/components/featureInfo.tsx b/src/components/featureInfo.tsx index dc6b24d7dc92f..7e50615f00780 100644 --- a/src/components/featureInfo.tsx +++ b/src/components/featureInfo.tsx @@ -165,7 +165,8 @@ export function FeatureInfo({features, type}: FeatureInfoProps) { {feature.title} - {key === 'issues' && ' (always enabled)'}: {feature.learnMore} + {(key === 'issues' || key === 'metrics') && ' (always enabled)'}:{' '} + {feature.learnMore} ); }