From 10e4a72c27696cd3753de266ce3ded28ad77be21 Mon Sep 17 00:00:00 2001 From: Stephanie Anderson Date: Fri, 7 Mar 2025 21:32:33 +0100 Subject: [PATCH] Fix SDK getting started pages (onboarding options) (#12960) * fix(elixir): code block formatting * fix(.net): onboarding options * fix(php): onboarding options * fix(js): angular onboarding options * fix(js): astro onboarding options * fix(js): aws lambda onboarding options * fix(js): azure functions onboarding options * fix(js): bun onboarding options * fix(js): capacitor onboarding options * fix(js): cloudflare onboarding options * fix(js): connect onboarding options * fix(js): cordova onboarding options * fix(js): deno onboarding options * fix(js): electron onboarding options * fix(js): ember onboarding options * fix(js): deno code snippet for npm * fix(js): express onboarding options * fix(js): fastify onboarding options * fix(js): gatsby onboarding options * fix(js): gcp functions onboarding options * fix(js): hapi onboarding options * fix(js): hono onboarding options * fix(js): koa onboarding options * fix(js): nest.js onboarding options * fix(js): next.js onboarding options * fix(js): nuxt onboarding options * fix(js): react onboarding options * fix(js): react-router onboarding options * fix(js): remix onboarding options * fix(js): solid onboarding options * fix(js): solidstart onboarding options * fix(js): svelte onboarding options * fix(js): sveltekit onboarding options * fix(js): vue onboarding options * fix(js): wasm onboarding options --- docs/platforms/dotnet/guides/aspnet/index.mdx | 2 +- .../dotnet/guides/aws-lambda/index.mdx | 2 +- .../guides/azure-functions-worker/index.mdx | 4 +- .../guides/blazor-webassembly/index.mdx | 14 +- .../dotnet/guides/entityframework/index.mdx | 2 +- docs/platforms/dotnet/guides/uwp/index.mdx | 2 +- .../dotnet/guides/winforms/index.mdx | 2 +- docs/platforms/dotnet/guides/winui/index.mdx | 10 +- .../platforms/dotnet/guides/xamarin/index.mdx | 22 +- docs/platforms/dotnet/index.mdx | 2 +- .../elixir/integrations/oban/index.mdx | 20 +- .../integrations/plug_and_phoenix/index.mdx | 6 +- .../elixir/integrations/quantum/index.mdx | 9 +- .../common/troubleshooting/index.mdx | 2 +- .../javascript/guides/angular/config.yml | 6 - .../javascript/guides/angular/index.mdx | 47 +++ .../javascript/guides/astro/config.yml | 8 - .../javascript/guides/astro/index.mdx | 269 +++++++++++++++++ .../javascript/guides/aws-lambda/config.yml | 8 - .../javascript/guides/aws-lambda/index.mdx | 7 +- .../guides/azure-functions/config.yml | 8 - .../guides/azure-functions/index.mdx | 52 +++- .../javascript/guides/bun/config.yml | 7 - .../platforms/javascript/guides/bun/index.mdx | 98 ++++++ .../javascript/guides/capacitor/config.yml | 7 - .../javascript/guides/capacitor/index.mdx | 115 +++++++ .../javascript/guides/cloudflare/config.yml | 8 - .../javascript/guides/cloudflare/index.mdx | 139 +++++++++ .../javascript/guides/connect/config.yml | 6 - .../javascript/guides/connect/index.mdx | 2 + .../javascript/guides/cordova/config.yml | 6 - .../javascript/guides/cordova/index.mdx | 40 +++ .../javascript/guides/deno/config.yml | 7 - .../javascript/guides/deno/index.mdx | 94 ++++++ .../javascript/guides/electron/config.yml | 5 - .../javascript/guides/electron/index.mdx | 70 ++++- .../javascript/guides/ember/config.yml | 5 - .../javascript/guides/ember/index.mdx | 95 ++++++ .../javascript/guides/express/config.yml | 6 - .../javascript/guides/express/index.mdx | 2 + .../javascript/guides/fastify/config.yml | 6 - .../javascript/guides/fastify/index.mdx | 6 +- .../javascript/guides/gatsby/config.yml | 6 - .../javascript/guides/gatsby/index.mdx | 8 +- .../guides/gcp-functions/config.yml | 7 - .../javascript/guides/gcp-functions/index.mdx | 7 +- .../javascript/guides/hapi/config.yml | 6 - .../javascript/guides/hapi/index.mdx | 2 + .../javascript/guides/hono/config.yml | 7 - .../javascript/guides/hono/index.mdx | 9 +- .../javascript/guides/koa/config.yml | 6 - .../platforms/javascript/guides/koa/index.mdx | 2 + .../javascript/guides/nestjs/config.yml | 6 - .../javascript/guides/nestjs/index.mdx | 4 +- .../javascript/guides/nextjs/config.yml | 8 - .../javascript/guides/nextjs/index.mdx | 106 +++++++ .../javascript/guides/nextjs/manual-setup.mdx | 4 +- .../javascript/guides/node/config.yml | 7 - .../javascript/guides/node/index.mdx | 3 + .../javascript/guides/nuxt/config.yml | 7 - .../javascript/guides/nuxt/index.mdx | 136 +++++++++ .../javascript/guides/nuxt/manual-setup.mdx | 75 ++++- .../javascript/guides/react-router/config.yml | 8 - .../javascript/guides/react-router/index.mdx | 280 ++++++++++++++++++ .../javascript/guides/react/config.yml | 6 - .../javascript/guides/react/index.mdx | 72 ++++- .../javascript/guides/remix/config.yml | 8 - .../javascript/guides/remix/index.mdx | 112 +++++++ .../javascript/guides/remix/manual-setup.mdx | 22 +- .../guides/remix/manual-setup__v8.x.mdx | 25 +- .../javascript/guides/solid/config.yml | 5 - .../javascript/guides/solid/index.mdx | 115 +++++++ .../javascript/guides/solidstart/config.yml | 6 - .../javascript/guides/solidstart/index.mdx | 95 ++++++ .../javascript/guides/svelte/config.yml | 5 - .../javascript/guides/svelte/index.mdx | 113 +++++++ .../javascript/guides/sveltekit/config.yml | 7 - .../javascript/guides/sveltekit/index.mdx | 117 ++++++++ .../javascript/guides/vue/config.yml | 5 - .../platforms/javascript/guides/vue/index.mdx | 73 ++++- .../javascript/guides/wasm/config.yml | 5 - .../javascript/guides/wasm/index.mdx | 1 + docs/platforms/php/index.mdx | 17 +- .../getting-started-config/dotnet.xamarin.mdx | 20 -- .../javascript.angular.mdx | 2 +- .../javascript.astro.mdx | 75 ----- .../javascript.azure-functions.mdx | 38 --- .../getting-started-config/javascript.bun.mdx | 25 -- .../javascript.cloudflare.mdx | 70 ----- .../javascript.deno.mdx | 43 --- .../javascript.electron.mdx | 39 --- .../javascript.ember.mdx | 42 --- .../javascript.nuxt.mdx | 2 - .../javascript.react-router.mdx | 131 -------- .../javascript.remix.mdx | 2 - .../javascript.solid.mdx | 50 ---- .../javascript.svelte.mdx | 43 --- .../javascript.sveltekit.mdx | 2 - .../javascript.astro.mdx | 38 --- .../javascript.bun.mdx | 3 - .../javascript.capacitor.mdx | 63 ---- .../javascript.cloudflare.mdx | 11 - .../javascript.electron.mdx | 11 - .../javascript.nextjs.mdx | 35 --- .../javascript.nuxt.mdx | 21 -- .../javascript.react-router.mdx | 42 --- .../javascript.react.mdx | 11 - .../javascript.remix.mdx | 24 -- .../javascript.solid.mdx | 11 - .../javascript.solidstart.mdx | 11 - .../javascript.svelte.mdx | 11 - .../javascript.sveltekit.mdx | 22 -- .../javascript.vue.mdx | 11 - .../javascript.astro.mdx | 89 ------ .../javascript.nextjs.mdx | 18 -- .../javascript.nuxt.mdx | 5 - .../getting-started-node/javascript.mdx | 4 +- .../javascript.astro.mdx | 14 - .../javascript.deno.mdx | 7 - .../javascript.ember.mdx | 7 - .../javascript.nextjs.mdx | 0 .../javascript.nuxt.mdx | 12 - .../javascript.react-router.mdx | 12 - .../javascript.react.mdx | 5 - .../javascript.remix.mdx | 14 - .../javascript.svelte.mdx | 5 - .../javascript.sveltekit.mdx | 22 -- .../javascript.astro.mdx | 11 - .../javascript.cloudflare.mdx | 13 - .../javascript.deno.mdx | 7 - .../javascript.nextjs.mdx | 0 .../javascript.nuxt.mdx | 1 - .../javascript.react-router.mdx | 43 --- .../javascript.remix.mdx | 9 - .../javascript.solidstart.mdx | 43 --- .../javascript.sveltekit.mdx | 0 .../getting-started-use/javascript.bun.mdx | 11 - .../javascript.astro.mdx | 13 - .../getting-started-verify/javascript.bun.mdx | 14 - .../javascript.capacitor.mdx | 11 - .../javascript.cloudflare.mdx | 7 - .../javascript.deno.mdx | 7 - .../javascript.nextjs.mdx | 36 --- .../javascript.nuxt.mdx | 60 ---- .../javascript.react-router.mdx | 19 -- .../javascript.react.mdx | 10 - .../javascript.remix.mdx | 26 -- .../javascript.solid.mdx | 12 - .../javascript.solidstart.mdx | 12 - .../javascript.svelte.mdx | 12 - .../javascript.sveltekit.mdx | 35 --- .../getting-started-verify/javascript.vue.mdx | 16 - 152 files changed, 2432 insertions(+), 1860 deletions(-) delete mode 100644 docs/platforms/javascript/guides/angular/config.yml rename platform-includes/getting-started-install/javascript.angular.mdx => docs/platforms/javascript/guides/angular/index.mdx (52%) delete mode 100644 docs/platforms/javascript/guides/astro/config.yml create mode 100644 docs/platforms/javascript/guides/astro/index.mdx delete mode 100644 docs/platforms/javascript/guides/aws-lambda/config.yml delete mode 100644 docs/platforms/javascript/guides/azure-functions/config.yml delete mode 100644 docs/platforms/javascript/guides/bun/config.yml create mode 100644 docs/platforms/javascript/guides/bun/index.mdx delete mode 100644 docs/platforms/javascript/guides/capacitor/config.yml rename platform-includes/getting-started-config/javascript.capacitor.mdx => docs/platforms/javascript/guides/capacitor/index.mdx (71%) delete mode 100644 docs/platforms/javascript/guides/cloudflare/config.yml create mode 100644 docs/platforms/javascript/guides/cloudflare/index.mdx delete mode 100644 docs/platforms/javascript/guides/connect/config.yml delete mode 100644 docs/platforms/javascript/guides/cordova/config.yml create mode 100644 docs/platforms/javascript/guides/cordova/index.mdx delete mode 100644 docs/platforms/javascript/guides/deno/config.yml create mode 100644 docs/platforms/javascript/guides/deno/index.mdx delete mode 100644 docs/platforms/javascript/guides/electron/config.yml delete mode 100644 docs/platforms/javascript/guides/ember/config.yml create mode 100644 docs/platforms/javascript/guides/ember/index.mdx delete mode 100644 docs/platforms/javascript/guides/express/config.yml delete mode 100644 docs/platforms/javascript/guides/fastify/config.yml delete mode 100644 docs/platforms/javascript/guides/gatsby/config.yml delete mode 100644 docs/platforms/javascript/guides/gcp-functions/config.yml delete mode 100644 docs/platforms/javascript/guides/hapi/config.yml delete mode 100644 docs/platforms/javascript/guides/hono/config.yml delete mode 100644 docs/platforms/javascript/guides/koa/config.yml delete mode 100644 docs/platforms/javascript/guides/nestjs/config.yml delete mode 100644 docs/platforms/javascript/guides/nextjs/config.yml create mode 100644 docs/platforms/javascript/guides/nextjs/index.mdx delete mode 100644 docs/platforms/javascript/guides/node/config.yml delete mode 100644 docs/platforms/javascript/guides/nuxt/config.yml create mode 100644 docs/platforms/javascript/guides/nuxt/index.mdx delete mode 100644 docs/platforms/javascript/guides/react-router/config.yml create mode 100644 docs/platforms/javascript/guides/react-router/index.mdx delete mode 100644 docs/platforms/javascript/guides/react/config.yml rename platform-includes/getting-started-config/javascript.react.mdx => docs/platforms/javascript/guides/react/index.mdx (61%) delete mode 100644 docs/platforms/javascript/guides/remix/config.yml create mode 100644 docs/platforms/javascript/guides/remix/index.mdx delete mode 100644 docs/platforms/javascript/guides/solid/config.yml create mode 100644 docs/platforms/javascript/guides/solid/index.mdx delete mode 100644 docs/platforms/javascript/guides/solidstart/config.yml rename platform-includes/getting-started-config/javascript.solidstart.mdx => docs/platforms/javascript/guides/solidstart/index.mdx (63%) delete mode 100644 docs/platforms/javascript/guides/svelte/config.yml create mode 100644 docs/platforms/javascript/guides/svelte/index.mdx delete mode 100644 docs/platforms/javascript/guides/sveltekit/config.yml create mode 100644 docs/platforms/javascript/guides/sveltekit/index.mdx delete mode 100644 docs/platforms/javascript/guides/vue/config.yml rename platform-includes/getting-started-config/javascript.vue.mdx => docs/platforms/javascript/guides/vue/index.mdx (63%) delete mode 100644 docs/platforms/javascript/guides/wasm/config.yml delete mode 100644 platform-includes/getting-started-config/dotnet.xamarin.mdx delete mode 100644 platform-includes/getting-started-config/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-config/javascript.azure-functions.mdx delete mode 100644 platform-includes/getting-started-config/javascript.bun.mdx delete mode 100644 platform-includes/getting-started-config/javascript.cloudflare.mdx delete mode 100644 platform-includes/getting-started-config/javascript.deno.mdx delete mode 100644 platform-includes/getting-started-config/javascript.electron.mdx delete mode 100644 platform-includes/getting-started-config/javascript.ember.mdx delete mode 100644 platform-includes/getting-started-config/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-config/javascript.react-router.mdx delete mode 100644 platform-includes/getting-started-config/javascript.remix.mdx delete mode 100644 platform-includes/getting-started-config/javascript.solid.mdx delete mode 100644 platform-includes/getting-started-config/javascript.svelte.mdx delete mode 100644 platform-includes/getting-started-config/javascript.sveltekit.mdx delete mode 100644 platform-includes/getting-started-install/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-install/javascript.bun.mdx delete mode 100644 platform-includes/getting-started-install/javascript.capacitor.mdx delete mode 100644 platform-includes/getting-started-install/javascript.cloudflare.mdx delete mode 100644 platform-includes/getting-started-install/javascript.electron.mdx delete mode 100644 platform-includes/getting-started-install/javascript.nextjs.mdx delete mode 100644 platform-includes/getting-started-install/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-install/javascript.react-router.mdx delete mode 100644 platform-includes/getting-started-install/javascript.react.mdx delete mode 100644 platform-includes/getting-started-install/javascript.remix.mdx delete mode 100644 platform-includes/getting-started-install/javascript.solid.mdx delete mode 100644 platform-includes/getting-started-install/javascript.solidstart.mdx delete mode 100644 platform-includes/getting-started-install/javascript.svelte.mdx delete mode 100644 platform-includes/getting-started-install/javascript.sveltekit.mdx delete mode 100644 platform-includes/getting-started-install/javascript.vue.mdx delete mode 100644 platform-includes/getting-started-next-steps/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-next-steps/javascript.nextjs.mdx delete mode 100644 platform-includes/getting-started-next-steps/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.deno.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.ember.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.nextjs.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.react-router.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.react.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.remix.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.svelte.mdx delete mode 100644 platform-includes/getting-started-primer/javascript.sveltekit.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.cloudflare.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.deno.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.nextjs.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.react-router.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.remix.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.solidstart.mdx delete mode 100644 platform-includes/getting-started-sourcemaps/javascript.sveltekit.mdx delete mode 100644 platform-includes/getting-started-use/javascript.bun.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.astro.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.bun.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.capacitor.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.cloudflare.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.deno.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.nextjs.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.nuxt.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.react-router.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.react.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.remix.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.solid.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.solidstart.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.svelte.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.sveltekit.mdx delete mode 100644 platform-includes/getting-started-verify/javascript.vue.mdx diff --git a/docs/platforms/dotnet/guides/aspnet/index.mdx b/docs/platforms/dotnet/guides/aspnet/index.mdx index 68afbbb811d24..e63a38b2346cf 100644 --- a/docs/platforms/dotnet/guides/aspnet/index.mdx +++ b/docs/platforms/dotnet/guides/aspnet/index.mdx @@ -34,7 +34,7 @@ as well as your logs as breadcrumbs. The logging integrations also capture event You configure the SDK in the `Global.asax.cs`: -```csharp {"onboardingOptions": {"performance": "21-24, 34-43"}} +```csharp {"onboardingOptions": {"performance": "20-23, 33-42"}} using System; using System.Web; using Sentry.AspNet; diff --git a/docs/platforms/dotnet/guides/aws-lambda/index.mdx b/docs/platforms/dotnet/guides/aws-lambda/index.mdx index 1b7a4eaf3ab6e..967ccc43d38b5 100644 --- a/docs/platforms/dotnet/guides/aws-lambda/index.mdx +++ b/docs/platforms/dotnet/guides/aws-lambda/index.mdx @@ -35,7 +35,7 @@ All `ASP.NET Core` configurations are valid here. But one configuration in parti `FlushOnCompletedRequest` ensures all events are flushed out. This is because the general ASP.NET Core hooks for when the process is exiting are not guaranteed to run in a serverless environment. This setting ensures that no event is lost if AWS recycles the process. -```csharp {"onboardingOptions": {"performance": "12-14"}} +```csharp {"onboardingOptions": {"performance": "12-15"}} public class LambdaEntryPoint : Amazon.Lambda.AspNetCoreServer.APIGatewayProxyFunction { protected override void Init(IWebHostBuilder builder) diff --git a/docs/platforms/dotnet/guides/azure-functions-worker/index.mdx b/docs/platforms/dotnet/guides/azure-functions-worker/index.mdx index 68063ab43a853..3fe0d719ad1df 100644 --- a/docs/platforms/dotnet/guides/azure-functions-worker/index.mdx +++ b/docs/platforms/dotnet/guides/azure-functions-worker/index.mdx @@ -33,7 +33,7 @@ This package extends [Sentry.Extensions.Logging](/platforms/dotnet/guides/extens Sentry integration with Azure Functions is done by calling `.UseSentry()` and specifying the options, for example: -```csharp {"onboardingOptions": {"performance": "11-13"}} +```csharp {"onboardingOptions": {"performance": "10-12"}} using Sentry.Azure.Functions.Worker; var builder = FunctionsApplication.CreateBuilder(args); @@ -57,7 +57,7 @@ If using the ASP.NET Core integration add `UseSentry` to the `ConfigureFunctions -```csharp +```csharp {"onboardingOptions": {"performance": "11-13"}} using Sentry.Azure.Functions.Worker; var host = new HostBuilder() diff --git a/docs/platforms/dotnet/guides/blazor-webassembly/index.mdx b/docs/platforms/dotnet/guides/blazor-webassembly/index.mdx index 07ffced83cf70..f21bfc6a36bfa 100644 --- a/docs/platforms/dotnet/guides/blazor-webassembly/index.mdx +++ b/docs/platforms/dotnet/guides/blazor-webassembly/index.mdx @@ -8,6 +8,8 @@ Sentry provides an integration with Blazor WebAssembly through the [Sentry.AspNe ## Install + + Add the Sentry dependency to your Blazor WebAssembly application: ```shell {tabTitle:.NET Core CLI} @@ -26,16 +28,14 @@ Sentry integration with Blazor WebAssembly is done by calling `.UseSentry()` and -```csharp +```csharp {"onboardingOptions": {"performance": "5"}} var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.UseSentry(options => { - options.Dsn = "___PUBLIC_DSN___"; - options.TracesSampleRate = 0.1; - // When configuring for the first time, to see what the SDK is doing: - // options.Debug = true; - - + options.Dsn = "___PUBLIC_DSN___"; + options.TracesSampleRate = 0.1; + // When configuring for the first time, to see what the SDK is doing: + // options.Debug = true; }); // Captures logError and higher as events diff --git a/docs/platforms/dotnet/guides/entityframework/index.mdx b/docs/platforms/dotnet/guides/entityframework/index.mdx index c461d2c19e385..36e96c1b4b7f5 100644 --- a/docs/platforms/dotnet/guides/entityframework/index.mdx +++ b/docs/platforms/dotnet/guides/entityframework/index.mdx @@ -45,7 +45,7 @@ Add the Entity Framework 6 support to your project in one step: For example, configuring an ASP.NET app with _global.asax_: -```csharp {filename:global.asax} {"onboardingOptions": {"performance": "16-18, 27-36"}} +```csharp {filename:global.asax} {"onboardingOptions": {"performance": "15-17, 26-35"}} using System; using System.Configuration; using Sentry.AspNet; diff --git a/docs/platforms/dotnet/guides/uwp/index.mdx b/docs/platforms/dotnet/guides/uwp/index.mdx index e109d9c452bc7..f642bf4978951 100644 --- a/docs/platforms/dotnet/guides/uwp/index.mdx +++ b/docs/platforms/dotnet/guides/uwp/index.mdx @@ -28,7 +28,7 @@ The SDK should be initialized in the constructor of your application class (usua -```csharp {"onboardingOptions": {"performance": "18-21"}} +```csharp {"onboardingOptions": {"performance": "17-20"}} using Sentry.Protocol; using UnhandledExceptionEventArgs = Windows.UI.Xaml.UnhandledExceptionEventArgs; diff --git a/docs/platforms/dotnet/guides/winforms/index.mdx b/docs/platforms/dotnet/guides/winforms/index.mdx index 1bd099b62fe3d..e73ac63dacb84 100644 --- a/docs/platforms/dotnet/guides/winforms/index.mdx +++ b/docs/platforms/dotnet/guides/winforms/index.mdx @@ -30,7 +30,7 @@ You should also set `Application.SetUnhandledExceptionMode(UnhandledExceptionMod A complete example of the recommended startup is as follows: -```csharp {"onboardingOptions": {"performance": "32-35"}} +```csharp {"onboardingOptions": {"performance": "31-34"}} using System; using System.Windows.Forms; diff --git a/docs/platforms/dotnet/guides/winui/index.mdx b/docs/platforms/dotnet/guides/winui/index.mdx index a77b9dcdebf46..20f86c85c8f12 100644 --- a/docs/platforms/dotnet/guides/winui/index.mdx +++ b/docs/platforms/dotnet/guides/winui/index.mdx @@ -32,9 +32,7 @@ In addition to capturing errors, you can monitor interactions between multiple s Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - - -```csharp {"onboardingOptions": {"performance": "17-20"}} +```csharp {"onboardingOptions": {"performance": "16-19"}} using Sentry.Protocol; sealed partial class App : Application @@ -50,7 +48,7 @@ sealed partial class App : Application // When configuring for the first time, to see what the SDK is doing: options.Debug = true; - // Set traces_sample_rate to 1.0 to capture 100% of transactions for tracing. + // Set TracesSampleRate to 1.0 to capture 100% of transactions for tracing. // We recommend adjusting this value in production. options.TracesSampleRate = 1.0; @@ -79,7 +77,7 @@ Do not initialize the SDK in the `OnLaunched` event of the application or the `H -```csharp +```csharp {"onboardingOptions": {"performance": "18-21"}} // Add these to your existing using statements. using Sentry.Protocol; using UnhandledExceptionEventArgs = Microsoft.UI.Xaml.UnhandledExceptionEventArgs; @@ -97,7 +95,7 @@ sealed partial class App : Application // When configuring for the first time, to see what the SDK is doing: o.Debug = true; - // Set traces_sample_rate to 1.0 to capture 100% of transactions for tracing. + // Set TracesSampleRate to 1.0 to capture 100% of transactions for tracing. // We recommend adjusting this value in production. o.TracesSampleRate = 1.0; diff --git a/docs/platforms/dotnet/guides/xamarin/index.mdx b/docs/platforms/dotnet/guides/xamarin/index.mdx index 78a707135cd0b..4ccef2c214dcb 100644 --- a/docs/platforms/dotnet/guides/xamarin/index.mdx +++ b/docs/platforms/dotnet/guides/xamarin/index.mdx @@ -21,7 +21,27 @@ The SDK is compatible with the following versions or higher: After you’ve completed setting up a project in Sentry, Sentry will give you a value which we call a DSN or Data Source Name. It looks a lot like a standard URL, but it’s just a representation of the configuration required by the Sentry SDKs. It consists of a few pieces, including the protocol, public key, the server address, and the project identifier. - + + +You should initialize the SDK as early as possible, for an example, the start of OnCreate +on MainActivity for Android, and, the top of FinishedLaunching on AppDelegate for iOS). + +```csharp {"onboardingOptions": {"performance": "8-11"}} +SentryXamarin.Init(options => +{ + options.AddXamarinFormsIntegration(); + // Tells which project in Sentry to send events to: + options.Dsn = "___PUBLIC_DSN___"; + // When configuring for the first time, to see what the SDK is doing: + options.Debug = true; + // Set TracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + options.TracesSampleRate = 1.0; +}); +// App code + +``` ## Verify diff --git a/docs/platforms/dotnet/index.mdx b/docs/platforms/dotnet/index.mdx index 328b93aceecbf..b406a36757d59 100644 --- a/docs/platforms/dotnet/index.mdx +++ b/docs/platforms/dotnet/index.mdx @@ -81,7 +81,7 @@ Install the **NuGet** package to add the Sentry dependency: To capture all errors, even the one during the startup of your application, you should initialize the Sentry .NET SDK as soon as possible. -```csharp {"onboardingOptions": {"performance": "6-7", "profiling": "8-9"}} +```csharp {"onboardingOptions": {"performance": "5-6", "profiling": "7-8"}} SentrySdk.Init(options => { options.Dsn = "https://eb18e953812b41c3aeb042e666fd3b5c@o447951.ingest.us.sentry.io/5428537"; diff --git a/docs/platforms/elixir/integrations/oban/index.mdx b/docs/platforms/elixir/integrations/oban/index.mdx index 1f652f90f4521..f1266d1ac7e0a 100644 --- a/docs/platforms/elixir/integrations/oban/index.mdx +++ b/docs/platforms/elixir/integrations/oban/index.mdx @@ -18,16 +18,16 @@ This integration is built into the Sentry SDK starting with *v10.2.0*. It suppor You can configure the Oban integration in your Sentry configuration, under the `:integrations` key: -```elixir {filename:config/config.exs} +```elixir {filename:config/config.exs} {diff} config :sentry, # ..., integrations: [ - oban: [ - # Capture errors: - capture_errors: true, - # Monitor cron jobs: - cron: [enabled: true] - ] ++ oban: [ ++ # Capture errors: ++ capture_errors: true, ++ # Monitor cron jobs: ++ cron: [enabled: true] ++ ] ] ``` @@ -64,14 +64,14 @@ If you want to customize the information that is sent to Sentry when a job check ```elixir {filename:lib/my_app/my_worker.ex} defmodule MyApp.MyWorker do use Oban.Worker - + @behaviour Sentry.Integrations.Oban.Cron - + @impl Oban.Worker def perform(args) do # ... end - + @impl Sentry.Integrations.Oban.Cron def sentry_check_in_configuration(job) do [monitor_slug: "custom-slug-#{job.id}"] diff --git a/docs/platforms/elixir/integrations/plug_and_phoenix/index.mdx b/docs/platforms/elixir/integrations/plug_and_phoenix/index.mdx index 76b829e8ff4a1..af7386db75ec0 100644 --- a/docs/platforms/elixir/integrations/plug_and_phoenix/index.mdx +++ b/docs/platforms/elixir/integrations/plug_and_phoenix/index.mdx @@ -15,8 +15,8 @@ If you are using Phoenix, follow these steps to add the Plug integration: 1. Add `Sentry.PlugCapture` above the `use Phoenix.Endpoint` line in your endpoint file. 1. Add `Sentry.PlugContext` below `Plug.Parsers`. -```diff - defmodule MyAppWeb.Endpoint +```elixir {diff} +defmodule MyAppWeb.Endpoint + use Sentry.PlugCapture use Phoenix.Endpoint, otp_app: :my_app @@ -81,7 +81,7 @@ If you have a non-Phoenix application, follow these steps to configure the Plug 1. Add `Sentry.PlugCapture` at the top of your Plug application. 1. Add `Sentry.PlugContext` below `Plug.Parsers` (if it is in your stack). -```diff +```elixir {diff} defmodule MyApp.Router do use Plug.Router + use Sentry.PlugCapture diff --git a/docs/platforms/elixir/integrations/quantum/index.mdx b/docs/platforms/elixir/integrations/quantum/index.mdx index 161cf5bd8da47..868c593b56b41 100644 --- a/docs/platforms/elixir/integrations/quantum/index.mdx +++ b/docs/platforms/elixir/integrations/quantum/index.mdx @@ -12,13 +12,12 @@ This integration is built into the Sentry SDK. You can configure the Quantum integration in your Sentry configuration, under the `:integrations` key: -```elixir {filename:config/config.exs) - +```elixir {filename:config/config.exs} {diff} config :sentry, # ..., integrations: [ - quantum: [ - cron: [enabled: true] - ] ++ quantum: [ ++ cron: [enabled: true] ++ ] ] ``` diff --git a/docs/platforms/javascript/common/troubleshooting/index.mdx b/docs/platforms/javascript/common/troubleshooting/index.mdx index 5bc1cd72e101d..0f0a042dfbfdc 100644 --- a/docs/platforms/javascript/common/troubleshooting/index.mdx +++ b/docs/platforms/javascript/common/troubleshooting/index.mdx @@ -391,7 +391,7 @@ Error: Could not resolve './{}.js' from node_modules/@sentry/utils/esm/index.js This might be because the [`define`](https://vitejs.dev/config/shared-options.html#define) option in your Vite config is string-replacing some variable used by the Sentry SDK, like `global`, which causes build errors. Vite recommends using `define` for CONSTANTS only, and not putting `process` or `global` into the options. To fix this build error, remove or update your `define` option, as shown below: -```diff {filename:vite.config.ts} +```javascript {filename:vite.config.ts} {diff} export default defineConfig({ build: { sourcemap: true diff --git a/docs/platforms/javascript/guides/angular/config.yml b/docs/platforms/javascript/guides/angular/config.yml deleted file mode 100644 index a7874d3bb18fd..0000000000000 --- a/docs/platforms/javascript/guides/angular/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Angular -description: 'Angular is a web framework that empowers developers to build fast, reliable applications. Learn how to set it up with Sentry.' -sdk: sentry.javascript.angular -categories: - - javascript - - browser diff --git a/platform-includes/getting-started-install/javascript.angular.mdx b/docs/platforms/javascript/guides/angular/index.mdx similarity index 52% rename from platform-includes/getting-started-install/javascript.angular.mdx rename to docs/platforms/javascript/guides/angular/index.mdx index 805e0ab9b0937..57ac1c7ec014e 100644 --- a/platform-includes/getting-started-install/javascript.angular.mdx +++ b/docs/platforms/javascript/guides/angular/index.mdx @@ -1,3 +1,28 @@ +--- +title: Angular +description: 'Angular is a web framework that empowers developers to build fast, reliable applications. Learn how to set it up with Sentry.' +sdk: sentry.javascript.angular +categories: + - javascript + - browser +--- + + + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + ```bash {tabTitle:npm} npm install @sentry/angular --save ``` @@ -31,3 +56,25 @@ If you're using an older version of Angular, you also need to use an older versi The `@sentry/angular-ivy` package was an Ivy-compatible version of `@sentry/angular` in version 7 of the SDK. It's recommended to use this package if you're using Angular 12 or 13 to avoid build-time warnings. Functionality-wise, it's identical to `@sentry/angular` and you can simply replace all imports of `@sentry/angular` with `@sentry/angular-ivy` in our docs. Since version 8, `@sentry/angular-ivy` was [removed and merged](./migration/v7-to-v8/#supported-versions) with `@sentry/angular` which is now Ivy-compatible by default. + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + + + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + + + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/astro/config.yml b/docs/platforms/javascript/guides/astro/config.yml deleted file mode 100644 index e5b51ccfcec6c..0000000000000 --- a/docs/platforms/javascript/guides/astro/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: Astro -description: Astro is a web framework for building content-driven websites including blogs, marketing, and e-commerce sites. Learn how to set it up with Sentry. -sdk: sentry.javascript.astro -categories: - - javascript - - browser - - server - - server-node diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx new file mode 100644 index 0000000000000..07212e4c557c0 --- /dev/null +++ b/docs/platforms/javascript/guides/astro/index.mdx @@ -0,0 +1,269 @@ +--- +title: Astro +description: Astro is a web framework for building content-driven websites including blogs, marketing, and e-commerce sites. Learn how to set it up with Sentry. +sdk: sentry.javascript.astro +categories: + - javascript + - browser + - server + - server-node +--- + +Sentry's Astro SDK enables automatic reporting of errors and performance data in your Astro application. +Our Astro integration instruments both the client as well as the server side of your Astro application. +This page walks you through adding Sentry to your Astro project, configuring it, adding readable stack traces, and verifying your setup. + +## Prerequisites + +Before we get started, make sure you have the following: + +* You need a Sentry [account](https://sentry.io/signup/) and [project](/product/projects/) +* An Astro project that uses Astro `3.0.0` or newer. +* A Node runtime: + * This SDK currently only works on Node runtimes (e.g. Node adapter, Vercel with Lambda functions). +Non-Node runtimes, like Vercel's Edge runtime or Cloudflare Pages, are currently not supported. +* If you're using Astro's Netflify adapter (`@astrojs/netlify`), you need version `5.0.0` or newer. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +Install the SDK by using the `astro` CLI: + +```bash {tabTitle:npm} +npx astro add @sentry/astro +``` + +```bash {tabTitle:yarn} +yarn astro add @sentry/astro +``` + +```bash {tabTitle:pnpm} +pnpm astro add @sentry/astro +``` + +The `astro` CLI installs the SDK package and adds the Sentry integration to your `astro.config.mjs` file. + + + +```bash {tabTitle:npm} +npm install @sentry/profiling-node +``` + +```bash {tabTitle:yarn} +yarn add @sentry/profiling-node +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/profiling-node +``` + + + +To finish the setup, configure the Sentry integration. + +## Configure + +To set up the Sentry SDK, register the Sentry integration and initialize the SDK for client and server in the root directory of your project: + +### Astro Integration Setup + + +```javascript {filename:astro.config.mjs} +import { defineConfig } from "astro/config"; +import sentry from "@sentry/astro"; + +export default defineConfig({ + integrations: [ + sentry({ + sourceMapsUploadOptions: { + project: "___PROJECT_SLUG___", + authToken: process.env.SENTRY_AUTH_TOKEN, + }, + }), + ], +}); +``` + + + Passing runtime-specific configuration options (`dsn`, `release`, `environment`, `sampleRate`, `tracesSampleRate`, `replaysSessionSampleRate`, `replaysOnErrorSampleRate`) to the Sentry integration will be deprecated in future versions. + We recommend passing your configuration directly to the respective `Sentry.init()` calls in `sentry.client.config.js` and `sentry.server.config.js` instead. + + +### Client-Side Setup + +```javascript {filename:sentry.client.config.js} {"onboardingOptions": {"performance": "7,10-13", "session-replay": "8,14-21"}} +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.replayIntegration(), + ], + + // Define how likely traces are sampled. Adjust this value in production, + // or use tracesSampler for greater control. + tracesSampleRate: 1.0, + + // This sets the sample rate to be 10%. You may want this to be 100% while + // in development and sample at a lower rate in production + replaysSessionSampleRate: 0.1, + + // If the entire session is not sampled, use the below sample rate to sample + // sessions when an error occurs. + replaysOnErrorSampleRate: 1.0, +}); +``` + +### Server-Side Setup + +```javascript {filename:sentry.server.config.js} {"onboardingOptions": {"performance": "10-13", "profiling": "2,6-9,14-17"}} +import * as Sentry from "@sentry/astro"; +import { nodeProfilingIntegration } from '@sentry/profiling-node'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // Add our Profiling integration + nodeProfilingIntegration(), + ], + + // Define how likely traces are sampled. Adjust this value in production, + // or use tracesSampler for greater control. + tracesSampleRate: 1.0, + + // Set sampling rate for profiling + // This is relative to tracesSampleRate + profilesSampleRate: 1.0 +}); +``` + +## Add Readable Stack Traces to Errors + +To get readable stack traces in your production builds, set the `SENTRY_AUTH_TOKEN` environment variable in your build environment. You can also add the environment variable to a `.env.sentry-build-plugin` file in the root of your project. + + + +```bash {filename:.env.sentry-build-plugin} +SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ +``` + +This, in combination with your `sourceMapsUploadOptions` configuration, will upload source maps to Sentry every time you make a production build. + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Trigger a test error somewhere in your Astro app, for example in one of your pages: + +```html {filename: home.astro} + +``` + + + Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. + Place the snippet directly in your code instead. + + + + Learn more about manually capturing an error or message in our Usage + documentation. + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + +## Advanced Configuration Options + +### Changing Config Files Location + +Sentry automatically detects configuration files named `sentry.(client|server).config.js` in the root of your project. You can rename these files or move them to a custom folder within your project. +To change their location or names, specify the paths in the Sentry Astro integration options in your `astro.config.mjs`: + +```javascript {filename:astro.config.mjs} +export default defineConfig({ + // Other Astro project options + integrations: [ + sentry({ + clientInitPath: ".config/sentryClientInit.js", + serverInitPath: ".config/sentryServerInit.js", + }), + ], +}); +``` + +### Server Instrumentation + + + + Auto instrumentation only works for Astro 3.5.2 or newer. If you're using an older version, you need to [manually add the Sentry middleware](#manually-add-server-instrumentation) instead. + + + +In SSR or hybrid mode configured Astro apps, the Sentry Astro integration will automatically add an [Astro middleware](https://docs.astro.build/en/guides/middleware/) request handler to your server code. This middleware enhances the data collected by Sentry on the server side by: + +- Collecting performance spans for incoming requests +- Enabeling distributed tracing between client and server +- Enhancing captured errors with additional information + +### Manually Add Server Instrumentation + +For Astro versions below 3.5.2, you need to manually add the Sentry middleware to your `src/middleware.js` file: + +```javascript {filename:src/middleware.(js|ts)} +import * as Sentry from "@sentry/astro"; +import { sequence } from "astro:middleware"; + +export const onRequest = sequence( + Sentry.handleRequest() + // other middleware handlers +); +``` + +If you have multiple request handlers, make sure to add the Sentry middleware as the first handler in the sequence. + +### Customize Server Instrumentation + +Sentry's Astro middleware gives you control over what additional data should be added to the recorded request spans. + +To customize the server instrumentation, add the Sentry middleware to your `src/middleware.js` file: + +```javascript {filename:src/middleware.(js|ts)} +import * as Sentry from "@sentry/astro"; +import { sequence } from "astro:middleware"; + +export const onRequest = sequence( + Sentry.handleRequest({ + trackClientIp: true, // defaults to false + trackHeaders: true, // defaults to false + }) + // other middleware handlers +); +``` + +If you're using Astro 3.5.2 or newer, make sure to also disable auto instrumentation as shown below. + +### Disable Auto Server Instrumentation + +For Astro 3.5.2 or newer, you can disable the automatic server instrumentation by turning off the `requestHandler` auto instrumentation option: + +```javascript {filename:astro.config.mjs} +import { defineConfig } from "astro/config"; +import sentry from "@sentry/astro"; + +export default defineConfig({ + integrations: [ + sentry({ + autoInstrumentation: { + requestHandler: false, + }, + }), + ], + output: "server", +}); +``` diff --git a/docs/platforms/javascript/guides/aws-lambda/config.yml b/docs/platforms/javascript/guides/aws-lambda/config.yml deleted file mode 100644 index 84ff63f521403..0000000000000 --- a/docs/platforms/javascript/guides/aws-lambda/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: AWS Lambda -description: AWS Lambda is a serverless compute service offered as part of Amazon Web Services. Learn how to set it up with Sentry. -sdk: sentry.javascript.aws-serverless -categories: - - javascript - - server - - server-node - - serverless diff --git a/docs/platforms/javascript/guides/aws-lambda/index.mdx b/docs/platforms/javascript/guides/aws-lambda/index.mdx index c9a169c39c50a..200b64db4fedb 100644 --- a/docs/platforms/javascript/guides/aws-lambda/index.mdx +++ b/docs/platforms/javascript/guides/aws-lambda/index.mdx @@ -1,9 +1,12 @@ --- title: AWS Lambda -description: "Learn about Sentry's integration with AWS Lambda." -sdk: sentry.javascript.node +description: AWS Lambda is a serverless compute service offered as part of Amazon Web Services. Learn how to set it up with Sentry. +sdk: sentry.javascript.aws-serverless fallbackGuide: javascript.node categories: + - javascript + - server + - server-node - serverless --- diff --git a/docs/platforms/javascript/guides/azure-functions/config.yml b/docs/platforms/javascript/guides/azure-functions/config.yml deleted file mode 100644 index 4431dd6013a02..0000000000000 --- a/docs/platforms/javascript/guides/azure-functions/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: Azure Functions -description: Azure Functions is a serverless compute service offered as part of Microsoft Azure. Learn how to set it up with Sentry. -sdk: sentry.javascript.astro -categories: - - javascript - - server - - server-node - - serverless diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index dd53b17eb9121..7d9fa3c0ac314 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -1,9 +1,11 @@ --- title: Azure Functions -description: "Learn how to use Sentry's Azure Functions SDK." -sdk: sentry.javascript.node -fallbackGuide: javascript.node +description: Azure Functions is a serverless compute service offered as part of Microsoft Azure. Learn how to set it up with Sentry. +sdk: sentry.javascript.astro categories: + - javascript + - server + - server-node - serverless --- @@ -15,9 +17,7 @@ Select which Sentry features you'd like to install in addition to Error Monitori ## Install - + Sentry captures data by using an SDK within your application’s runtime. This means that you have to add `@sentry/node` as a runtime dependency to your application: @@ -27,7 +27,45 @@ Sentry captures data by using an SDK within your application’s runtime. This m To set up Sentry error logging for an Azure Function: - +```javascript {tabTitle:async} {"onboardingOptions": {"performance": "9-15", "profiling": "2, 6-8, 16-18"}} +const Sentry = require("@sentry/node"); +const { nodeProfilingIntegration } = require("@sentry/profiling-node"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + nodeProfilingIntegration(), + ], + + // Add Performance Monitoring by setting tracesSampleRate + // Set tracesSampleRate to 1.0 to capture 100% of transactions + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Set sampling rate for profiling - this is relative to tracesSampleRate + profilesSampleRate: 1.0, +}); + +module.exports = async function (context, req) { + try { + await notExistFunction(); + } catch (e) { + Sentry.withScope((scope) => { + scope.setSDKProcessingMetadata({ request: req }); + Sentry.captureException(e); + }); + await Sentry.flush(2000); + } + + context.res = { + status: 200, + body: "Hello from Azure Cloud Function!", + }; +}; +``` + You can obtain the DSN using your Sentry account from your organization's _Settings > Projects > Client Keys (DSN)_ in the Sentry web UI. diff --git a/docs/platforms/javascript/guides/bun/config.yml b/docs/platforms/javascript/guides/bun/config.yml deleted file mode 100644 index 978c2aaa7c257..0000000000000 --- a/docs/platforms/javascript/guides/bun/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Bun -sdk: sentry.javascript.bun -categories: - - javascript - - server - - server-edge - - serverless diff --git a/docs/platforms/javascript/guides/bun/index.mdx b/docs/platforms/javascript/guides/bun/index.mdx new file mode 100644 index 0000000000000..f6051c1f2fbe2 --- /dev/null +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -0,0 +1,98 @@ +--- +title: Bun +sdk: sentry.javascript.bun +categories: + - javascript + - server + - server-edge + - serverless +--- + + + +## Install + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + + + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:Bun} +bun add @sentry/bun +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +Sentry should be initialized as early in your app as possible. It is essential that you call `Sentry.init` before you require any other modules in your application—otherwise, auto-instrumentation of these modules will _not_ work. + +Once this is done, Sentry's Bun SDK captures unhandled exceptions as well as tracing data for your application. + +You need to create a file named `instrument.js` that imports and initializes Sentry: + +```javascript {filename: instrument.js} {"onboardingOptions": {"performance": "6-12"}} +import * as Sentry from "@sentry/bun"; + +// Ensure to call this before importing any other modules! +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Add Performance Monitoring by setting tracesSampleRate + // Set tracesSampleRate to 1.0 to capture 100% of transactions + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, +}); +``` + +Once you set a `tracesSampleRate`, performance instrumentation is automatically enabled for you. See Automatic Instrumentation to learn about all the things that the SDK automatically instruments for you. + +You can also manually capture performance data - see Custom Instrumentation for details. + + + +## Use + +You need to import the `instrument.js` file before importing any other modules in your application. This is necessary to ensure that Sentry can automatically instrument all modules in your application: + +```javascript {filename: app.js} +// Import this first! +import "./instrument"; + +// Now import other modules +import http from "http"; + +// Your application code goes here +``` + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```javascript {"onboardingOptions": {"performance": "1-4, 12"}} +Sentry.startSpan({ + op: "test", + name: "My First Test Transaction", +}, () => { + setTimeout(() => { + try { + foo(); + } catch (e) { + Sentry.captureException(e); + } + }, 99); +}); +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/capacitor/config.yml b/docs/platforms/javascript/guides/capacitor/config.yml deleted file mode 100644 index 61512491077ea..0000000000000 --- a/docs/platforms/javascript/guides/capacitor/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Capacitor -description: Sentry's Capacitor SDK enables automatic reporting of errors, exceptions, and messages. It includes native crash support on iOS and Android. -sdk: sentry.javascript.capacitor -categories: - - javascript - - browser - - mobile diff --git a/platform-includes/getting-started-config/javascript.capacitor.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx similarity index 71% rename from platform-includes/getting-started-config/javascript.capacitor.mdx rename to docs/platforms/javascript/guides/capacitor/index.mdx index f7ce90822f5b4..6a1a88dd191e9 100644 --- a/platform-includes/getting-started-config/javascript.capacitor.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -1,3 +1,93 @@ +--- +title: Capacitor +description: Sentry's Capacitor SDK enables automatic reporting of errors, exceptions, and messages. It includes native crash support on iOS and Android. +sdk: sentry.javascript.capacitor +categories: + - javascript + - browser + - mobile +--- + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using: + +```bash {tabTitle:Angular} +# npm +npm install @sentry/capacitor @sentry/angular --save + +# yarn +yarn add @sentry/capacitor @sentry/angular + +# pnpm +pnpm add @sentry/capacitor @sentry/angular +``` + +```bash {tabTitle:React} +# npm +npm install @sentry/capacitor @sentry/react --save + +# yarn +yarn add @sentry/capacitor @sentry/react + +# pnpm +pnpm add @sentry/capacitor @sentry/react +``` + +```bash {tabTitle:Vue} +# npm +npm install @sentry/capacitor @sentry/vue --save + +# yarn +yarn add @sentry/capacitor @sentry/vue + +# pnpm +pnpm add @sentry/capacitor @sentry/vue +``` + +```bash {tabTitle:Other} +# npm +npm install @sentry/capacitor @sentry/browser --save + +# yarn +yarn add @sentry/capacitor @sentry/browser + +# pnpm +pnpm add @sentry/capacitor @sentry/browser +``` + +### Angular Version Compatibility + +In its current beta version, the Sentry Capacitor SDK only supports Angular 14 and newer. + +If you're using an older version of Angular, you also need to use an older version of the SDK. See the table below for compatibility guidance: + +| Angular version | Recommended Sentry SDK | +| --------------- | --------------------------------------------------- | +| 14 and newer | `@sentry/capacitor` `@sentry/angular` | +| 12 or 13 | `@sentry/capacitor^0` `@sentry/angular-ivy@^7` * | +| 10 or 11 | `@sentry/capacitor^0` `@sentry/angular@^7` * | + +\* These versions of the SDK are no longer maintained or tested. Version 0 might still receive bug fixes, but we don't guarantee support. + +### React and Vue Version Compatibility + +Both Frameworks are fully compatible with the current and beta versions of Sentry Capacitor. + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + Then forward the `init` method from the sibling Sentry SDK for the framework you use, such as Angular in this example: @@ -217,6 +307,7 @@ Sentry.init( replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, }, + // Forward the init method from @sentry/angular SentryVue.init ); @@ -239,3 +330,27 @@ Learn more about uploading [source maps](/platforms/javascript/guides/capacitor/ ### Provide Native Debug Information (iOS) To make stack-trace information for native crashes on iOS easier to understand, you need to provide debug information to Sentry. Debug information is provided by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym). + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```javascript +import * as Sentry from "@sentry/capacitor"; + +Sentry.captureException("Test Captured Exception"); +``` + +You can also throw an error anywhere in your application: + +```javascript +throw new Error(`Test Thrown Error`); +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/cloudflare/config.yml b/docs/platforms/javascript/guides/cloudflare/config.yml deleted file mode 100644 index 5f4308c7eab38..0000000000000 --- a/docs/platforms/javascript/guides/cloudflare/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: Cloudflare -description: 'Official Sentry SDK for Cloudflare Workers and Cloudflare Pages.' -sdk: sentry.javascript.cloudflare -categories: - - javascript - - server - - server-edge - - serverless diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx new file mode 100644 index 0000000000000..82dc16f61d376 --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -0,0 +1,139 @@ +--- +title: Cloudflare +description: 'Official Sentry SDK for Cloudflare Workers and Cloudflare Pages.' +sdk: sentry.javascript.cloudflare +categories: + - javascript + - server + - server-edge + - serverless +--- + +## Install + + + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/cloudflare --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/cloudflare +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/cloudflare +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`/`wrangler.json`. This is because the SDK +needs access to the `AsyncLocalStorage` API to work correctly. + + +```toml {tabTitle:Toml} {filename:wrangler.toml} +compatibility_flags = ["nodejs_compat"] +# compatibility_flags = ["nodejs_als"] +``` + +```json {tabTitle:JSON} {filename:wrangler.json} +{ + "compatibility_flags": [ + "nodejs_compat", + // "nodejs_als" + ] +} +``` + +Then you can install the SDK and add it to your project: + +You can either setup up the SDK for [Cloudflare Pages](#setup-cloudflare-pages) or [Cloudflare Workers](#setup-cloudflare-workers). + +### Setup (Cloudflare Pages) + +To use this SDK, add the `sentryPagesPlugin` as [middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/). + +We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire +app. + +```javascript {filename:functions/_middleware.js} {"onboardingOptions": {"performance": "7-10"}} +import * as Sentry from "@sentry/cloudflare"; + +export const onRequest = [ + // Make sure Sentry is the first middleware + Sentry.sentryPagesPlugin((context) => ({ + dsn: "___PUBLIC_DSN___", + // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + })), + // Add more middlewares here +]; +``` + +### Setup (Cloudflare Workers) + +To use this SDK, wrap your handler with the `withSentry` function. This will initialize the SDK and hook into the +environment. Note that you can turn off almost all side effects using the respective options. + +```typescript {filename:index.ts} {"onboardingOptions": {"performance": "6-9"}} +import * as Sentry from "@sentry/cloudflare"; + +export default Sentry.withSentry( + env => ({ + dsn: "___PUBLIC_DSN___", + // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. + // Learn more at + // https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/options/#tracesSampleRate + tracesSampleRate: 1.0, + }), + { + async fetch(request, env, ctx) { + return new Response("Hello World!"); + }, + } satisfies ExportedHandler, +); +``` + +## Add Readable Stack Traces to Errors + +Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code. + +To fix this, upload your source maps to Sentry. + +To start, add `upload_source_maps = true` to your `wrangler.toml` file to enable source map uploading. + +Then run the Sentry Wizard to finish your setup: + + + +For more information on source maps or for more options to upload them, head over to our Source Maps documentation. + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Verify your setup by adding the following snippet anywhere in your code and running it: + +```javascript +setTimeout(() => { + throw new Error(); +}); +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/connect/config.yml b/docs/platforms/javascript/guides/connect/config.yml deleted file mode 100644 index 8d58b5a8871a8..0000000000000 --- a/docs/platforms/javascript/guides/connect/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Connect -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/connect/index.mdx b/docs/platforms/javascript/guides/connect/index.mdx index f4b54dc85b387..6940442cb0582 100644 --- a/docs/platforms/javascript/guides/connect/index.mdx +++ b/docs/platforms/javascript/guides/connect/index.mdx @@ -4,7 +4,9 @@ description: "Learn about using Sentry with Connect." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- diff --git a/docs/platforms/javascript/guides/cordova/config.yml b/docs/platforms/javascript/guides/cordova/config.yml deleted file mode 100644 index 80acc2192123b..0000000000000 --- a/docs/platforms/javascript/guides/cordova/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Cordova -sdk: sentry.javascript.cordova -categories: - - javascript - - browser - - mobile diff --git a/docs/platforms/javascript/guides/cordova/index.mdx b/docs/platforms/javascript/guides/cordova/index.mdx new file mode 100644 index 0000000000000..e70d87bfcc9cf --- /dev/null +++ b/docs/platforms/javascript/guides/cordova/index.mdx @@ -0,0 +1,40 @@ +--- +title: Cordova +sdk: sentry.javascript.cordova +categories: + - javascript + - browser + - mobile +--- + + + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + + + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + + + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + + diff --git a/docs/platforms/javascript/guides/deno/config.yml b/docs/platforms/javascript/guides/deno/config.yml deleted file mode 100644 index 99f53a09457fa..0000000000000 --- a/docs/platforms/javascript/guides/deno/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Deno -sdk: sentry.javascript.deno -categories: - - javascript - - server - - server-edge - - serverless diff --git a/docs/platforms/javascript/guides/deno/index.mdx b/docs/platforms/javascript/guides/deno/index.mdx new file mode 100644 index 0000000000000..7026695963d2e --- /dev/null +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -0,0 +1,94 @@ +--- +title: Deno +sdk: sentry.javascript.deno +categories: + - javascript + - server + - server-edge + - serverless +--- + + + + The Deno SDK is currently in Beta. + + + +The minimum supported Deno version is 2. + + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + + + +```javascript {tabTitle: Deno} {"onboardingOptions": {"performance": "5-11" }} +import * as Sentry from "npm:@sentry/deno"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, +}); +``` + +```javascript {tabTitle: npm} {"onboardingOptions": {"performance": "5-11" }} +import * as Sentry from "@sentry/deno"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, +}); +``` +To ensure the SDK can send events, you should enable network access for your +ingestion domain: + +```bash +deno run --allow-net=___ORG_INGEST_DOMAIN___ index.ts +``` + +## Allow access to your source files + +To ensure the SDK can include your source code in stack traces, you should enable read access for your source files: + +```bash +deno run --allow-read=./src index.ts +``` + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Verify your setup by adding the following snippet anywhere in your code and running it: + +```javascript +setTimeout(() => { + throw new Error(); +}); +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/electron/config.yml b/docs/platforms/javascript/guides/electron/config.yml deleted file mode 100644 index 9b2fd04a66a2b..0000000000000 --- a/docs/platforms/javascript/guides/electron/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Electron -sdk: sentry.javascript.electron -categories: - - javascript - - desktop diff --git a/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index deab2980bc45e..ee818bb1ed061 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -3,6 +3,7 @@ title: Electron description: "Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Learn how to set it up with Sentry." sdk: sentry.javascript.electron categories: + - javascript - desktop --- @@ -16,15 +17,60 @@ Select which Sentry features you'd like to install in addition to Error Monitori ## Install - + - +```bash {tabTitle:npm} +npm install @sentry/electron --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/electron +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/electron +``` ## Configure - +You should `init` the SDK in the `main` process and every `renderer` process you spawn. + +In the Electron `main` process: + +```javascript +import * as Sentry from "@sentry/electron/main"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", +}); +``` + +In the Electron `renderer` process: + +```javascript {"onboardingOptions": {"performance": "5, 8-14", "session-replay": "6, 15-21"}} +import * as Sentry from "@sentry/electron/renderer"; + +Sentry.init({ + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + // Learn more at + // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` Once configured, all unhandled exceptions and native crashes are automatically captured by Sentry. @@ -236,13 +282,13 @@ The SDK relies on the [Electron crashReporter](https://electronjs.org/docs/api/c Once the crash reporter is active, the SDK will automatically capture native crashes for the following processes: -| | `event.process` tag|macOS | Windows | Linux | -|--------------------|-------|---------|-------|---| -| Electron `main` process |`browser` |✓ | ✓ | ✓ | -| Electron `renderer` process |`renderer` |✓ | ✓ | ✓ | -| Electron `utilityProcess`|`utility`|✓|✓|✓ 1| -| `child_process.fork` | `node`|✓ | ✓ | | -| `child_process.exec/spawn` | `unknown`|✓ | | | +| | `event.process` tag | macOS | Windows | Linux | +|-----------------------------|---------------------|-------|---------|----------------| +| Electron `main` process | `browser` | ✓ | ✓ | ✓ | +| Electron `renderer` process | `renderer` | ✓ | ✓ | ✓ | +| Electron `utilityProcess` | `utility` | ✓ | ✓ | ✓ 1 | +| `child_process.fork` | `node` | ✓ | ✓ | | +| `child_process.exec/spawn` | `unknown` | ✓ | | | 1 Not working with Electron v29.4.6. diff --git a/docs/platforms/javascript/guides/ember/config.yml b/docs/platforms/javascript/guides/ember/config.yml deleted file mode 100644 index 68e12f2d42cdd..0000000000000 --- a/docs/platforms/javascript/guides/ember/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Ember -sdk: sentry.javascript.ember -categories: - - javascript - - browser diff --git a/docs/platforms/javascript/guides/ember/index.mdx b/docs/platforms/javascript/guides/ember/index.mdx new file mode 100644 index 0000000000000..5159979312ef4 --- /dev/null +++ b/docs/platforms/javascript/guides/ember/index.mdx @@ -0,0 +1,95 @@ +--- +title: Ember +sdk: sentry.javascript.ember +categories: + - javascript + - browser +--- + + + + Sentry's Ember addon enables automatic reporting of errors, exceptions, and transactions. + + + +The minimum supported Ember.js version is `4.0.0`. + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +This snippet includes automatic instrumentation to monitor the performance of your application, which registers and configures the Tracing integration, including custom [Ember instrumentation](./configuration/ember-options/). + +```javascript {"onboardingOptions": {"performance": "11-17", "session-replay": "10, 18-24"}} +import Application from "@ember/application"; +import Resolver from "ember-resolver"; +import loadInitializers from "ember-load-initializers"; +import config from "./config/environment"; + +import * as Sentry from "@sentry/ember"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.replayIntegration()], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + // Learn more at + // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); + +export default class App extends Application { + modulePrefix = config.modulePrefix; + podModulePrefix = config.podModulePrefix; + Resolver = Resolver; +} +``` + + + + This SDK uses Ember configuration conventions to manage its automatic instrumentation and other Sentry options. This additional configuration can be found under Ember options. + + + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + + + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + + diff --git a/docs/platforms/javascript/guides/express/config.yml b/docs/platforms/javascript/guides/express/config.yml deleted file mode 100644 index b6a3ee622e9cb..0000000000000 --- a/docs/platforms/javascript/guides/express/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Express -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/express/index.mdx b/docs/platforms/javascript/guides/express/index.mdx index 74dfe4983bd11..4c05dc85efc94 100644 --- a/docs/platforms/javascript/guides/express/index.mdx +++ b/docs/platforms/javascript/guides/express/index.mdx @@ -4,7 +4,9 @@ description: "Learn about using Sentry with Express." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- diff --git a/docs/platforms/javascript/guides/fastify/config.yml b/docs/platforms/javascript/guides/fastify/config.yml deleted file mode 100644 index f315621005dbf..0000000000000 --- a/docs/platforms/javascript/guides/fastify/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Fastify -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/fastify/index.mdx b/docs/platforms/javascript/guides/fastify/index.mdx index b3bc73a2f2f4f..5c939e0d913a2 100644 --- a/docs/platforms/javascript/guides/fastify/index.mdx +++ b/docs/platforms/javascript/guides/fastify/index.mdx @@ -1,14 +1,14 @@ --- title: Fastify -description: "Learn about using Sentry with Fastify." +description: "This guide explains how to set up Sentry in your Fastify application." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- -This guide explains how to set up Sentry in your Fastify application. - diff --git a/docs/platforms/javascript/guides/gatsby/config.yml b/docs/platforms/javascript/guides/gatsby/config.yml deleted file mode 100644 index c203e4bf48c8f..0000000000000 --- a/docs/platforms/javascript/guides/gatsby/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Gatsby -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index f950d503c78ff..39c0b7e3a9a80 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -3,10 +3,10 @@ title: Gatsby sdk: "sentry.javascript.gatsby" description: "Learn how to use Sentry's Gatsby SDK." categories: + - javascript - browser --- - ## Features In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). @@ -15,9 +15,7 @@ Select which Sentry features you'd like to install in addition to Error Monitori ## Install - + To use Sentry with your Gatsby application, you will need to use `@sentry/gatsby` (Sentry's Gatsby SDK): @@ -56,7 +54,7 @@ module.exports = { Then, configure your `Sentry.init`: -```javascript {filename:sentry.config.(js|ts)} {"onboardingOptions": {"performance": "6, 9-13", "session-replay": "7, 14-18"}} +```javascript {filename:sentry.config.(js|ts)} {"onboardingOptions": {"performance": "6, 9-15", "session-replay": "7, 16-22"}} import * as Sentry from "@sentry/gatsby"; Sentry.init({ diff --git a/docs/platforms/javascript/guides/gcp-functions/config.yml b/docs/platforms/javascript/guides/gcp-functions/config.yml deleted file mode 100644 index 4dd77f3258787..0000000000000 --- a/docs/platforms/javascript/guides/gcp-functions/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Google Cloud Functions -sdk: sentry.javascript.google-cloud-serverless -categories: - - javascript - - server - - server-node - - serverless diff --git a/docs/platforms/javascript/guides/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 84a6d49f8dedc..7a518aaa3ec23 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -1,9 +1,12 @@ --- title: Google Cloud Functions description: "Learn how to use Sentry's Google Cloud Functions SDK." -sdk: sentry.javascript.node +sdk: sentry.javascript.google-cloud-serverless fallbackGuide: javascript.node categories: + - javascript + - server + - server-node - serverless --- @@ -32,7 +35,7 @@ Add `@sentry/google-cloud-serverless` as a dependency to `package.json`: To set up Sentry for a Google Cloud Function: -```javascript {tabTitle:Http functions} {"onboardingOptions": {"performance": "5-9"}} +```javascript {tabTitle:Http functions} {"onboardingOptions": {"performance": "5-11"}} const Sentry = require("@sentry/google-cloud-serverless"); Sentry.init({ diff --git a/docs/platforms/javascript/guides/hapi/config.yml b/docs/platforms/javascript/guides/hapi/config.yml deleted file mode 100644 index e6b311d44d744..0000000000000 --- a/docs/platforms/javascript/guides/hapi/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Hapi -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/hapi/index.mdx b/docs/platforms/javascript/guides/hapi/index.mdx index c473c43093683..94eeb9bf93303 100644 --- a/docs/platforms/javascript/guides/hapi/index.mdx +++ b/docs/platforms/javascript/guides/hapi/index.mdx @@ -4,7 +4,9 @@ description: "Learn about using Sentry with Hapi." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- diff --git a/docs/platforms/javascript/guides/hono/config.yml b/docs/platforms/javascript/guides/hono/config.yml deleted file mode 100644 index e63d04b13d591..0000000000000 --- a/docs/platforms/javascript/guides/hono/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Hono -description: Learn how to set up Hono with Sentry. -sdk: sentry.javascript.hono -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx index 6f33fb75d3331..d0b81b4b26405 100644 --- a/docs/platforms/javascript/guides/hono/index.mdx +++ b/docs/platforms/javascript/guides/hono/index.mdx @@ -1,8 +1,11 @@ --- title: Hono -description: "Learn about using Sentry with Hono." +description: Learn how to set up Hono with Sentry. +sdk: sentry.javascript.hono categories: + - javascript - server + - server-node --- @@ -17,9 +20,7 @@ In addition to capturing errors, you can monitor interactions between multiple s Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - + ## Setup diff --git a/docs/platforms/javascript/guides/koa/config.yml b/docs/platforms/javascript/guides/koa/config.yml deleted file mode 100644 index 789704e384975..0000000000000 --- a/docs/platforms/javascript/guides/koa/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Koa -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/koa/index.mdx b/docs/platforms/javascript/guides/koa/index.mdx index 36aa6d34f8961..ed61e821dd2d3 100644 --- a/docs/platforms/javascript/guides/koa/index.mdx +++ b/docs/platforms/javascript/guides/koa/index.mdx @@ -4,7 +4,9 @@ description: "Learn about using Sentry with Koa." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- diff --git a/docs/platforms/javascript/guides/nestjs/config.yml b/docs/platforms/javascript/guides/nestjs/config.yml deleted file mode 100644 index f811d7e17e6f8..0000000000000 --- a/docs/platforms/javascript/guides/nestjs/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Nestjs -sdk: sentry.javascript.nestjs -categories: - - javascript - - server - - server-node diff --git a/docs/platforms/javascript/guides/nestjs/index.mdx b/docs/platforms/javascript/guides/nestjs/index.mdx index 4cdeaa484f455..44deaaac34090 100644 --- a/docs/platforms/javascript/guides/nestjs/index.mdx +++ b/docs/platforms/javascript/guides/nestjs/index.mdx @@ -2,9 +2,11 @@ title: Nest.js description: "Learn about using Sentry with Nest.js." sdk: sentry.javascript.nestjs -fallbackGuide: javascript.nestjs +fallbackGuide: javascript.node categories: + - javascript - server + - server-node --- This guide explains how to set up Sentry in your Nest.js application. diff --git a/docs/platforms/javascript/guides/nextjs/config.yml b/docs/platforms/javascript/guides/nextjs/config.yml deleted file mode 100644 index 87587bbfe0184..0000000000000 --- a/docs/platforms/javascript/guides/nextjs/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: 'Next.js' -description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry. -sdk: sentry.javascript.nextjs -categories: - - javascript - - browser - - server - - server-node diff --git a/docs/platforms/javascript/guides/nextjs/index.mdx b/docs/platforms/javascript/guides/nextjs/index.mdx new file mode 100644 index 0000000000000..1895484668458 --- /dev/null +++ b/docs/platforms/javascript/guides/nextjs/index.mdx @@ -0,0 +1,106 @@ +--- +title: 'Next.js' +description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry. +sdk: sentry.javascript.nextjs +categories: + - javascript + - browser + - server + - server-node +--- + + + +## Step 1: Install + +To install Sentry using the installation wizard, run the following command within your project: + +```bash +npx @sentry/wizard@latest -i nextjs +``` + +The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. + + + + - [**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. + + + +This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. + + + + - Creates config files with the default `Sentry.init()` calls for all runtimes (Node.js, Browser, and Edge) + - Adds a Next.js instrumentation hook to your project (`instrumentation.ts`) + - Creates or updates your Next.js config with the default Sentry settings + - Creates error handling components (`global-error.(jsx|tsx)` and `_error.jsx` for the Pages Router) if they don't already exist + - Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`) + - Adds an example page and route to your application to help verify your Sentry setup + + + +## Step 2: Verify Your Setup + + + +If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard: + +1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost. +2. Click the "Throw error" button. This triggers two errors: +- a frontend error +- an error within the API route + +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. + + + + Don't forget to explore the example files' code in your project to understand what's happening after your button 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). + + + + Errors triggered from within your browser's developer tools (i.e., the browser console) are sandboxed, so they will not trigger Sentry's error monitoring. + + + + + + 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 [**Replays**](https://sentry.io/orgredirect/organizations/:orgslug/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. + + + +## Next Steps + +At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project. + +Now's a good time to customize your setup and look into more advanced topics. +Our next recommended steps for you are: + +- Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/) +- Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/) +- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts +- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/) + + + + - If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/) + - [Get support](https://sentry.zendesk.com/hc/en-us/) + + diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx index d9a0fecec3be4..39137f271cb07 100644 --- a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx @@ -15,9 +15,7 @@ description: "Learn how to manually set up Sentry in your Next.js app and captur Choose the features you want to configure, and this guide will show you how: - + diff --git a/docs/platforms/javascript/guides/node/config.yml b/docs/platforms/javascript/guides/node/config.yml deleted file mode 100644 index 90d689d5147b7..0000000000000 --- a/docs/platforms/javascript/guides/node/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Node -sdk: sentry.javascript.node -categories: - - javascript - - server - - server-node - - serverless diff --git a/docs/platforms/javascript/guides/node/index.mdx b/docs/platforms/javascript/guides/node/index.mdx index 2ec729374723e..a7ec57e4af095 100644 --- a/docs/platforms/javascript/guides/node/index.mdx +++ b/docs/platforms/javascript/guides/node/index.mdx @@ -3,7 +3,10 @@ title: Node.js description: "Learn how to set up Sentry in your Node.js application." sdk: sentry.javascript.node categories: + - javascript - server + - server-node + - serverless --- diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml deleted file mode 100644 index c4457c5a689aa..0000000000000 --- a/docs/platforms/javascript/guides/nuxt/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: Nuxt -description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. -sdk: sentry.javascript.nuxt -categories: - - javascript - - browser - - server \ No newline at end of file diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx new file mode 100644 index 0000000000000..f50a30e3fd4c7 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -0,0 +1,136 @@ +--- +title: Nuxt +description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. +sdk: sentry.javascript.nuxt +categories: + - javascript + - browser + - server +--- + + + This SDK is currently in **beta**. Beta features are still in progress and may have bugs. Please reach out on + [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. + + +Sentry's Nuxt SDK enables automatic reporting of errors and performance data. + +## Compatibility + +The Sentry Nuxt SDK supports Nuxt version `3.7.0` and above. For best results, we recommend +using Nuxt `3.14.0` or later, which includes updated dependencies critical to the SDK's functionality. + + + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +We recommend installing the SDK by running our installation wizard in the root directory of your project: + +```bash +npx @sentry/wizard@latest -i nuxt +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create or update Nuxt files with the default Sentry configuration: + - `sentry.(client|server).config.ts` to initialize the SDK + - `nuxt.config.ts` to add build options to add source maps upload and auto-instrumentation via Vite plugins. +- create a `.env.sentry-build-plugin` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) +- add an example page to your frontend app and your server to verify your Sentry setup + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. + +You can also manually capture errors. + + + If the setup through the wizard doesn't work for you, you can also set up the SDK manually. + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +To complete your configuration, add options to your `Sentry.init()` calls. + +Here, you'll also be able to set context data, which includes data about the user, tags, or even arbitrary data, all of which will be added to every event sent to Sentry. + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +### Server-side + +Sentry can only be loaded on the server-side by being explicitly added via `--import`. +Check out the `--import` CLI flag docs for setup instructions. + +To verify that Sentry works on the server-side, add the following snippet on the server-side: + +```js {tabTitle:Nitro} {filename:server/api/sentry-example.get.ts} +export default defineEventHandler(event => { + throw new Error("Sentry Example API Route Error"); +}); +``` + +If you want to test server-side monitoring locally, build your project and run: + ``` + # Start your app after building your project with `nuxi build` + node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs + ``` + + + Sentry server-side monitoring **doesn't work in development mode!** + + If you experience any issues with the server-side setup, check out Troubleshooting + or read through the different installation methods. + + +### Client-side + +Add the following snippet on the client-side: + +```html {tabTitle:Vue} {filename:pages/example-error.vue} + + + +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + +## Next Steps + +- Track your Vue Components or your Pinia store by [adding support for client features](/platforms/javascript/guides/nuxt/features/) +- In case you experience any issues during setup or startup, check out Troubleshooting +or read through the different installation methods. diff --git a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx index 13a0fad8e62d7..45b119abcbfde 100644 --- a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx @@ -190,4 +190,77 @@ the Sentry Nuxt Module respects these when they are explicitly defined. This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. - +### Server-side + +Sentry can only be loaded on the server-side by being explicitly added via `--import`. +Check out the `--import` CLI flag docs for setup instructions. + +To verify that Sentry works on the server-side, add the following snippet on the server-side: + +```js {tabTitle:Nitro} {filename:server/api/sentry-example.get.ts} +export default defineEventHandler(event => { + throw new Error("Sentry Example API Route Error"); +}); +``` + +If you want to test server-side monitoring locally, build your project and run: + ``` + # Start your app after building your project with `nuxi build` + node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs + ``` + + + Sentry server-side monitoring **doesn't work in development mode!** + + If you experience any issues with the server-side setup, check out Troubleshooting + or read through the different installation methods. + + +### Client-side + +Add the following snippet on the client-side: + +```html {tabTitle:Vue} {filename:pages/example-error.vue} + + + +``` + + + + Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + +## Next Steps + +- Track your Vue Components or your Pinia store by [adding support for client features](/platforms/javascript/guides/nuxt/features/) +- In case you experience any issues during setup or startup, check out Troubleshooting +or read through the different installation methods. diff --git a/docs/platforms/javascript/guides/react-router/config.yml b/docs/platforms/javascript/guides/react-router/config.yml deleted file mode 100644 index c37004318bd01..0000000000000 --- a/docs/platforms/javascript/guides/react-router/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: React Router Framework -description: React Router v7 is a framework for building full-stack web apps and websites. Learn how to set it up with Sentry. -sdk: sentry.javascript.react-router -categories: - - javascript - - browser - - server - - server-node diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx new file mode 100644 index 0000000000000..9d51967604b81 --- /dev/null +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -0,0 +1,280 @@ +--- +title: React Router Framework +description: React Router v7 is a framework for building full-stack web apps and websites. Learn how to set it up with Sentry. +sdk: sentry.javascript.react-router +categories: + - javascript + - browser + - server + - server-node +--- + + + + This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/) if you have any feedback or concerns. + + + + + + If you are using React Router in library mode, you can follow the instructions in the [React guide here](/platforms/javascript/guides/react/features/react-router/v7). + + + + + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + + + + + + ```bash {tabTitle:npm} + npm install @sentry/react-router @sentry/profiling-node + ``` + + ```bash {tabTitle:yarn} + yarn add @sentry/react-router @sentry/profiling-node + ``` + + ```bash {tabTitle:pnpm} + pnpm add @sentry/react-router @sentry/profiling-node + ``` + + + + + ```bash {tabTitle:npm} + npm install @sentry/react-router + ``` + + ```bash {tabTitle:yarn} + yarn add @sentry/react-router + ``` + + ```bash {tabTitle:pnpm} + pnpm add @sentry/react-router + ``` + + +## Configure + +### Expose Hooks +React Router exposes two hooks in your `app` folder (`entry.client.tsx` and `entry.server.tsx`). +If you do not see these two files, expose them with the following command: + +```bash +npx react-router reveal +``` + +### Client-Side Setup + +Initialize the Sentry React SDK in your `entry.client.tsx` file: + +```tsx {filename: entry.client.tsx} {"onboardingOptions": {"performance": "9, 12-16", "session-replay": "10, 17-21"}} +import * as Sentry from "@sentry/react-router"; +import { startTransition, StrictMode } from "react"; +import { hydrateRoot } from "react-dom/client"; +import { HydratedRouter } from "react-router/dom"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.replayIntegration(), + ], + + tracesSampleRate: 1.0, // Capture 100% of the transactions + + // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled + tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); + +startTransition(() => { + hydrateRoot( + document, + + + + ); +}); +``` + +Now, update your `app/root.tsx` file to report any unhandled errors from your error boundary: + +```tsx {diff} {filename: app/root.tsx} +import * as Sentry from "@sentry/react-router"; + +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { + let message = "Oops!"; + let details = "An unexpected error occurred."; + let stack: string | undefined; + + if (isRouteErrorResponse(error)) { + message = error.status === 404 ? "404" : "Error"; + details = + error.status === 404 + ? "The requested page could not be found." + : error.statusText || details; + } else if (error && error instanceof Error) { + // you only want to capture non 404-errors that reach the boundary ++ Sentry.captureException(error); + if (import.meta.env.DEV) { + details = error.message; + stack = error.stack; + } + } + + return ( +
+

{message}

+

{details}

+ {stack && ( + 
+          {stack}
+
+ )} +
+ ); +} +// ... +``` + +### Server-Side Setup + +Create an `instrument.server.mjs` file in the root of your app: + +```js {filename: instrument.server.mjs} {"onboardingOptions": {"performance": "7", "profiling": "2, 6, 8"}} +import * as Sentry from "@sentry/react-router"; +import { nodeProfilingIntegration } from '@sentry/profiling-node'; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [nodeProfilingIntegration()], + tracesSampleRate: 1.0, // Capture 100% of the transactions + profilesSampleRate: 1.0, // profile every transaction +}); +``` + +In your `entry.server.tsx` file, export the `handleError` function: + +```tsx {diff} {filename: entry.server.tsx} +import * as Sentry from "@sentry/node"; +import { type HandleErrorFunction } from "react-router"; + +export const handleError: HandleErrorFunction = (error, { request }) => { + // React Router may abort some interrupted requests, report those + if (!request.signal.aborted) { ++ Sentry.captureException(error); + + // make sure to still log the error so you can see it + console.error(error); + } +}; +// ... rest of your server entry +``` + +### Update Scripts + +Since React Router is running in ESM mode, you need to use the `--import` command line options to load our server-side instrumentation module before the application starts. +Update the `start` and `dev` script to include the instrumentation file: + +```json {filename: package.json} +"scripts": { + "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev", + "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js", +} +``` + +## Source Maps Upload + +Update `vite.config.ts` to include the `sentryReactRouter` plugin. Also add your `SentryReactRouterBuildOptions` config options to the Vite config (this is required for uploading source maps at the end of the build): + + + +```typescript {filename: vite.config.ts} +import { reactRouter } from '@react-router/dev/vite'; +import { sentryReactRouter, type SentryReactRouterBuildOptions } from '@sentry/react-router'; +import { defineConfig } from 'vite'; + +const sentryConfig: SentryReactRouterBuildOptions = { + org: "___ORG_SLUG___", + project: "___PROJECT_SLUG___", + + // An auth token is required for uploading source maps. + authToken: "___ORG_AUTH_TOKEN___" + // ... +}; + +export default defineConfig(config => { + return { + plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)], + sentryConfig, + }; +}); +``` + +Include the `sentryOnBuildEnd` hook in `react-router.config.ts`: + +```typescript {filename: react-router.config.ts} {9} +import type { Config } from '@react-router/dev/config'; +import { sentryOnBuildEnd } from '@sentry/react-router'; + +export default { + ssr: true, + buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => { + // ... + // Call this at the end of the hook + await sentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest }); + }, +} satisfies Config; +``` + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Throw an error in a loader to verify that Sentry is working. +After opening this route in your browser, you should see two errors in the Sentry issue stream, one captured from the server and one captured from the client. + +```tsx {filename: error.tsx} +import type { Route } from "./+types/example-page"; + +export async function loader() { + throw new Error("some error thrown in a loader"); +} + +export default function ExamplePage() { + return ( +
+ Loading this page will throw an error +
+ ); +} + +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/react/config.yml b/docs/platforms/javascript/guides/react/config.yml deleted file mode 100644 index c21149790e068..0000000000000 --- a/docs/platforms/javascript/guides/react/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: React -description: "Learn about Sentry's React SDK and how it automatically reports errors and exceptions in your application." -sdk: sentry.javascript.react -categories: - - javascript - - browser diff --git a/platform-includes/getting-started-config/javascript.react.mdx b/docs/platforms/javascript/guides/react/index.mdx similarity index 61% rename from platform-includes/getting-started-config/javascript.react.mdx rename to docs/platforms/javascript/guides/react/index.mdx index bee80881ea6c8..d0d0400a0429d 100644 --- a/platform-includes/getting-started-config/javascript.react.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -1,7 +1,52 @@ +--- +title: React +description: "Learn about Sentry's React SDK and how it automatically reports errors and exceptions in your application." +sdk: sentry.javascript.react +categories: + - javascript + - browser +--- + + + +Sentry's React SDK enables automatic reporting of errors and exceptions. The SDK is a wrapper around @sentry/browser, with added functionality related to React. All methods available in @sentry/browser can be imported from @sentry/react. + + + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/react --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/react +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/react +``` + +## Configure + +Sentry supports multiple versions of React Router. To learn how to configure them, read the React Router Integration docs. + Sentry should be initialized as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point as shown in the example below: -```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "3-8, 13-21, 24-30", "session-replay": "22, 31-35"}} +```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "3-8, 13-21, 24-30", "session-replay": "22, 33-39"}} import { useEffect } from "react"; import * as Sentry from "@sentry/react"; import { @@ -93,3 +138,28 @@ The React Router integration is designed to work with our tracing package. Learn ### Apply Redux To apply Sentry to Redux, learn more about the [Redux Integration](configuration/integrations/redux/) and its options. + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```javascript + +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/remix/config.yml b/docs/platforms/javascript/guides/remix/config.yml deleted file mode 100644 index bbca1357a175f..0000000000000 --- a/docs/platforms/javascript/guides/remix/config.yml +++ /dev/null @@ -1,8 +0,0 @@ -title: Remix -description: Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations. -sdk: sentry.javascript.remix -categories: - - javascript - - browser - - server - - server-node diff --git a/docs/platforms/javascript/guides/remix/index.mdx b/docs/platforms/javascript/guides/remix/index.mdx new file mode 100644 index 0000000000000..6db6610c06301 --- /dev/null +++ b/docs/platforms/javascript/guides/remix/index.mdx @@ -0,0 +1,112 @@ +--- +title: Remix +description: Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations. +sdk: sentry.javascript.remix +categories: + - javascript + - browser + - server + - server-node +--- + + + + Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations. + + + +Sentry's Remix SDK relies on our [React SDK](/platforms/javascript/guides/react/) for the frontend and [Node SDK](/platforms/node) for the backend. That means all features available in those SDKs are also available in this SDK. +The minimum supported Remix version is `2.0.0`. + + + + Sentry's Remix SDK does not officially support adapters that use non-Node runtimes, such as Cloudflare Workers. + + + + + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +We recommend installing the SDK through our installation wizard: + +```bash +npx @sentry/wizard@latest -i remix +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). +- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`. +- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`). +- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application. +- add an example page to your app to verify your Sentry setup + +If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features. + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + + If the wizard setup isn't working for you, you can set up the SDK manually. + + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +To complete your configuration, add options to your `Sentry.init()` calls. +Here, you'll also be able to set context data, which includes data about the user, tags, or even arbitrary data, all of which will be added to every event sent to Sentry. + +## Add Readable Stack Traces to Errors + +By default, Remix will minify your JavaScript and CSS files in production. This makes it difficult to debug errors in production. To make debugging easier, you can generate source maps and upload them to Sentry. + +Depending on your build setup, you can either use [Sentry's Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) or `sentry-upload-sourcemaps` script to upload sourcemaps. + +Please refer to the Sourcemaps Documentation, for more information. + +For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload sourcemaps. + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```typescript {filename:routes/error.tsx} + +``` + +This snippet adds a button that throws an error in a component or page. + + + + Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. + + + +Then, throw an error in a `loader` or `action`. + +```typescript {filename:routes/error.tsx} +export const action: ActionFunction = async ({ request }) => { + throw new Error("Sentry Error"); +}; +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/remix/manual-setup.mdx b/docs/platforms/javascript/guides/remix/manual-setup.mdx index 3317974464677..e58cdf17669ba 100644 --- a/docs/platforms/javascript/guides/remix/manual-setup.mdx +++ b/docs/platforms/javascript/guides/remix/manual-setup.mdx @@ -208,7 +208,27 @@ After you've completed this setup, the SDK will automatically capture unhandled This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. - + + + Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. + + + +Then, throw an error in a `loader` or `action`. + +```typescript {filename:routes/error.tsx} +export const action: ActionFunction = async ({ request }) => { + throw new Error("Sentry Error"); +}; +``` + + + + Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/remix/manual-setup__v8.x.mdx b/docs/platforms/javascript/guides/remix/manual-setup__v8.x.mdx index afc72da29d856..7a27030a88103 100644 --- a/docs/platforms/javascript/guides/remix/manual-setup__v8.x.mdx +++ b/docs/platforms/javascript/guides/remix/manual-setup__v8.x.mdx @@ -241,14 +241,35 @@ After you've completed this setup, the SDK will automatically capture unhandled This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. - + + + Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. + + + +Then, throw an error in a `loader` or `action`. + +```typescript {filename:routes/error.tsx} +export const action: ActionFunction = async ({ request }) => { + throw new Error("Sentry Error"); +}; +``` -You can refer to [Remix Docs](https://remix.run/docs/en/main/guides/envvars#browser-environment-variables) to learn how to use your Sentry DSN with environment variables. + Learn more about manually capturing an error or message in our Usage documentation. +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. + + + + You can refer to [Remix Docs](https://remix.run/docs/en/main/guides/envvars#browser-environment-variables) to learn how to use your Sentry DSN with environment variables. + + + + ## Custom Express Server You can import your server instrumentation file at the top of your Express server implementation. diff --git a/docs/platforms/javascript/guides/solid/config.yml b/docs/platforms/javascript/guides/solid/config.yml deleted file mode 100644 index d9fd7bf08ad92..0000000000000 --- a/docs/platforms/javascript/guides/solid/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Solid -sdk: sentry.javascript.solid -categories: - - javascript - - browser diff --git a/docs/platforms/javascript/guides/solid/index.mdx b/docs/platforms/javascript/guides/solid/index.mdx new file mode 100644 index 0000000000000..d26b54563989a --- /dev/null +++ b/docs/platforms/javascript/guides/solid/index.mdx @@ -0,0 +1,115 @@ +--- +title: Solid +sdk: sentry.javascript.solid +categories: + - javascript + - browser +--- + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/solid --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/solid +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/solid +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +To use the SDK, initialize it in your Solid entry point before bootstrapping your app. In a typical Solid project, that is your `index.jsx` file. + + + We currently support Solid 1.8.4 and up. + + + +```javascript {filename: index.jsx} {"onboardingOptions": {"performance": "2, 12, 15-21", "session-replay": "13, 25-31"}} +import * as Sentry from "@sentry/solid"; +import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter"; +import { render } from "solid-js/web"; +import { DEV } from "solid-js"; +import App from "./app"; + +// this will only initialize your Sentry client in production builds. +if (!DEV) { + Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + solidRouterBrowserTracingIntegration(), + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus 100% of sessions with an error + // Learn more at + // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }); +} + +const app = document.getElementById("app"); + +if (!app) throw new Error("No #app element found in the DOM."); + +render(() => , app); +``` + +Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/solid/usage). + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```javascript + +``` + +This snippet adds a button that throws an error in a Solid component. + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/solidstart/config.yml b/docs/platforms/javascript/guides/solidstart/config.yml deleted file mode 100644 index cff1462d26491..0000000000000 --- a/docs/platforms/javascript/guides/solidstart/config.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: SolidStart -description: SolidStart is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. -sdk: sentry.javascript.solidstart -categories: - - browser - - server diff --git a/platform-includes/getting-started-config/javascript.solidstart.mdx b/docs/platforms/javascript/guides/solidstart/index.mdx similarity index 63% rename from platform-includes/getting-started-config/javascript.solidstart.mdx rename to docs/platforms/javascript/guides/solidstart/index.mdx index 80be61eb951ec..0887c4601e931 100644 --- a/platform-includes/getting-started-config/javascript.solidstart.mdx +++ b/docs/platforms/javascript/guides/solidstart/index.mdx @@ -1,3 +1,32 @@ +--- +title: SolidStart +description: SolidStart is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. +sdk: sentry.javascript.solidstart +categories: + - browser + - server +--- + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/solidstart --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/solidstart +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/solidstart +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + Initialize the Sentry SDK in your `src/entry-client.tsx` file. If you're using Solid Router, add the `solidRouterBrowserTracingIntegration` to collect meaningful performance data about the health of your page loads and associated requests. @@ -126,4 +155,70 @@ For example, update your scripts in `package.json`. or check out Troubleshooting. +## Add Readable Stack Traces to Errors + +To upload source maps, use the `sentrySolidStartVite` plugin from `@sentry/solidstart` and configure an auth token. +Auth tokens can be passed to the plugin explicitly with the `authToken` option. You can use the +`SENTRY_AUTH_TOKEN` environment variable or have an `.env.sentry-build-plugin` file in the working directory when +building your project. + +We recommend you add the auth token to your CI/CD environment as an environment variable. + +Learn more about configuring the plugin in our +[Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin). + + + +```bash {filename:.env.sentry-build-plugin} +SENTRY_ORG="___ORG_SLUG___" +SENTRY_PROJECT="___PROJECT_SLUG___" +SENTRY_AUTH_TOKEN="___ORG_AUTH_TOKEN___" +``` + +Add the plugin to your `app.config.ts`. + +```TypeScript {filename:app.config.ts} +// app.config.ts +import { defineConfig } from '@solidjs/start/config'; +import { sentrySolidStartVite } from '@sentry/solidstart'; + +export default defineConfig({ + // ... + + vite: { + plugins: [ + sentrySolidStartVite({ + org: process.env.SENTRY_ORG, + project: process.env.SENTRY_PROJECT, + authToken: process.env.SENTRY_AUTH_TOKEN, + }), + ], + }, + // ... +}); +``` + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```javascript + +``` + +This snippet adds a button that throws an error in a Solid component. + + + +Learn more about manually capturing an error or message in our Usage documentation. + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/svelte/config.yml b/docs/platforms/javascript/guides/svelte/config.yml deleted file mode 100644 index ff16cb57b26de..0000000000000 --- a/docs/platforms/javascript/guides/svelte/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Svelte -sdk: sentry.javascript.svelte -categories: - - javascript - - browser diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx new file mode 100644 index 0000000000000..dde83defb60fa --- /dev/null +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -0,0 +1,113 @@ +--- +title: Svelte +sdk: sentry.javascript.svelte +categories: + - javascript + - browser +--- + + + + Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as tracing for your client-side Svelte apps. + + + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/svelte --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/svelte +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/svelte +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +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. + +```javascript {filename: main.js} {"onboardingOptions": {"performance": "10, 13-20", "session-replay": "11, 23-29"}} +import "./app.css"; +import App from "./App.svelte"; + +import * as Sentry from "@sentry/svelte"; + +// Initialize the Sentry SDK here +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.replayIntegration(), + ], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture Replay for 10% of all sessions, + // plus 100% of sessions with an error + // Learn more at + // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); + +const app = new App({ + target: document.getElementById("app"), +}); + +export default app; +``` + +Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage). + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte} + +``` + +This snippet adds a button that throws an error in a Svelte component. + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/sveltekit/config.yml b/docs/platforms/javascript/guides/sveltekit/config.yml deleted file mode 100644 index 4d9752dce1b25..0000000000000 --- a/docs/platforms/javascript/guides/sveltekit/config.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: SvelteKit -sdk: sentry.javascript.sveltekit -categories: - - javascript - - browser - - server - - server-node diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx new file mode 100644 index 0000000000000..4a805b3072706 --- /dev/null +++ b/docs/platforms/javascript/guides/sveltekit/index.mdx @@ -0,0 +1,117 @@ +--- +title: SvelteKit +sdk: sentry.javascript.sveltekit +categories: + - javascript + - browser + - server + - server-node +--- + +Sentry's SvelteKit SDK enables automatic reporting of errors and performance data. + +## Compatibility + +The minimum supported SvelteKit version is `2.0.0`. +This SDK works best with **Vite 4.2** and newer. Older Vite versions might not generate source maps correctly. + + + + The SvelteKit SDK is designed to work out of the box with the following SvelteKit adapters: + + - [Adapter-auto](https://kit.svelte.dev/docs/adapter-auto) - for Vercel; other platforms might work but we don't guarantee compatibility at this time. + - [Adapter-vercel](https://kit.svelte.dev/docs/adapter-vercel) - only for Node (Lambda) runtimes, not yet Vercel's edge runtime. + - [Adapter-cloudflare](https://kit.svelte.dev/docs/adapter-cloudflare) - supported but requires [additional Setup](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/). + - [Adapter-node](https://kit.svelte.dev/docs/adapter-node). + + Other adapters may work but aren't currently supported. + We're looking into extending first-class support to [more adapters](https://kit.svelte.dev/docs/adapters) in the future. + + The SvelteKit SDK does not yet work with all non-node server runtimes, such as Vercel's edge runtime. + + + + + +## Install + +Sentry captures data by using an SDK within your application’s runtime. + +We recommend installing the SDK by running our installation wizard in the root directory of your project: + +```bash +npx @sentry/wizard@latest -i sveltekit +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create or update SvelteKit files with the default Sentry configuration: + - `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) + - `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins. +- create a `.sentryclirc` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) +- add an example page to your app to verify your Sentry setup + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + + If the setup through the wizard doesn't work for you, you can also set up the SDK manually. + + + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + +To complete your configuration, add options to your `Sentry.init()` calls. +Here you can also set context data - data about the user, for example, or tags, or even arbitrary data - which will be added to every event sent to Sentry. + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Add a button to a frontend component that throws an error: + +```javascript {filename:src/routes/sentry/+page.svelte} {3} + +``` + +Or throw an error in one of your `load` functions: + +```javascript {filename:src/routes/sentry/+page.js} {2} +export const load = () => { + throw new Error("Sentry Load Error"); +}; +``` + +Or throw an error in an API route: + +```javascript {filename:src/routes/sentry/+server.js} {2} +export const GET = () => { + throw new Error("Sentry API Error"); +}; +``` + +The possibilities are endless! + + + + Errors triggered from within Browser DevTools are sandboxed and will not trigger error monitoring. Keep this in mind when verifying your Sentry SDK installation. + + + + + + Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/vue/config.yml b/docs/platforms/javascript/guides/vue/config.yml deleted file mode 100644 index 1f09d3ee21f11..0000000000000 --- a/docs/platforms/javascript/guides/vue/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Vue -sdk: sentry.javascript.vue -categories: - - javascript - - browser diff --git a/platform-includes/getting-started-config/javascript.vue.mdx b/docs/platforms/javascript/guides/vue/index.mdx similarity index 63% rename from platform-includes/getting-started-config/javascript.vue.mdx rename to docs/platforms/javascript/guides/vue/index.mdx index e36df7e4a70fd..9a436d56607a6 100644 --- a/platform-includes/getting-started-config/javascript.vue.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -1,8 +1,46 @@ +--- +title: Vue +sdk: sentry.javascript.vue +categories: + - javascript + - browser +--- + + + +## Features + +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + +## Install + + + +Sentry captures data by using an SDK within your application’s runtime. + +```bash {tabTitle:npm} +npm install @sentry/vue --save +``` + +```bash {tabTitle:yarn} +yarn add @sentry/vue +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/vue +``` + +## Configure + +Configuration should happen as early as possible in your application's lifecycle. + To initialize Sentry in your Vue application, add the following code snippet to your `main.js`: ### Vue 3 -```javascript {filename:main.js} {"onboardingOptions": {"performance": "16, 19-26", "session-replay": "17, 27-31"}} +```javascript {filename:main.js} {"onboardingOptions": {"performance": "16, 19-25", "session-replay": "17, 29-35"}} import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; @@ -46,7 +84,7 @@ app.mount("#app"); ### Vue 2 -```javascript {filename:main.js} {"onboardingOptions": {"performance": "15, 18-25", "session-replay": "16, 26-30"}} +```javascript {filename:main.js} {"onboardingOptions": {"performance": "15, 18-24", "session-replay": "16, 28-34"}} import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; @@ -109,3 +147,34 @@ To manually add the integration for late-defined Vue applications check out the ### Pinia Plugin Sentry Vue SDK provides a Pinia plugin to capture Pinia action and state data. Learn more about the [Pinia Plugin](./features/pinia) and its options. + + + +## Verify + +This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. + +Add a button to your page that throws an error: + +```javascript {filename:App.vue} +// ... + +// ... + +export default { + // ... + methods: { + throwError() { + throw new Error('Sentry Error'); + } + } +}; +``` + + + +Learn more about manually capturing an error or message in our Usage documentation. + + + +To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. diff --git a/docs/platforms/javascript/guides/wasm/config.yml b/docs/platforms/javascript/guides/wasm/config.yml deleted file mode 100644 index d9fd3fe031ae3..0000000000000 --- a/docs/platforms/javascript/guides/wasm/config.yml +++ /dev/null @@ -1,5 +0,0 @@ -title: Wasm -sdk: sentry.javascript.wasm -categories: - - javascript - - browser diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 8cba449105dc0..81cb8702611cf 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -4,6 +4,7 @@ sdk: sentry.javascript.wasm description: "Learn how to use Sentry's Wasm integration and how it automatically reports errors and exceptions in your Wasm module." keywords: ["wasm", "webassembly"] categories: + - javascript - browser --- diff --git a/docs/platforms/php/index.mdx b/docs/platforms/php/index.mdx index 668573a3342b9..ae04978c34c1f 100644 --- a/docs/platforms/php/index.mdx +++ b/docs/platforms/php/index.mdx @@ -18,22 +18,7 @@ categories:

Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.

