diff --git a/docs/platforms/javascript/common/configuration/application-not-responding.mdx b/docs/platforms/javascript/common/configuration/application-not-responding.mdx index 7ae5315f3e7831..5bc59597a36980 100644 --- a/docs/platforms/javascript/common/configuration/application-not-responding.mdx +++ b/docs/platforms/javascript/common/configuration/application-not-responding.mdx @@ -19,6 +19,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro keywords: [ diff --git a/docs/platforms/javascript/common/configuration/integrations/amqplib.mdx b/docs/platforms/javascript/common/configuration/integrations/amqplib.mdx index 0a302771c40d9d..09ceb02b7b471c 100644 --- a/docs/platforms/javascript/common/configuration/integrations/amqplib.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/amqplib.mdx @@ -20,6 +20,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/anr.mdx b/docs/platforms/javascript/common/configuration/integrations/anr.mdx index a02758717671c3..5ea6a3249136a3 100644 --- a/docs/platforms/javascript/common/configuration/integrations/anr.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/anr.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro --- diff --git a/docs/platforms/javascript/common/configuration/integrations/childProcess.mdx b/docs/platforms/javascript/common/configuration/integrations/childProcess.mdx index c1e9eb228bcafc..18831fc7c94b1f 100644 --- a/docs/platforms/javascript/common/configuration/integrations/childProcess.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/childProcess.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro --- diff --git a/docs/platforms/javascript/common/configuration/integrations/console.mdx b/docs/platforms/javascript/common/configuration/integrations/console.mdx index f0c0e470daaeec..11efb15a93f00d 100644 --- a/docs/platforms/javascript/common/configuration/integrations/console.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/console.mdx @@ -19,6 +19,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/configuration/integrations/dataloader.mdx b/docs/platforms/javascript/common/configuration/integrations/dataloader.mdx index 76228d5d8cb1f7..444d8eac74e528 100644 --- a/docs/platforms/javascript/common/configuration/integrations/dataloader.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/dataloader.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/fs.mdx b/docs/platforms/javascript/common/configuration/integrations/fs.mdx index d10bb6aeaabc4d..3cd1d3121a18e3 100644 --- a/docs/platforms/javascript/common/configuration/integrations/fs.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/fs.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/genericpool.mdx b/docs/platforms/javascript/common/configuration/integrations/genericpool.mdx index e99219ac0e517e..70dd20faff1b1d 100644 --- a/docs/platforms/javascript/common/configuration/integrations/genericpool.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/genericpool.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/graphql.mdx b/docs/platforms/javascript/common/configuration/integrations/graphql.mdx index 38183a260664b7..74493627100444 100644 --- a/docs/platforms/javascript/common/configuration/integrations/graphql.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/graphql.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/http.mdx b/docs/platforms/javascript/common/configuration/integrations/http.mdx index 37957be586680d..c4c40fa2506941 100644 --- a/docs/platforms/javascript/common/configuration/integrations/http.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/http.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/kafka.mdx b/docs/platforms/javascript/common/configuration/integrations/kafka.mdx index e7b7b292c3fa15..172bab14e6b17f 100644 --- a/docs/platforms/javascript/common/configuration/integrations/kafka.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/kafka.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/knex.mdx b/docs/platforms/javascript/common/configuration/integrations/knex.mdx index 3fa08bded37a70..e1fb4f9fb8af92 100644 --- a/docs/platforms/javascript/common/configuration/integrations/knex.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/knex.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx b/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx index f73adc55a47f80..e74cc4e12310ed 100644 --- a/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/localvariables.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.cloudflare diff --git a/docs/platforms/javascript/common/configuration/integrations/lrumemoizer.mdx b/docs/platforms/javascript/common/configuration/integrations/lrumemoizer.mdx index fc0ed93f8b2d3f..8bed1557a11327 100644 --- a/docs/platforms/javascript/common/configuration/integrations/lrumemoizer.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/lrumemoizer.mdx @@ -20,6 +20,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/modules.mdx b/docs/platforms/javascript/common/configuration/integrations/modules.mdx index 0ec6dd8003a52a..9704496b79fc5a 100644 --- a/docs/platforms/javascript/common/configuration/integrations/modules.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/modules.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/configuration/integrations/mongo.mdx b/docs/platforms/javascript/common/configuration/integrations/mongo.mdx index 463ec9dccda232..a4f7828b403eb3 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mongo.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mongo.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx b/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx index f7de02f2059cc1..563be350673a77 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mongoose.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/mysql.mdx b/docs/platforms/javascript/common/configuration/integrations/mysql.mdx index 03cecc8a47ff05..3685b1bc67d900 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mysql.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mysql.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx b/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx index 4afe849dfd4e7e..81f6aea2319e20 100644 --- a/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/mysql2.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx b/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx index 0a48bd770e4c49..53fcf33a5caa53 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodecontext.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx b/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx index 17678309bbfe0c..5c08d40bf1c1ce 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodefetch.mdx @@ -19,6 +19,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx b/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx index 4f56bf12fd4a4f..cb5cf471a8b69a 100644 --- a/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/nodeprofiling.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro --- diff --git a/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx b/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx index 61e82e5a5812b8..d20afc7f50cc62 100644 --- a/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/onuncaughtexception.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/configuration/integrations/postgres.mdx b/docs/platforms/javascript/common/configuration/integrations/postgres.mdx index 1dfaff7f4e2fdc..2fa7aa9cae3506 100644 --- a/docs/platforms/javascript/common/configuration/integrations/postgres.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/postgres.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/prisma.mdx b/docs/platforms/javascript/common/configuration/integrations/prisma.mdx index 824bcfd580cefe..65d9292aaaade3 100644 --- a/docs/platforms/javascript/common/configuration/integrations/prisma.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/prisma.mdx @@ -17,6 +17,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/processThreadsBreadcrumb.mdx b/docs/platforms/javascript/common/configuration/integrations/processThreadsBreadcrumb.mdx index 074c58a1a13451..d783c2d517b5b1 100644 --- a/docs/platforms/javascript/common/configuration/integrations/processThreadsBreadcrumb.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/processThreadsBreadcrumb.mdx @@ -17,6 +17,7 @@ supported: - javascript.nuxt - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro --- diff --git a/docs/platforms/javascript/common/configuration/integrations/redis.mdx b/docs/platforms/javascript/common/configuration/integrations/redis.mdx index 7bd5edc3ac470e..392ca10f72c237 100644 --- a/docs/platforms/javascript/common/configuration/integrations/redis.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/redis.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx b/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx index ac25fbe09efb0c..557d8e0270c965 100644 --- a/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/requestdata.mdx @@ -19,6 +19,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.cloudflare --- diff --git a/docs/platforms/javascript/common/configuration/integrations/tedious.mdx b/docs/platforms/javascript/common/configuration/integrations/tedious.mdx index be1d9bc9e16cce..1e7d86f71be9ee 100644 --- a/docs/platforms/javascript/common/configuration/integrations/tedious.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/tedious.mdx @@ -20,6 +20,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun --- diff --git a/docs/platforms/javascript/common/configuration/integrations/trpc.mdx b/docs/platforms/javascript/common/configuration/integrations/trpc.mdx index 995e32c43cd4ba..9e613642ad54a7 100644 --- a/docs/platforms/javascript/common/configuration/integrations/trpc.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/trpc.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.deno - javascript.bun diff --git a/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx b/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx index 1fe5cd5b3c48ae..a876b28a96cace 100644 --- a/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/unhandledrejection.mdx @@ -18,6 +18,7 @@ supported: - javascript.solidstart - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/crons/index.mdx b/docs/platforms/javascript/common/crons/index.mdx index c04b2bd63cd23f..e22726f7301bed 100644 --- a/docs/platforms/javascript/common/crons/index.mdx +++ b/docs/platforms/javascript/common/crons/index.mdx @@ -6,6 +6,7 @@ supported: - javascript.nextjs - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/crons/troubleshooting.mdx b/docs/platforms/javascript/common/crons/troubleshooting.mdx index 973222a156495e..f322d4b9faf1aa 100644 --- a/docs/platforms/javascript/common/crons/troubleshooting.mdx +++ b/docs/platforms/javascript/common/crons/troubleshooting.mdx @@ -6,6 +6,7 @@ supported: - javascript.nextjs - javascript.sveltekit - javascript.remix + - javascript.react-router - javascript.astro - javascript.bun - javascript.deno diff --git a/docs/platforms/javascript/common/index.mdx b/docs/platforms/javascript/common/index.mdx index ce0f5a47bee06f..3b0cae9c6bcd6b 100644 --- a/docs/platforms/javascript/common/index.mdx +++ b/docs/platforms/javascript/common/index.mdx @@ -22,7 +22,7 @@ Check out the other SDKs we support in the left-hand dropdown. - + ## Features @@ -40,7 +40,7 @@ Select which Sentry features you'd like to install in addition to Error Monitori - + In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also collect and analyze performance profiles from real users with [profiling](/product/explore/profiling/). @@ -72,7 +72,7 @@ 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. diff --git a/docs/platforms/javascript/common/install/index.mdx b/docs/platforms/javascript/common/install/index.mdx index 523fb6b62903e4..fb65f1d213feff 100644 --- a/docs/platforms/javascript/common/install/index.mdx +++ b/docs/platforms/javascript/common/install/index.mdx @@ -26,6 +26,7 @@ notSupported: - javascript.azure-functions - javascript.gcp-functions - javascript.cloudflare + - javascript.react-router --- diff --git a/docs/platforms/javascript/common/install/loader.mdx b/docs/platforms/javascript/common/install/loader.mdx index 372f6042f30a6d..185d5e156bb01d 100644 --- a/docs/platforms/javascript/common/install/loader.mdx +++ b/docs/platforms/javascript/common/install/loader.mdx @@ -18,6 +18,7 @@ notSupported: - javascript.vue - javascript.wasm - javascript.remix + - javascript.react-router - javascript.svelte - javascript.sveltekit - javascript.node diff --git a/docs/platforms/javascript/common/install/npm.mdx b/docs/platforms/javascript/common/install/npm.mdx index 4d832bbeee5275..b2d3b2f62bfc41 100644 --- a/docs/platforms/javascript/common/install/npm.mdx +++ b/docs/platforms/javascript/common/install/npm.mdx @@ -18,6 +18,7 @@ notSupported: - javascript.vue - javascript.wasm - javascript.remix + - javascript.react-router - javascript.solid - javascript.solidstart - javascript.svelte diff --git a/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx b/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx index 2d7403c104ca16..35d4a6240b58ed 100644 --- a/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx +++ b/docs/platforms/javascript/common/opentelemetry/custom-setup.mdx @@ -18,6 +18,7 @@ supported: - javascript.sveltekit - javascript.astro - javascript.remix + - javascript.react-router notSupported: - javascript sidebar_order: 0 diff --git a/docs/platforms/javascript/common/opentelemetry/index.mdx b/docs/platforms/javascript/common/opentelemetry/index.mdx index 38e6d0b41a3020..38a3e32de05eb8 100644 --- a/docs/platforms/javascript/common/opentelemetry/index.mdx +++ b/docs/platforms/javascript/common/opentelemetry/index.mdx @@ -19,6 +19,7 @@ supported: - javascript.sveltekit - javascript.astro - javascript.remix + - javascript.react-router notSupported: - javascript --- diff --git a/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx b/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx index 5bb0cbfaa245aa..4ea751284fd04b 100644 --- a/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx +++ b/docs/platforms/javascript/common/opentelemetry/using-opentelemetry-apis.mdx @@ -18,6 +18,7 @@ supported: - javascript.sveltekit - javascript.astro - javascript.remix + - javascript.react-router notSupported: - javascript sidebar_order: 1 diff --git a/docs/platforms/javascript/guides/react-router/config.yml b/docs/platforms/javascript/guides/react-router/config.yml new file mode 100644 index 00000000000000..f62329f1af2bab --- /dev/null +++ b/docs/platforms/javascript/guides/react-router/config.yml @@ -0,0 +1,8 @@ +title: React Router +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/package.json b/package.json index 14a4a69c7bdd5b..7f9048d710f4be 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "next-themes": "^0.3.0", "nextjs-toploader": "^1.6.6", "parse-numeric-range": "^1.3.0", - "platformicons": "^6.0.3", + "platformicons": "^7.0.3", "prism-sentry": "^1.0.2", "query-string": "^6.13.1", "react": "rc", @@ -137,4 +137,4 @@ "node": "20.11.0", "yarn": "1.22.22" } -} \ No newline at end of file +} diff --git a/platform-includes/getting-started-config/javascript.react-router.mdx b/platform-includes/getting-started-config/javascript.react-router.mdx new file mode 100644 index 00000000000000..8c5597158c4fa3 --- /dev/null +++ b/platform-includes/getting-started-config/javascript.react-router.mdx @@ -0,0 +1,131 @@ +### 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"; +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 + sessionReplaySampleRate: 1.0, + sessionReplayRecordingRate: 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"; + +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/node"; +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.mjs' react-router dev", + "start": "NODE_OPTIONS='--import ./instrument.mjs' react-router-serve ./build/server/index.js", +} +``` diff --git a/platform-includes/getting-started-install/javascript.react-router.mdx b/platform-includes/getting-started-install/javascript.react-router.mdx new file mode 100644 index 00000000000000..53ff7c328ea49a --- /dev/null +++ b/platform-includes/getting-started-install/javascript.react-router.mdx @@ -0,0 +1,34 @@ + + + + +```bash {tabTitle:npm} +npm install @sentry/react @sentry/node @sentry/profiling-node +``` + +```bash {tabTitle:yarn} +yarn add @sentry/react @sentry/node @sentry/profiling-node +``` + +```bash {tabTitle:pnpm} +pnpm add @sentry/react @sentry/node @sentry/profiling-node +``` + + + + + ```bash {tabTitle:npm} + npm install @sentry/react @sentry/node + ``` + + ```bash {tabTitle:yarn} + yarn add @sentry/react @sentry/node + ``` + + ```bash {tabTitle:pnpm} + pnpm add @sentry/react @sentry/node + ``` + + diff --git a/platform-includes/getting-started-primer/javascript.react-router.mdx b/platform-includes/getting-started-primer/javascript.react-router.mdx new file mode 100644 index 00000000000000..116fe5cc3cade2 --- /dev/null +++ b/platform-includes/getting-started-primer/javascript.react-router.mdx @@ -0,0 +1,12 @@ + + +If you are using React Router in library mode, you can follow the instructions in the [React Router library mode guide](/platforms/javascript/guides/react/features/react-router/). + + + + + +We do not yet have a dedicated SDK for React Router in framework mode. +This guide demonstrates how to setup error monitoring and basic performance tracing using the `@sentry/react` and `@sentry/node` packages instead. + + diff --git a/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx b/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx new file mode 100644 index 00000000000000..b99358b9f844d5 --- /dev/null +++ b/platform-includes/getting-started-sourcemaps/javascript.react-router.mdx @@ -0,0 +1,9 @@ +## Add Readable Stack Traces to Errors + +By default, React Router will minify your JavaScript and CSS files in production. This makes it difficult to debug errors. To make debugging easier, you can generate source maps and upload them to Sentry. + +We recommend using [Sentry's Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) to upload sourcemaps. + +Please refer to the Source Maps Documentation, for more information. + +For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload source maps. diff --git a/platform-includes/getting-started-verify/javascript.react-router.mdx b/platform-includes/getting-started-verify/javascript.react-router.mdx new file mode 100644 index 00000000000000..99bf8fa675c7d8 --- /dev/null +++ b/platform-includes/getting-started-verify/javascript.react-router.mdx @@ -0,0 +1,19 @@ +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/public/icon/rr.svg b/public/icon/rr.svg new file mode 100644 index 00000000000000..a5c5dacca6dcf0 --- /dev/null +++ b/public/icon/rr.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/platformIcon.tsx b/src/components/platformIcon.tsx index 7bc8f068b8abe3..cf66c06bac5861 100644 --- a/src/components/platformIcon.tsx +++ b/src/components/platformIcon.tsx @@ -102,6 +102,7 @@ import QuartSVG from 'platformicons/svg/quart.svg'; import RailsSVG from 'platformicons/svg/rails.svg'; import ReactSVG from 'platformicons/svg/react.svg'; import ReactnativeSVG from 'platformicons/svg/react-native.svg'; +import ReactRouterSVG from 'platformicons/svg/react-router.svg'; import RedisSVG from 'platformicons/svg/redis.svg'; import ReduxSVG from 'platformicons/svg/redux.svg'; import RemixSVG from 'platformicons/svg/remix.svg'; @@ -239,6 +240,7 @@ import QuartSVGLarge from 'platformicons/svg_80x80/quart.svg'; import RailsSVGLarge from 'platformicons/svg_80x80/rails.svg'; import ReactSVGLarge from 'platformicons/svg_80x80/react.svg'; import ReactnativeSVGLarge from 'platformicons/svg_80x80/react-native.svg'; +import ReactRouterSVGLarge from 'platformicons/svg_80x80/react-router.svg'; import RedisSVGLarge from 'platformicons/svg_80x80/redis.svg'; import ReduxSVGLarge from 'platformicons/svg_80x80/redux.svg'; import RemixSVGLarge from 'platformicons/svg_80x80/remix.svg'; @@ -687,6 +689,10 @@ const formatToSVG = { sm: ReactSVG, lg: ReactSVGLarge, }, + 'react-router': { + sm: ReactRouterSVG, + lg: ReactRouterSVGLarge, + }, redis: { sm: RedisSVG, lg: RedisSVGLarge, @@ -912,6 +918,7 @@ export const PLATFORM_TO_ICON = { 'javascript-nuxt': 'nuxt', 'javascript-node': 'nodejs', 'javascript-react': 'react', + 'javascript-react-router': 'react-router', 'javascript-remix': 'remix', 'javascript-solid': 'solid', 'javascript-solidstart': 'solidstart', diff --git a/yarn.lock b/yarn.lock index a99182d952cdfb..b77612eb6cded5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10347,10 +10347,10 @@ pkg-types@^1.2.1: mlly "^1.7.2" pathe "^1.1.2" -platformicons@^6.0.3: - version "6.0.3" - resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-6.0.3.tgz#c167ab68c1cdb1a4d97665118b65ebccf7dcbe00" - integrity sha512-Z83ePiRqlA8yXQI1Y28/xv/7hGW/2BajJESxbnTjQkBjs2vGFAQjMs5E/mkOJoNuDKfEeaHgD7xOqajvARd4AQ== +platformicons@^7.0.3: + version "7.0.3" + resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-7.0.3.tgz#709d4622c2bcb204bf3ca75fece1add355de55ea" + integrity sha512-xhbDlM1cXV/ZjIGEkwABC/KMTlnt9gqC7Jno0M1EQ79uSobCFebYkKokZkdd1J5t4PIeF03njGx1Ofvs9ukHfw== dependencies: "@types/node" "*" "@types/react" "*"