diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx index e592193d15fb81..176e7a237ea1b3 100644 --- a/docs/platforms/javascript/guides/angular/index.mdx +++ b/docs/platforms/javascript/guides/angular/index.mdx @@ -82,6 +82,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 e9296e93f6e52b..669a7c342c38b5 100644 --- a/docs/platforms/javascript/guides/angular/manual-setup.mdx +++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx @@ -460,6 +460,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 28cd72eb2e270d..90a0567b42e168 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -218,6 +218,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 bf3b182f0d98da..630c51434395ff 100644 --- a/docs/platforms/javascript/guides/bun/index.mdx +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -183,6 +183,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 b0b9db043ba0d7..7e81d4baf69ba4 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx @@ -438,6 +438,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 b48d7dc51670af..58da4933e9a7eb 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx @@ -257,6 +257,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 @@ -265,6 +277,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 5acdf2afcd7d25..89c95bda875869 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -359,6 +359,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 8fd00e6be35b83..b09cc2a6088a28 100644 --- a/docs/platforms/javascript/guides/deno/index.mdx +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -202,6 +202,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 f8bb3240ec77d3..e47cebd81950ad 100644 --- a/docs/platforms/javascript/guides/effect/index.mdx +++ b/docs/platforms/javascript/guides/effect/index.mdx @@ -374,6 +374,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 42452298e4d651..a0ec82771822fa 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -358,6 +358,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 87f719fde0098b..45cc66804b172f 100644 --- a/docs/platforms/javascript/guides/elysia/index.mdx +++ b/docs/platforms/javascript/guides/elysia/index.mdx @@ -228,6 +228,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 6857777e0a3196..e1293b6db4ceed 100644 --- a/docs/platforms/javascript/guides/ember/index.mdx +++ b/docs/platforms/javascript/guides/ember/index.mdx @@ -217,6 +217,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 300c11ad2427b4..95ed06a7e53187 100644 --- a/docs/platforms/javascript/guides/firebase/index.mdx +++ b/docs/platforms/javascript/guides/firebase/index.mdx @@ -252,6 +252,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 bf25ccb260373c..c668e5e4ed88bf 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -245,6 +245,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 42687191fac6a5..6bf0fa0e9eefbe 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -179,6 +179,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 560a4a22ef791e..0fe6573a5165fd 100644 --- a/docs/platforms/javascript/guides/nextjs/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/index.mdx @@ -283,7 +283,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. @@ -291,7 +291,7 @@ 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. @@ -307,10 +307,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 cf7bde44de0cb5..4c1fe397b1224a 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx @@ -559,6 +559,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 c9aaad13938322..0f413ffe91036a 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup/pages-router.mdx @@ -412,6 +412,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 9aa43cae5d4bdf..0b3e77ec284da2 100644 --- a/docs/platforms/javascript/guides/nitro/index.mdx +++ b/docs/platforms/javascript/guides/nitro/index.mdx @@ -260,6 +260,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 64e0ca99af86a8..a8d4af6d6b6f78 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -107,6 +107,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 79d18dd244acf3..6ddfed33718bbd 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -211,6 +211,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 45b1432629e77a..1d962a45d25b2b 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -614,6 +614,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 8a11447567562d..07000739ed1c9c 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -335,7 +335,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. @@ -343,18 +343,23 @@ 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. + @@ -402,6 +407,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", +}); +``` + @@ -437,6 +452,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 87a12c2d9d12c8..0601e9ce0c4337 100644 --- a/docs/platforms/javascript/guides/remix/index.mdx +++ b/docs/platforms/javascript/guides/remix/index.mdx @@ -123,6 +123,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 3f79b27353fde3..7640f7f7f21b62 100644 --- a/docs/platforms/javascript/guides/solid/index.mdx +++ b/docs/platforms/javascript/guides/solid/index.mdx @@ -240,6 +240,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 211c4823d7ae92..aad5f768ad29c3 100644 --- a/docs/platforms/javascript/guides/solidstart/index.mdx +++ b/docs/platforms/javascript/guides/solidstart/index.mdx @@ -498,6 +498,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 1dbe91ed496b7b..a4b49e3cc9d3fd 100644 --- a/docs/platforms/javascript/guides/svelte/index.mdx +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -292,6 +292,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 0f9e9f959aff44..5d98a0f3c6ff7e 100644 --- a/docs/platforms/javascript/guides/sveltekit/index.mdx +++ b/docs/platforms/javascript/guides/sveltekit/index.mdx @@ -51,6 +51,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 2798666003a081..5b765fbc5d2a0b 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/index.mdx @@ -76,15 +76,14 @@ 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. @@ -100,10 +99,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 e54731a5fd0183..17b2dc40ec9916 100644 --- a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx +++ b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx @@ -680,6 +680,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 bcc3ec11b1bc53..ed0e580cf645a9 100644 --- a/docs/platforms/javascript/guides/vue/index.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -348,6 +348,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 2fa5032762dffc..7113f53f1948e0 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -270,6 +270,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.mdx b/includes/logs/javascript-quick-start-verify-logs.mdx deleted file mode 100644 index 5eaa9d7c88b493..00000000000000 --- 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 00000000000000..ee6011fa08dec8 --- /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 f3a5bccaf7e863..b99ff1b168f35b 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 fc54d571892c2e..02b338117cb1d1 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 7a00f9bdb48e72..b901ff291b4f6b 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 f4ecb3f94dbc87..8cca720f1e1683 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 abcf88f2429cac..46bb9bfabe5408 100644 --- a/platform-includes/getting-started-complete/javascript.nuxt.mdx +++ b/platform-includes/getting-started-complete/javascript.nuxt.mdx @@ -500,6 +500,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 dd8c110266f23c..373689d8ec566c 100644 --- a/platform-includes/getting-started-complete/javascript.remix.mdx +++ b/platform-includes/getting-started-complete/javascript.remix.mdx @@ -504,6 +504,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 2554e288a53f4b..2f19b2f0bee635 100644 --- a/platform-includes/getting-started-complete/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-complete/javascript.sveltekit.mdx @@ -593,6 +593,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 54fd54d994c316..7449938a9aa410 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 5c35577926d0e3..3cb0b89c252f56 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 ac34cfe1f400ae..116530e7703843 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 2c08d2a0d9ea20..183d9c7798e5aa 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 be542f17c14da6..479d3496a2062c 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 819d13ae31656e..5cadff1d4ea992 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 d16e2551f85b06..8abdeaef11b36e 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 4b19126968b4bd..a8e42429fd124f 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 57a444f0f84693..8190b444daf1ee 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 00000000000000..3ae089ab9609c0 --- /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 dc6b24d7dc92fa..7e50615f00780c 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} ); }