- + ## Install diff --git a/platform-includes/getting-started-config/dotnet.xamarin.mdx b/platform-includes/getting-started-config/dotnet.xamarin.mdx deleted file mode 100644 index 94a247a0bc472..0000000000000 --- a/platform-includes/getting-started-config/dotnet.xamarin.mdx +++ /dev/null @@ -1,20 +0,0 @@ -You should initialize the SDK as early as possible, for an example, the start of OnCreate -on MainActivity for Android, and, the top of FinishedLaunching on AppDelegate for iOS). - - -```csharp -SentryXamarin.Init(options => -{ - options.AddXamarinFormsIntegration(); - // Tells which project in Sentry to send events to: - options.Dsn = "___PUBLIC_DSN___"; - // When configuring for the first time, to see what the SDK is doing: - options.Debug = true; - // Set TracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - options.TracesSampleRate = 1.0; -}); -// App code - -``` diff --git a/platform-includes/getting-started-config/javascript.angular.mdx b/platform-includes/getting-started-config/javascript.angular.mdx index b03e201b09de2..6b93e8d1871d1 100644 --- a/platform-includes/getting-started-config/javascript.angular.mdx +++ b/platform-includes/getting-started-config/javascript.angular.mdx @@ -1,6 +1,6 @@ Once this is done, Sentry's Angular SDK captures all unhandled exceptions and transactions. -```typescript {tabTitle: App Config} {filename: main.ts} {5-31} {"onboardingOptions": {"performance": "10-13, 18-25", "session-replay": "14-16, 26-30"}} +```typescript {tabTitle: App Config} {filename: main.ts} {5-31} {"onboardingOptions": {"performance": "10-13, 19-25", "session-replay": "14-16, 28-34"}} import { bootstrapApplication } from "@angular/platform-browser"; import { appConfig } from "./app/app.config"; import { AppComponent } from "./app/app.component"; diff --git a/platform-includes/getting-started-config/javascript.astro.mdx b/platform-includes/getting-started-config/javascript.astro.mdx deleted file mode 100644 index 31d341da57706..0000000000000 --- a/platform-includes/getting-started-config/javascript.astro.mdx +++ /dev/null @@ -1,75 +0,0 @@ -To set up the Sentry SDK, register the Sentry integration and initialize the SDK for client and server in the root directory of your project: - -### Astro Integration Setup - - -```javascript {filename:astro.config.mjs} -import { defineConfig } from "astro/config"; -import sentry from "@sentry/astro"; - -export default defineConfig({ - integrations: [ - sentry({ - sourceMapsUploadOptions: { - project: "___PROJECT_SLUG___", - authToken: process.env.SENTRY_AUTH_TOKEN, - }, - }), - ], -}); -``` - - - Passing runtime-specific configuration options (`dsn`, `release`, `environment`, `sampleRate`, `tracesSampleRate`, `replaysSessionSampleRate`, `replaysOnErrorSampleRate`) to the Sentry integration will be deprecated in future versions. - We recommend passing your configuration directly to the respective `Sentry.init()` calls in `sentry.client.config.js` and `sentry.server.config.js` instead. - - -### Client-Side Setup - -```javascript {filename:sentry.client.config.js} {"onboardingOptions": {"performance": "7,11-13", "session-replay": "8,14-21"}} -import * as Sentry from "@sentry/astro"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - integrations: [ - Sentry.browserTracingIntegration(), - Sentry.replayIntegration(), - ], - - // Define how likely traces are sampled. Adjust this value in production, - // or use tracesSampler for greater control. - tracesSampleRate: 1.0, - - // This sets the sample rate to be 10%. You may want this to be 100% while - // in development and sample at a lower rate in production - replaysSessionSampleRate: 0.1, - - // If the entire session is not sampled, use the below sample rate to sample - // sessions when an error occurs. - replaysOnErrorSampleRate: 1.0, -}); -``` - -### Server-side Setup - -```javascript {filename:sentry.server.config.js} {"onboardingOptions": {"performance": "10-13", "profiling": "2,6-9,14-17"}} -import * as Sentry from "@sentry/astro"; -import { nodeProfilingIntegration } from '@sentry/profiling-node'; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - // Add our Profiling integration - nodeProfilingIntegration(), - ], - - // Define how likely traces are sampled. Adjust this value in production, - // or use tracesSampler for greater control. - tracesSampleRate: 1.0, - - // Set sampling rate for profiling - // This is relative to tracesSampleRate - profilesSampleRate: 1.0 -}); -``` diff --git a/platform-includes/getting-started-config/javascript.azure-functions.mdx b/platform-includes/getting-started-config/javascript.azure-functions.mdx deleted file mode 100644 index 3e92b6467f7a3..0000000000000 --- a/platform-includes/getting-started-config/javascript.azure-functions.mdx +++ /dev/null @@ -1,38 +0,0 @@ -```javascript {tabTitle:async} {"onboardingOptions": {"performance": "9-13", "profiling": "2, 6-8, 14-16"}} -const Sentry = require("@sentry/node"); -const { nodeProfilingIntegration } = require("@sentry/profiling-node"); - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - nodeProfilingIntegration(), - ], - - // Add Performance Monitoring by setting tracesSampleRate - // Set tracesSampleRate to 1.0 to capture 100% of transactions - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Set sampling rate for profiling - this is relative to tracesSampleRate - profilesSampleRate: 1.0, -}); - -module.exports = async function (context, req) { - try { - await notExistFunction(); - } catch (e) { - Sentry.withScope((scope) => { - scope.setSDKProcessingMetadata({ request: req }); - Sentry.captureException(e); - }); - await Sentry.flush(2000); - } - - context.res = { - status: 200, - body: "Hello from Azure Cloud Function!", - }; -}; -``` diff --git a/platform-includes/getting-started-config/javascript.bun.mdx b/platform-includes/getting-started-config/javascript.bun.mdx deleted file mode 100644 index 938c437064c90..0000000000000 --- a/platform-includes/getting-started-config/javascript.bun.mdx +++ /dev/null @@ -1,25 +0,0 @@ -Sentry should be initialized as early in your app as possible. It is essential that you call `Sentry.init` before you require any other modules in your application—otherwise, auto-instrumentation of these modules will _not_ work. - -Once this is done, Sentry's Bun SDK captures unhandled exceptions as well as tracing data for your application. - -You need to create a file named `instrument.js` that imports and initializes Sentry: - -```javascript {filename: instrument.js} {"onboardingOptions": {"performance": "7-11"}} -import * as Sentry from "@sentry/bun"; - -// Ensure to call this before importing any other modules! -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // Add Performance Monitoring by setting tracesSampleRate - // Set tracesSampleRate to 1.0 to capture 100% of transactions - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, -}); -``` - -Once you set a `tracesSampleRate`, performance instrumentation is automatically enabled for you. See Automatic Instrumentation to learn about all the things that the SDK automatically instruments for you. - -You can also manually capture performance data - see Custom Instrumentation for details. diff --git a/platform-includes/getting-started-config/javascript.cloudflare.mdx b/platform-includes/getting-started-config/javascript.cloudflare.mdx deleted file mode 100644 index e9de333b3cb50..0000000000000 --- a/platform-includes/getting-started-config/javascript.cloudflare.mdx +++ /dev/null @@ -1,70 +0,0 @@ -To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`/`wrangler.json`. This is because the SDK -needs access to the `AsyncLocalStorage` API to work correctly. - - -```toml {tabTitle:Toml} {filename:wrangler.toml} -compatibility_flags = ["nodejs_compat"] -# compatibility_flags = ["nodejs_als"] -``` - -```json {tabTitle:JSON} {filename:wrangler.json} -{ - "compatibility_flags": [ - "nodejs_compat", - // "nodejs_als" - ] -} -``` - -Then you can install the SDK and add it to your project: - -You can either setup up the SDK for [Cloudflare Pages](#setup-cloudflare-pages) or -[Cloudflare Workers](#setup-cloudflare-workers). - -### Setup (Cloudflare Pages) - -To use this SDK, add the `sentryPagesPlugin` as -[middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/). - -We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire -app. - -```javascript {filename:functions/_middleware.js} -import * as Sentry from "@sentry/cloudflare"; - -export const onRequest = [ - // Make sure Sentry is the first middleware - Sentry.sentryPagesPlugin((context) => ({ - dsn: "___PUBLIC_DSN___", - // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - })), - // Add more middlewares here -]; -``` - -### Setup (Cloudflare Workers) - -To use this SDK, wrap your handler with the `withSentry` function. This will initialize the SDK and hook into the -environment. Note that you can turn off almost all side effects using the respective options. - -```typescript {filename:index.ts} -import * as Sentry from "@sentry/cloudflare"; - -export default Sentry.withSentry( - env => ({ - dsn: "___PUBLIC_DSN___", - // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - }), - { - async fetch(request, env, ctx) { - return new Response("Hello World!"); - }, - } satisfies ExportedHandler, -); -``` diff --git a/platform-includes/getting-started-config/javascript.deno.mdx b/platform-includes/getting-started-config/javascript.deno.mdx deleted file mode 100644 index 7770012398c72..0000000000000 --- a/platform-includes/getting-started-config/javascript.deno.mdx +++ /dev/null @@ -1,43 +0,0 @@ - -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). - -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - - - -```javascript {tabTitle: Deno} {"onboardingOptions": {"performance": "5-9" }} -import * as Sentry from "npm:@sentry/deno"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, -}); -``` - -```javascript {tabTitle:npm} {"onboardingOptions": {"performance": "5-9" }} -import * as Sentry from "npm:@sentry/deno"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, -}); -``` - -To ensure the SDK can send events, you should enable network access for your -ingestion domain: - -```bash -deno run --allow-net=___ORG_INGEST_DOMAIN___ index.ts -``` diff --git a/platform-includes/getting-started-config/javascript.electron.mdx b/platform-includes/getting-started-config/javascript.electron.mdx deleted file mode 100644 index d1a6e4c08ce64..0000000000000 --- a/platform-includes/getting-started-config/javascript.electron.mdx +++ /dev/null @@ -1,39 +0,0 @@ -You should `init` the SDK in the `main` process and every `renderer` process you spawn. - - -In the Electron `main` process: - -```javascript -import * as Sentry from "@sentry/electron/main"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", -}); -``` - -In the Electron `renderer` process: - -```javascript {"onboardingOptions": {"performance": "5, 8-12", "session-replay": "6, 13-17"}} -import * as Sentry from "@sentry/electron/renderer"; - -Sentry.init({ - integrations: [ - Sentry.browserTracingIntegration(), - Sentry.replayIntegration(), - ], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Capture Replay for 10% of all sessions, - // plus for 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, -}); -``` diff --git a/platform-includes/getting-started-config/javascript.ember.mdx b/platform-includes/getting-started-config/javascript.ember.mdx deleted file mode 100644 index 299f6c20e4699..0000000000000 --- a/platform-includes/getting-started-config/javascript.ember.mdx +++ /dev/null @@ -1,42 +0,0 @@ -This snippet includes automatic instrumentation to monitor the performance of your application, which registers and configures the Tracing integration, including custom [Ember instrumentation](./configuration/ember-options/). - - -```javascript {"onboardingOptions": {"performance": "11-15", "session-replay": "10, 16-20"}} -import Application from "@ember/application"; -import Resolver from "ember-resolver"; -import loadInitializers from "ember-load-initializers"; -import config from "./config/environment"; - -import * as Sentry from "@sentry/ember"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [Sentry.replayIntegration()], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Capture Replay for 10% of all sessions, - // plus for 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, -}); - -export default class App extends Application { - modulePrefix = config.modulePrefix; - podModulePrefix = config.podModulePrefix; - Resolver = Resolver; -} -``` - - - -This SDK uses Ember configuration conventions to manage its automatic instrumentation and other Sentry options. This additional configuration can be found under Ember options. - - diff --git a/platform-includes/getting-started-config/javascript.nuxt.mdx b/platform-includes/getting-started-config/javascript.nuxt.mdx deleted file mode 100644 index eac0be07a843f..0000000000000 --- a/platform-includes/getting-started-config/javascript.nuxt.mdx +++ /dev/null @@ -1,2 +0,0 @@ -To complete your configuration, add options to your `Sentry.init()` calls. -Here, you'll also be able to set context data, which includes data about the user, tags, or even arbitrary data, all of which will be added to every event sent to Sentry. diff --git a/platform-includes/getting-started-config/javascript.react-router.mdx b/platform-includes/getting-started-config/javascript.react-router.mdx deleted file mode 100644 index 32978523a2a39..0000000000000 --- a/platform-includes/getting-started-config/javascript.react-router.mdx +++ /dev/null @@ -1,131 +0,0 @@ -### Expose Hooks -React Router exposes two hooks in your `app` folder (`entry.client.tsx` and `entry.server.tsx`). -If you do not see these two files, expose them with the following command: - -```bash -npx react-router reveal -``` - -### Client-Side Setup - -Initialize the Sentry React SDK in your `entry.client.tsx` file: - -```tsx {filename: entry.client.tsx} {"onboardingOptions": {"performance": "9, 12-16", "session-replay": "10, 17-21"}} -import * as Sentry from "@sentry/react-router"; -import { startTransition, StrictMode } from "react"; -import { hydrateRoot } from "react-dom/client"; -import { HydratedRouter } from "react-router/dom"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - Sentry.browserTracingIntegration(), - Sentry.replayIntegration(), - ], - - tracesSampleRate: 1.0, // Capture 100% of the transactions - - // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled - tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], - - // Capture Replay for 10% of all sessions, - // plus 100% of sessions with an error - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, -}); - -startTransition(() => { - hydrateRoot( - document, - - - - ); -}); -``` - -Now, update your `app/root.tsx` file to report any unhandled errors from your error boundary: - -```tsx {diff} {filename: app/root.tsx} -import * as Sentry from "@sentry/react-router"; - -export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { - let message = "Oops!"; - let details = "An unexpected error occurred."; - let stack: string | undefined; - - if (isRouteErrorResponse(error)) { - message = error.status === 404 ? "404" : "Error"; - details = - error.status === 404 - ? "The requested page could not be found." - : error.statusText || details; - } else if (error && error instanceof Error) { - // you only want to capture non 404-errors that reach the boundary -+ Sentry.captureException(error); - if (import.meta.env.DEV) { - details = error.message; - stack = error.stack; - } - } - - return ( -
-

{message}

-

{details}

- {stack && ( - 
-          {stack}
-
- )} -
- ); -} -// ... -``` - -### Server-Side Setup - -Create an `instrument.server.mjs` file in the root of your app: - -```js {filename: instrument.server.mjs} {"onboardingOptions": {"performance": "7", "profiling": "2, 6, 8"}} -import * as Sentry from "@sentry/react-router"; -import { nodeProfilingIntegration } from '@sentry/profiling-node'; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [nodeProfilingIntegration()], - tracesSampleRate: 1.0, // Capture 100% of the transactions - profilesSampleRate: 1.0, // profile every transaction -}); -``` - -In your `entry.server.tsx` file, export the `handleError` function: - -```tsx {diff} {filename: entry.server.tsx} -import * as Sentry from "@sentry/node"; -import { type HandleErrorFunction } from "react-router"; - -export const handleError: HandleErrorFunction = (error, { request }) => { - // React Router may abort some interrupted requests, report those - if (!request.signal.aborted) { -+ Sentry.captureException(error); - - // make sure to still log the error so you can see it - console.error(error); - } -}; -// ... rest of your server entry -``` - -### Update Scripts - -Since React Router is running in ESM mode, you need to use the `--import` command line options to load our server-side instrumentation module before the application starts. -Update the `start` and `dev` script to include the instrumentation file: - -```json {filename: package.json} -"scripts": { - "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev", - "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js", -} -``` diff --git a/platform-includes/getting-started-config/javascript.remix.mdx b/platform-includes/getting-started-config/javascript.remix.mdx deleted file mode 100644 index eac0be07a843f..0000000000000 --- a/platform-includes/getting-started-config/javascript.remix.mdx +++ /dev/null @@ -1,2 +0,0 @@ -To complete your configuration, add options to your `Sentry.init()` calls. -Here, you'll also be able to set context data, which includes data about the user, tags, or even arbitrary data, all of which will be added to every event sent to Sentry. diff --git a/platform-includes/getting-started-config/javascript.solid.mdx b/platform-includes/getting-started-config/javascript.solid.mdx deleted file mode 100644 index 0f25675adbf56..0000000000000 --- a/platform-includes/getting-started-config/javascript.solid.mdx +++ /dev/null @@ -1,50 +0,0 @@ -To use the SDK, initialize it in your Solid entry point before bootstrapping your app. In a typical Solid project, that is your `index.jsx` file. - - - We currently support Solid 1.8.4 and up. - - - -```javascript {filename: index.jsx} {"onboardingOptions": {"performance": "2, 12, 15-22", "session-replay": "13, 23-27"}} -import * as Sentry from "@sentry/solid"; -import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter"; -import { render } from "solid-js/web"; -import { DEV } from "solid-js"; -import App from "./app"; - -// this will only initialize your Sentry client in production builds. -if (!DEV) { - Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - solidRouterBrowserTracingIntegration(), - Sentry.replayIntegration(), - ], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled - tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - - // Capture Replay for 10% of all sessions, - // plus 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - }); -} - -const app = document.getElementById("app"); - -if (!app) throw new Error("No #app element found in the DOM."); - -render(() => , app); -``` - -Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/solid/usage). diff --git a/platform-includes/getting-started-config/javascript.svelte.mdx b/platform-includes/getting-started-config/javascript.svelte.mdx deleted file mode 100644 index 786c2aa5b7782..0000000000000 --- a/platform-includes/getting-started-config/javascript.svelte.mdx +++ /dev/null @@ -1,43 +0,0 @@ -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. - - -```javascript {filename: main.js} {"onboardingOptions": {"performance": "10, 13-20", "session-replay": "11, 23-29"}} -import "./app.css"; -import App from "./App.svelte"; - -import * as Sentry from "@sentry/svelte"; - -// Initialize the Sentry SDK here -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - Sentry.browserTracingIntegration(), - Sentry.replayIntegration(), - ], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled - tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - - // Capture Replay for 10% of all sessions, - // plus 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, -}); - -const app = new App({ - target: document.getElementById("app"), -}); - -export default app; -``` - -Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage). diff --git a/platform-includes/getting-started-config/javascript.sveltekit.mdx b/platform-includes/getting-started-config/javascript.sveltekit.mdx deleted file mode 100644 index ace48697168cf..0000000000000 --- a/platform-includes/getting-started-config/javascript.sveltekit.mdx +++ /dev/null @@ -1,2 +0,0 @@ -To complete your configuration, add options to your `Sentry.init()` calls. -Here you can also set context data - data about the user, for example, or tags, or even arbitrary data - which will be added to every event sent to Sentry. diff --git a/platform-includes/getting-started-install/javascript.astro.mdx b/platform-includes/getting-started-install/javascript.astro.mdx deleted file mode 100644 index a6854f5049511..0000000000000 --- a/platform-includes/getting-started-install/javascript.astro.mdx +++ /dev/null @@ -1,38 +0,0 @@ - - -Install the SDK by using the `astro` CLI: - -```bash {tabTitle:npm} -npx astro add @sentry/astro -``` - -```bash {tabTitle:yarn} -yarn astro add @sentry/astro -``` - -```bash {tabTitle:pnpm} -pnpm astro add @sentry/astro -``` - -The `astro` CLI installs the SDK package and adds the Sentry integration to your `astro.config.mjs` file. - - - - -```bash {tabTitle:npm} -npm install @sentry/profiling-node -``` - -```bash {tabTitle:yarn} -yarn add @sentry/profiling-node -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/profiling-node -``` - - - -To finish the setup, configure the Sentry integration. \ No newline at end of file diff --git a/platform-includes/getting-started-install/javascript.bun.mdx b/platform-includes/getting-started-install/javascript.bun.mdx deleted file mode 100644 index 9cb40312f4cc4..0000000000000 --- a/platform-includes/getting-started-install/javascript.bun.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```bash {tabTitle:Bun} -bun add @sentry/bun -``` diff --git a/platform-includes/getting-started-install/javascript.capacitor.mdx b/platform-includes/getting-started-install/javascript.capacitor.mdx deleted file mode 100644 index 2d5a92aa3c6c1..0000000000000 --- a/platform-includes/getting-started-install/javascript.capacitor.mdx +++ /dev/null @@ -1,63 +0,0 @@ -Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using: - -```bash {tabTitle:Angular} -# npm -npm install @sentry/capacitor @sentry/angular --save - -# yarn -yarn add @sentry/capacitor @sentry/angular - -# pnpm -pnpm add @sentry/capacitor @sentry/angular -``` - -```bash {tabTitle:React} -# npm -npm install @sentry/capacitor @sentry/react --save - -# yarn -yarn add @sentry/capacitor @sentry/react - -# pnpm -pnpm add @sentry/capacitor @sentry/react -``` - -```bash {tabTitle:Vue} -# npm -npm install @sentry/capacitor @sentry/vue --save - -# yarn -yarn add @sentry/capacitor @sentry/vue - -# pnpm -pnpm add @sentry/capacitor @sentry/vue -``` - -```bash {tabTitle:Other} -# npm -npm install @sentry/capacitor @sentry/browser --save - -# yarn -yarn add @sentry/capacitor @sentry/browser - -# pnpm -pnpm add @sentry/capacitor @sentry/browser -``` - -### Angular Version Compatibility - -In its current beta version, the Sentry Capacitor SDK only supports Angular 14 and newer. - -If you're using an older version of Angular, you also need to use an older version of the SDK. See the table below for compatibility guidance: - -| Angular version | Recommended Sentry SDK | -| --------------- | ------------------------------------------------------------------------------------------------------ | -| 14 and newer | `@sentry/capacitor` `@sentry/angular` | -| 12 or 13 | `@sentry/capacitor^0` `@sentry/angular-ivy@^7` * | -| 10 or 11 | `@sentry/capacitor^0` `@sentry/angular@^7` * | - -\* These versions of the SDK are no longer maintained or tested. Version 0 might still receive bug fixes but we don't guarantee support. - -### React and Vue Version Compatibility - -Both Frameworks are fully compatible with the current and beta versions of Sentry Capacitor. diff --git a/platform-includes/getting-started-install/javascript.cloudflare.mdx b/platform-includes/getting-started-install/javascript.cloudflare.mdx deleted file mode 100644 index d5cf6776c8550..0000000000000 --- a/platform-includes/getting-started-install/javascript.cloudflare.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/cloudflare --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/cloudflare -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/cloudflare -``` diff --git a/platform-includes/getting-started-install/javascript.electron.mdx b/platform-includes/getting-started-install/javascript.electron.mdx deleted file mode 100644 index 96506b67893eb..0000000000000 --- a/platform-includes/getting-started-install/javascript.electron.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/electron --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/electron -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/electron -``` diff --git a/platform-includes/getting-started-install/javascript.nextjs.mdx b/platform-includes/getting-started-install/javascript.nextjs.mdx deleted file mode 100644 index d726244e83ca3..0000000000000 --- a/platform-includes/getting-started-install/javascript.nextjs.mdx +++ /dev/null @@ -1,35 +0,0 @@ -To install Sentry using the installation wizard, run the following command within your project: - -```bash -npx @sentry/wizard@latest -i nextjs -``` - -The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. - - - -- [**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. - - - -This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. - - - -- Creates config files with the default `Sentry.init()` calls for all runtimes (Node.js, Browser, and Edge) -- Adds a Next.js instrumentation hook to your project (`instrumentation.ts`) -- Creates or updates your Next.js config with the default Sentry settings -- Creates error handling components (`global-error.(jsx|tsx)` and `_error.jsx` for the Pages Router) if they don't already exist -- Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`) -- Adds an example page and route to your application to help verify your Sentry setup - - diff --git a/platform-includes/getting-started-install/javascript.nuxt.mdx b/platform-includes/getting-started-install/javascript.nuxt.mdx deleted file mode 100644 index 08cf6b3740c76..0000000000000 --- a/platform-includes/getting-started-install/javascript.nuxt.mdx +++ /dev/null @@ -1,21 +0,0 @@ -We recommend installing the SDK by running our installation wizard in the root directory of your project: - -```bash -npx @sentry/wizard@latest -i nuxt -``` - -The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: - -- create or update Nuxt files with the default Sentry configuration: - - `sentry.(client|server).config.ts` to initialize the SDK - - `nuxt.config.ts` to add build options to add source maps upload and auto-instrumentation via Vite plugins. -- create a `.env.sentry-build-plugin` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) -- add an example page to your frontend app and your server to verify your Sentry setup - -After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. - -You can also manually capture errors. - - - If the setup through the wizard doesn't work for you, you can also set up the SDK manually. - diff --git a/platform-includes/getting-started-install/javascript.react-router.mdx b/platform-includes/getting-started-install/javascript.react-router.mdx deleted file mode 100644 index 78f4063c491c4..0000000000000 --- a/platform-includes/getting-started-install/javascript.react-router.mdx +++ /dev/null @@ -1,42 +0,0 @@ - - - - -```bash {tabTitle:npm} -npm install @sentry/react-router @sentry/profiling-node -``` - -```bash {tabTitle:yarn} -yarn add @sentry/react-router @sentry/profiling-node -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/react-router @sentry/profiling-node -``` - - - - - ```bash {tabTitle:npm} - npm install @sentry/react-router - ``` - - ```bash {tabTitle:yarn} - yarn add @sentry/react-router - ``` - - ```bash {tabTitle:pnpm} - pnpm add @sentry/react-router - ``` - - diff --git a/platform-includes/getting-started-install/javascript.react.mdx b/platform-includes/getting-started-install/javascript.react.mdx deleted file mode 100644 index 8b5b6ad13ea64..0000000000000 --- a/platform-includes/getting-started-install/javascript.react.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/react --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/react -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/react -``` diff --git a/platform-includes/getting-started-install/javascript.remix.mdx b/platform-includes/getting-started-install/javascript.remix.mdx deleted file mode 100644 index 9174e7f78015d..0000000000000 --- a/platform-includes/getting-started-install/javascript.remix.mdx +++ /dev/null @@ -1,24 +0,0 @@ -We recommend installing the SDK through our installation wizard: - -```bash -npx @sentry/wizard@latest -i remix -``` - -The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: - -- create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). -- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`. -- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`). -- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application. -- add an example page to your app to verify your Sentry setup - -If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features. - -After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. -You can also manually capture errors. - - - -If the wizard setup isn't working for you, you can set up the SDK manually. - - diff --git a/platform-includes/getting-started-install/javascript.solid.mdx b/platform-includes/getting-started-install/javascript.solid.mdx deleted file mode 100644 index 2cdea6c218c42..0000000000000 --- a/platform-includes/getting-started-install/javascript.solid.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/solid --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/solid -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/solid -``` diff --git a/platform-includes/getting-started-install/javascript.solidstart.mdx b/platform-includes/getting-started-install/javascript.solidstart.mdx deleted file mode 100644 index da81645c3c07b..0000000000000 --- a/platform-includes/getting-started-install/javascript.solidstart.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/solidstart --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/solidstart -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/solidstart -``` diff --git a/platform-includes/getting-started-install/javascript.svelte.mdx b/platform-includes/getting-started-install/javascript.svelte.mdx deleted file mode 100644 index 94c9bb8ee9efb..0000000000000 --- a/platform-includes/getting-started-install/javascript.svelte.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/svelte --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/svelte -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/svelte -``` diff --git a/platform-includes/getting-started-install/javascript.sveltekit.mdx b/platform-includes/getting-started-install/javascript.sveltekit.mdx deleted file mode 100644 index 2828ed8a363ad..0000000000000 --- a/platform-includes/getting-started-install/javascript.sveltekit.mdx +++ /dev/null @@ -1,22 +0,0 @@ -We recommend installing the SDK by running our installation wizard in the root directory of your project: - -```bash -npx @sentry/wizard@latest -i sveltekit -``` - -The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: - -- create or update SvelteKit files with the default Sentry configuration: - - `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) - - `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins. -- create a `.sentryclirc` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) -- add an example page to your app to verify your Sentry setup - -After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. -You can also manually capture errors. - - - -If the setup through the wizard doesn't work for you, you can also set up the SDK manually. - - diff --git a/platform-includes/getting-started-install/javascript.vue.mdx b/platform-includes/getting-started-install/javascript.vue.mdx deleted file mode 100644 index 8ff1b45e8a6c4..0000000000000 --- a/platform-includes/getting-started-install/javascript.vue.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```bash {tabTitle:npm} -npm install @sentry/vue --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/vue -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/vue -``` diff --git a/platform-includes/getting-started-next-steps/javascript.astro.mdx b/platform-includes/getting-started-next-steps/javascript.astro.mdx deleted file mode 100644 index 1346353734d0e..0000000000000 --- a/platform-includes/getting-started-next-steps/javascript.astro.mdx +++ /dev/null @@ -1,89 +0,0 @@ -## Advanced Configuration Options - -### Changing Config Files Location - -Sentry automatically detects configuration files named `sentry.(client|server).config.js` in the root of your project. You can rename these files or move them to a custom folder within your project. -To change their location or names, specify the paths in the Sentry Astro integration options in your `astro.config.mjs`: - -```javascript {filename:astro.config.mjs} -export default defineConfig({ - // Other Astro project options - integrations: [ - sentry({ - clientInitPath: ".config/sentryClientInit.js", - serverInitPath: ".config/sentryServerInit.js", - }), - ], -}); -``` - -### Server Instrumentation - - - -Auto instrumentation only works for Astro 3.5.2 or newer. If you're using an older version, you need to [manually add the Sentry middleware](#manually-add-server-instrumentation) instead. - - - -In SSR or hybrid mode configured Astro apps, the Sentry Astro integration will automatically add an [Astro middleware](https://docs.astro.build/en/guides/middleware/) request handler to your server code. This middleware enhances the data collected by Sentry on the server side by: - -- Collecting performance spans for incoming requests -- Enabeling distributed tracing between client and server -- Enhancing captured errors with additional information - -### Manually Add Server Instrumentation - -For Astro versions below 3.5.2, you need to manually add the Sentry middleware to your `src/middleware.js` file: - -```javascript {filename:src/middleware.(js|ts)} -import * as Sentry from "@sentry/astro"; -import { sequence } from "astro:middleware"; - -export const onRequest = sequence( - Sentry.handleRequest() - // other middleware handlers -); -``` - -If you have multiple request handlers, make sure to add the Sentry middleware as the first handler in the sequence. - -### Customize Server Instrumentation - -Sentry's Astro middleware gives you control over what additional data should be added to the recorded request spans. - -To customize the server instrumentation, add the Sentry middleware to your `src/middleware.js` file: - -```javascript {filename:src/middleware.(js|ts)} -import * as Sentry from "@sentry/astro"; -import { sequence } from "astro:middleware"; - -export const onRequest = sequence( - Sentry.handleRequest({ - trackClientIp: true, // defaults to false - trackHeaders: true, // defaults to false - }) - // other middleware handlers -); -``` - -If you're using Astro 3.5.2 or newer, make sure to also disable auto instrumentation as shown below. - -### Disable Auto Server Instrumentation - -For Astro 3.5.2 or newer, you can disable the automatic server instrumentation by turning off the `requestHandler` auto instrumentation option: - -```javascript {filename:astro.config.mjs} -import { defineConfig } from "astro/config"; -import sentry from "@sentry/astro"; - -export default defineConfig({ - integrations: [ - sentry({ - autoInstrumentation: { - requestHandler: false, - }, - }), - ], - output: "server", -}); -``` diff --git a/platform-includes/getting-started-next-steps/javascript.nextjs.mdx b/platform-includes/getting-started-next-steps/javascript.nextjs.mdx deleted file mode 100644 index 294fe53720f9e..0000000000000 --- a/platform-includes/getting-started-next-steps/javascript.nextjs.mdx +++ /dev/null @@ -1,18 +0,0 @@ -## Next Steps - -At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project. - -Now's a good time to customize your setup and look into more advanced topics. -Our next recommended steps for you are: - -- Learn how to [manually capture errors](/platforms/javascript/guides/nextjs/usage/) -- Continue to [customize your configuration](/platforms/javascript/guides/nextjs/configuration/) -- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts -- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/) - - - -- If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/) -- [Get support](https://sentry.zendesk.com/hc/en-us/) - - diff --git a/platform-includes/getting-started-next-steps/javascript.nuxt.mdx b/platform-includes/getting-started-next-steps/javascript.nuxt.mdx deleted file mode 100644 index a7bc3938bc441..0000000000000 --- a/platform-includes/getting-started-next-steps/javascript.nuxt.mdx +++ /dev/null @@ -1,5 +0,0 @@ -## Next Steps - -- Track your Vue Components or your Pinia store by [adding support for client features](/platforms/javascript/guides/nuxt/features/) -- In case you experience any issues during setup or startup, check out Troubleshooting -or read through the different installation methods. diff --git a/platform-includes/getting-started-node/javascript.mdx b/platform-includes/getting-started-node/javascript.mdx index fe1d810d82226..208f39c8e7ca8 100644 --- a/platform-includes/getting-started-node/javascript.mdx +++ b/platform-includes/getting-started-node/javascript.mdx @@ -6,9 +6,7 @@ In addition to capturing errors, you can monitor interactions between multiple s Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - + Sentry captures data by using an SDK within your application’s runtime. diff --git a/platform-includes/getting-started-primer/javascript.astro.mdx b/platform-includes/getting-started-primer/javascript.astro.mdx deleted file mode 100644 index cb7ddaeb31f71..0000000000000 --- a/platform-includes/getting-started-primer/javascript.astro.mdx +++ /dev/null @@ -1,14 +0,0 @@ -Sentry's Astro SDK enables automatic reporting of errors and performance data in your Astro application. -Our Astro integration instruments both the client as well as the server side of your Astro application. -This page walks you through adding Sentry to your Astro project, configuring it, adding readable stack traces, and verifying your setup. - -## Prerequisites - -Before we get started, make sure you have the following: - -* You need a Sentry [account](https://sentry.io/signup/) and [project](/product/projects/) -* An Astro project that uses Astro `3.0.0` or newer. -* A Node runtime: - - This SDK currently only works on Node runtimes (e.g. Node adapter, Vercel with Lambda functions). - Non-Node runtimes, like Vercel's Edge runtime or Cloudflare Pages, are currently not supported. -* If you're using Astro's Netflify adapter (`@astrojs/netlify`), you need version `5.0.0` or newer. diff --git a/platform-includes/getting-started-primer/javascript.deno.mdx b/platform-includes/getting-started-primer/javascript.deno.mdx deleted file mode 100644 index 0fc818ac710c1..0000000000000 --- a/platform-includes/getting-started-primer/javascript.deno.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -The Deno SDK is currently in Beta. - - - -The minimum supported Deno version is 2. diff --git a/platform-includes/getting-started-primer/javascript.ember.mdx b/platform-includes/getting-started-primer/javascript.ember.mdx deleted file mode 100644 index a7101478fd275..0000000000000 --- a/platform-includes/getting-started-primer/javascript.ember.mdx +++ /dev/null @@ -1,7 +0,0 @@ - - -Sentry's Ember addon enables automatic reporting of errors, exceptions, and transactions. - - - -The minimum supported Ember.js version is `4.0.0`. diff --git a/platform-includes/getting-started-primer/javascript.nextjs.mdx b/platform-includes/getting-started-primer/javascript.nextjs.mdx deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/platform-includes/getting-started-primer/javascript.nuxt.mdx b/platform-includes/getting-started-primer/javascript.nuxt.mdx deleted file mode 100644 index ea4aff67c44ec..0000000000000 --- a/platform-includes/getting-started-primer/javascript.nuxt.mdx +++ /dev/null @@ -1,12 +0,0 @@ - - This SDK is currently in **beta**. Beta features are still in progress and may have bugs. Please reach out on - [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. - - - -Sentry's Nuxt SDK enables automatic reporting of errors and performance data. - -## Compatibility - -The Sentry Nuxt SDK supports Nuxt version `3.7.0` and above. For best results, we recommend -using Nuxt `3.14.0` or later, which includes updated dependencies critical to the SDK's functionality. diff --git a/platform-includes/getting-started-primer/javascript.react-router.mdx b/platform-includes/getting-started-primer/javascript.react-router.mdx deleted file mode 100644 index 501b086f8a87b..0000000000000 --- a/platform-includes/getting-started-primer/javascript.react-router.mdx +++ /dev/null @@ -1,12 +0,0 @@ - - -This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/) if you have any feedback or concerns. - - - - - -If you are using React Router in library mode, you can follow the instructions in the [React guide here](/platforms/javascript/guides/react/features/react-router/v7). - - - diff --git a/platform-includes/getting-started-primer/javascript.react.mdx b/platform-includes/getting-started-primer/javascript.react.mdx deleted file mode 100644 index 14c6bb447ba4b..0000000000000 --- a/platform-includes/getting-started-primer/javascript.react.mdx +++ /dev/null @@ -1,5 +0,0 @@ - - -Sentry's React SDK enables automatic reporting of errors and exceptions. The SDK is a wrapper around @sentry/browser, with added functionality related to React. All methods available in @sentry/browser can be imported from @sentry/react. - - diff --git a/platform-includes/getting-started-primer/javascript.remix.mdx b/platform-includes/getting-started-primer/javascript.remix.mdx deleted file mode 100644 index fb3c2e3135607..0000000000000 --- a/platform-includes/getting-started-primer/javascript.remix.mdx +++ /dev/null @@ -1,14 +0,0 @@ - - -Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well as the performance metrics for both client and server side operations. - - - -Sentry's Remix SDK relies on our [React SDK](/platforms/javascript/guides/react/) for the frontend and [Node SDK](/platforms/node) for the backend. That means all features available in those SDKs are also available in this SDK. -The minimum supported Remix version is `2.0.0`. - - - -Sentry's Remix SDK does not officially support adapters that use non-Node runtimes, such as Cloudflare Workers. - - diff --git a/platform-includes/getting-started-primer/javascript.svelte.mdx b/platform-includes/getting-started-primer/javascript.svelte.mdx deleted file mode 100644 index 13ed16c08444f..0000000000000 --- a/platform-includes/getting-started-primer/javascript.svelte.mdx +++ /dev/null @@ -1,5 +0,0 @@ - - -Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as tracing for your client-side Svelte apps. - - diff --git a/platform-includes/getting-started-primer/javascript.sveltekit.mdx b/platform-includes/getting-started-primer/javascript.sveltekit.mdx deleted file mode 100644 index a0338ad0ec388..0000000000000 --- a/platform-includes/getting-started-primer/javascript.sveltekit.mdx +++ /dev/null @@ -1,22 +0,0 @@ -Sentry's SvelteKit SDK enables automatic reporting of errors and performance data. - -## Compatibility - -The minimum supported SvelteKit version is `2.0.0`. -This SDK works best with **Vite 4.2** and newer. Older Vite versions might not generate source maps correctly. - - - -The SvelteKit SDK is designed to work out of the box with the following SvelteKit adapters: - -- [Adapter-auto](https://kit.svelte.dev/docs/adapter-auto) - for Vercel; other platforms might work but we don't guarantee compatibility at this time. -- [Adapter-vercel](https://kit.svelte.dev/docs/adapter-vercel) - only for Node (Lambda) runtimes, not yet Vercel's edge runtime. -- [Adapter-cloudflare](https://kit.svelte.dev/docs/adapter-cloudflare) - supported but requires [additional Setup](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/). -- [Adapter-node](https://kit.svelte.dev/docs/adapter-node). - -Other adapters may work but aren't currently supported. -We're looking into extending first-class support to [more adapters](https://kit.svelte.dev/docs/adapters) in the future. - -The SvelteKit SDK does not yet work with all non-node server runtimes, such as Vercel's edge runtime. - - diff --git a/platform-includes/getting-started-sourcemaps/javascript.astro.mdx b/platform-includes/getting-started-sourcemaps/javascript.astro.mdx deleted file mode 100644 index cfd28fce6c4ce..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.astro.mdx +++ /dev/null @@ -1,11 +0,0 @@ -## Add Readable Stack Traces to Errors - -To get readable stack traces in your production builds, set the `SENTRY_AUTH_TOKEN` environment variable in your build environment. You can also add the environment variable to a `.env.sentry-build-plugin` file in the root of your project. - - - -```bash {filename:.env.sentry-build-plugin} -SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ -``` - -This, in combination with your `sourceMapsUploadOptions` configuration, will upload source maps to Sentry every time you make a production build. diff --git a/platform-includes/getting-started-sourcemaps/javascript.cloudflare.mdx b/platform-includes/getting-started-sourcemaps/javascript.cloudflare.mdx deleted file mode 100644 index 2f270dac6e2a9..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.cloudflare.mdx +++ /dev/null @@ -1,13 +0,0 @@ -## Add Readable Stack Traces to Errors - -Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code. - -To fix this, upload your source maps to Sentry. - -To start, add `upload_source_maps = true` to your `wrangler.toml` file to enable source map uploading. - -Then run the Sentry Wizard to finish your set up: - - - -For more information on source maps or for more options to upload them, head over to our Source Maps documentation. diff --git a/platform-includes/getting-started-sourcemaps/javascript.deno.mdx b/platform-includes/getting-started-sourcemaps/javascript.deno.mdx deleted file mode 100644 index 4cbd635d5db95..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.deno.mdx +++ /dev/null @@ -1,7 +0,0 @@ -## Allow access to your source files - -To ensure the SDK can include your source code in stack traces, you should enable read access for your source files: - -```bash -deno run --allow-read=./src index.ts -``` diff --git a/platform-includes/getting-started-sourcemaps/javascript.nextjs.mdx b/platform-includes/getting-started-sourcemaps/javascript.nextjs.mdx deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx b/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx deleted file mode 100644 index 8b137891791fe..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.nuxt.mdx +++ /dev/null @@ -1 +0,0 @@ - diff --git a/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx b/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx deleted file mode 100644 index 9df787e962fc3..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx +++ /dev/null @@ -1,43 +0,0 @@ -## Source Maps Upload - -Update `vite.config.ts` to include the `sentryReactRouter` plugin. Also add your `SentryReactRouterBuildOptions` config options to the Vite config (this is required for uploading source maps at the end of the build): - - - -```typescript {filename: vite.config.ts} -import { reactRouter } from '@react-router/dev/vite'; -import { sentryReactRouter, type SentryReactRouterBuildOptions } from '@sentry/react-router'; -import { defineConfig } from 'vite'; - -const sentryConfig: SentryReactRouterBuildOptions = { - org: "___ORG_SLUG___", - project: "___PROJECT_SLUG___", - - // An auth token is required for uploading source maps. - authToken: "___ORG_AUTH_TOKEN___" - // ... -}; - -export default defineConfig(config => { - return { - plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)], - sentryConfig, - }; -}); -``` - -Include the `sentryOnBuildEnd` hook in `react-router.config.ts`: - -```typescript {filename: react-router.config.ts} {9} -import type { Config } from '@react-router/dev/config'; -import { sentryOnBuildEnd } from '@sentry/react-router'; - -export default { - ssr: true, - buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => { - // ... - // Call this at the end of the hook - await sentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest }); - }, -} satisfies Config; -``` diff --git a/platform-includes/getting-started-sourcemaps/javascript.remix.mdx b/platform-includes/getting-started-sourcemaps/javascript.remix.mdx deleted file mode 100644 index eef2d66ee95c1..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.remix.mdx +++ /dev/null @@ -1,9 +0,0 @@ -## Add Readable Stack Traces to Errors - -By default, Remix will minify your JavaScript and CSS files in production. This makes it difficult to debug errors in production. To make debugging easier, you can generate source maps and upload them to Sentry. - -Depending on your build setup, you can either use [Sentry's Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) or `sentry-upload-sourcemaps` script to upload sourcemaps. - -Please refer to the Sourcemaps Documentation, for more information. - -For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload sourcemaps. diff --git a/platform-includes/getting-started-sourcemaps/javascript.solidstart.mdx b/platform-includes/getting-started-sourcemaps/javascript.solidstart.mdx deleted file mode 100644 index 2bfcd9b3bf8ab..0000000000000 --- a/platform-includes/getting-started-sourcemaps/javascript.solidstart.mdx +++ /dev/null @@ -1,43 +0,0 @@ -## Add Readable Stack Traces to Errors - -To upload source maps, use the `sentrySolidStartVite` plugin from `@sentry/solidstart` and configure an auth token. -Auth tokens can be passed to the plugin explicitly with the `authToken` option. You can use the -`SENTRY_AUTH_TOKEN` environment variable or have an `.env.sentry-build-plugin` file in the working directory when -building your project. - -We recommend you add the auth token to your CI/CD environment as an environment variable. - -Learn more about configuring the plugin in our -[Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin). - - - -```bash {filename:.env.sentry-build-plugin} -SENTRY_ORG="___ORG_SLUG___" -SENTRY_PROJECT="___PROJECT_SLUG___" -SENTRY_AUTH_TOKEN="___ORG_AUTH_TOKEN___" -``` - -Add the plugin to your `app.config.ts`. - - -```TypeScript {filename:app.config.ts} -// app.config.ts -import { defineConfig } from '@solidjs/start/config'; -import { sentrySolidStartVite } from '@sentry/solidstart'; - -export default defineConfig({ - // ... - - vite: { - plugins: [ - sentrySolidStartVite({ - org: process.env.SENTRY_ORG, - project: process.env.SENTRY_PROJECT, - authToken: process.env.SENTRY_AUTH_TOKEN, - }), - ], - }, - // ... -}); -``` diff --git a/platform-includes/getting-started-sourcemaps/javascript.sveltekit.mdx b/platform-includes/getting-started-sourcemaps/javascript.sveltekit.mdx deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/platform-includes/getting-started-use/javascript.bun.mdx b/platform-includes/getting-started-use/javascript.bun.mdx deleted file mode 100644 index a0eada389da23..0000000000000 --- a/platform-includes/getting-started-use/javascript.bun.mdx +++ /dev/null @@ -1,11 +0,0 @@ -You need to import the `instrument.js` file before importing any other modules in your application. This is necessary to ensure that Sentry can automatically instrument all modules in your application: - -```javascript {filename: app.js} -// Import this first! -import "./instrument"; - -// Now import other modules -import http from "http"; - -// Your application code goes here -``` diff --git a/platform-includes/getting-started-verify/javascript.astro.mdx b/platform-includes/getting-started-verify/javascript.astro.mdx deleted file mode 100644 index 692502f454c44..0000000000000 --- a/platform-includes/getting-started-verify/javascript.astro.mdx +++ /dev/null @@ -1,13 +0,0 @@ -Trigger a test error somewhere in your Astro app, for example in one of your pages: - -```html {filename: home.astro} - -``` - - - -Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. Place the snippet directly in your code instead. - - diff --git a/platform-includes/getting-started-verify/javascript.bun.mdx b/platform-includes/getting-started-verify/javascript.bun.mdx deleted file mode 100644 index 026d3e6bf9bf9..0000000000000 --- a/platform-includes/getting-started-verify/javascript.bun.mdx +++ /dev/null @@ -1,14 +0,0 @@ -```javascript {"onboardingOptions": {"performance": "1-4, 12"}} -Sentry.startSpan({ - op: "test", - name: "My First Test Transaction", -}, () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); -}); -``` diff --git a/platform-includes/getting-started-verify/javascript.capacitor.mdx b/platform-includes/getting-started-verify/javascript.capacitor.mdx deleted file mode 100644 index 97db865cdf805..0000000000000 --- a/platform-includes/getting-started-verify/javascript.capacitor.mdx +++ /dev/null @@ -1,11 +0,0 @@ -```javascript -import * as Sentry from "@sentry/capacitor"; - -Sentry.captureException("Test Captured Exception"); -``` - -You can also throw an error anywhere in your application: - -```javascript -throw new Error(`Test Thrown Error`); -``` diff --git a/platform-includes/getting-started-verify/javascript.cloudflare.mdx b/platform-includes/getting-started-verify/javascript.cloudflare.mdx deleted file mode 100644 index 016a3624fd4f3..0000000000000 --- a/platform-includes/getting-started-verify/javascript.cloudflare.mdx +++ /dev/null @@ -1,7 +0,0 @@ -Verify your setup by adding the following snippet anywhere in your code and running it: - -```javascript -setTimeout(() => { - throw new Error(); -}); -``` diff --git a/platform-includes/getting-started-verify/javascript.deno.mdx b/platform-includes/getting-started-verify/javascript.deno.mdx deleted file mode 100644 index 016a3624fd4f3..0000000000000 --- a/platform-includes/getting-started-verify/javascript.deno.mdx +++ /dev/null @@ -1,7 +0,0 @@ -Verify your setup by adding the following snippet anywhere in your code and running it: - -```javascript -setTimeout(() => { - throw new Error(); -}); -``` diff --git a/platform-includes/getting-started-verify/javascript.nextjs.mdx b/platform-includes/getting-started-verify/javascript.nextjs.mdx deleted file mode 100644 index f45a36e293087..0000000000000 --- a/platform-includes/getting-started-verify/javascript.nextjs.mdx +++ /dev/null @@ -1,36 +0,0 @@ -## Step 2: Verify Your Setup - - - -If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard: - -1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost. -2. Click the "Throw error" button. This triggers two errors: - - a frontend error - - an error within the API route - -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. - - - -Don't forget to explore the example files' code in your project to understand what's happening after your button 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). - - - -Errors triggered from within your browser's developer tools (i.e., the browser console) are sandboxed, so they will not trigger Sentry's error monitoring. - - - - - -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 [**Replays**](https://sentry.io/orgredirect/organizations/:orgslug/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. - - diff --git a/platform-includes/getting-started-verify/javascript.nuxt.mdx b/platform-includes/getting-started-verify/javascript.nuxt.mdx deleted file mode 100644 index 13c13090cbad2..0000000000000 --- a/platform-includes/getting-started-verify/javascript.nuxt.mdx +++ /dev/null @@ -1,60 +0,0 @@ -### Server-side - -Sentry can only be loaded on the server-side by being explicitly added via `--import`. -Check out the `--import` CLI flag docs for setup instructions. - -To verify that Sentry works on the server-side, add the following snippet on the server-side: - -```js {tabTitle:Nitro} {filename:server/api/sentry-example.get.ts} -export default defineEventHandler(event => { - throw new Error("Sentry Example API Route Error"); -}); -``` - -If you want to test server-side monitoring locally, build your project and run: - ``` - # Start your app after building your project with `nuxi build` - node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs - ``` - - - Sentry server-side monitoring **doesn't work in development mode!** - - If you experience any issues with the server-side setup, check out Troubleshooting - or read through the different installation methods. - - -### Client-side - -Add the following snippet on the client-side: - -```html {tabTitle:Vue} {filename:pages/example-error.vue} - - - -``` diff --git a/platform-includes/getting-started-verify/javascript.react-router.mdx b/platform-includes/getting-started-verify/javascript.react-router.mdx deleted file mode 100644 index 99bf8fa675c7d..0000000000000 --- a/platform-includes/getting-started-verify/javascript.react-router.mdx +++ /dev/null @@ -1,19 +0,0 @@ -Throw an error in a loader to verify that Sentry is working. -After opening this route in your browser, you should see two errors in the Sentry issue stream, one captured from the server and one captured from the client. - -```tsx {filename: error.tsx} -import type { Route } from "./+types/example-page"; - -export async function loader() { - throw new Error("some error thrown in a loader"); -} - -export default function ExamplePage() { - return ( -
- Loading this page will throw an error -
- ); -} - -``` diff --git a/platform-includes/getting-started-verify/javascript.react.mdx b/platform-includes/getting-started-verify/javascript.react.mdx deleted file mode 100644 index 12061028ff488..0000000000000 --- a/platform-includes/getting-started-verify/javascript.react.mdx +++ /dev/null @@ -1,10 +0,0 @@ -```javascript - -``` diff --git a/platform-includes/getting-started-verify/javascript.remix.mdx b/platform-includes/getting-started-verify/javascript.remix.mdx deleted file mode 100644 index 6a636e7ff864e..0000000000000 --- a/platform-includes/getting-started-verify/javascript.remix.mdx +++ /dev/null @@ -1,26 +0,0 @@ -```typescript {filename:routes/error.tsx} - -``` - -This snippet adds a button that throws an error in a component or page. - - - -Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. - - - -Then, throw an error in a `loader` or `action`. - -```typescript {filename:routes/error.tsx} -export const action: ActionFunction = async ({ request }) => { - throw new Error("Sentry Error"); -}; -``` diff --git a/platform-includes/getting-started-verify/javascript.solid.mdx b/platform-includes/getting-started-verify/javascript.solid.mdx deleted file mode 100644 index 3665854c85795..0000000000000 --- a/platform-includes/getting-started-verify/javascript.solid.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```javascript - -``` - -This snippet adds a button that throws an error in a Solid component. diff --git a/platform-includes/getting-started-verify/javascript.solidstart.mdx b/platform-includes/getting-started-verify/javascript.solidstart.mdx deleted file mode 100644 index 3665854c85795..0000000000000 --- a/platform-includes/getting-started-verify/javascript.solidstart.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```javascript - -``` - -This snippet adds a button that throws an error in a Solid component. diff --git a/platform-includes/getting-started-verify/javascript.svelte.mdx b/platform-includes/getting-started-verify/javascript.svelte.mdx deleted file mode 100644 index 31a75b078c0bc..0000000000000 --- a/platform-includes/getting-started-verify/javascript.svelte.mdx +++ /dev/null @@ -1,12 +0,0 @@ -```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte} - -``` - -This snippet adds a button that throws an error in a Svelte component. diff --git a/platform-includes/getting-started-verify/javascript.sveltekit.mdx b/platform-includes/getting-started-verify/javascript.sveltekit.mdx deleted file mode 100644 index b79df3030a8cc..0000000000000 --- a/platform-includes/getting-started-verify/javascript.sveltekit.mdx +++ /dev/null @@ -1,35 +0,0 @@ -Add a button to a frontend component that throws an error: - -```javascript {filename:src/routes/sentry/+page.svelte} {3} - -``` - -Or throw an error in one of your `load` functions: - -```javascript {filename:src/routes/sentry/+page.js} {2} -export const load = () => { - throw new Error("Sentry Load Error"); -}; -``` - -Or throw an error in an API route: - -```javascript {filename:src/routes/sentry/+server.js} {2} -export const GET = () => { - throw new Error("Sentry API Error"); -}; -``` - -The possibilities are endless! - - - -Errors triggered from within Browser DevTools are sandboxed and will not trigger error monitoring. Keep this in mind when verifying your Sentry SDK installation. - - diff --git a/platform-includes/getting-started-verify/javascript.vue.mdx b/platform-includes/getting-started-verify/javascript.vue.mdx deleted file mode 100644 index a8c9a3a8dd3ac..0000000000000 --- a/platform-includes/getting-started-verify/javascript.vue.mdx +++ /dev/null @@ -1,16 +0,0 @@ -Add a button to your page that throws an error: - -```javascript {filename:App.vue} -// ... - -// ... - -export default { - // ... - methods: { - throwError() { - throw new Error('Sentry Error'); - } - } -}; -```