From 296b1bed1261d1386138096e4e13b5f6e01ac50d Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Tue, 17 Dec 2024 16:11:32 +0100 Subject: [PATCH] docs(js/react-router): Add setup guide for react router (framework) (#12068) --- .../application-not-responding.mdx | 1 + .../configuration/integrations/amqplib.mdx | 1 + .../common/configuration/integrations/anr.mdx | 1 + .../integrations/childProcess.mdx | 1 + .../configuration/integrations/console.mdx | 1 + .../configuration/integrations/dataloader.mdx | 1 + .../common/configuration/integrations/fs.mdx | 1 + .../integrations/genericpool.mdx | 1 + .../configuration/integrations/graphql.mdx | 1 + .../configuration/integrations/http.mdx | 1 + .../configuration/integrations/kafka.mdx | 1 + .../configuration/integrations/knex.mdx | 1 + .../integrations/localvariables.mdx | 1 + .../integrations/lrumemoizer.mdx | 1 + .../configuration/integrations/modules.mdx | 1 + .../configuration/integrations/mongo.mdx | 1 + .../configuration/integrations/mongoose.mdx | 1 + .../configuration/integrations/mysql.mdx | 1 + .../configuration/integrations/mysql2.mdx | 1 + .../integrations/nodecontext.mdx | 1 + .../configuration/integrations/nodefetch.mdx | 1 + .../integrations/nodeprofiling.mdx | 1 + .../integrations/onuncaughtexception.mdx | 1 + .../configuration/integrations/postgres.mdx | 1 + .../configuration/integrations/prisma.mdx | 1 + .../integrations/processThreadsBreadcrumb.mdx | 1 + .../configuration/integrations/redis.mdx | 1 + .../integrations/requestdata.mdx | 1 + .../configuration/integrations/tedious.mdx | 1 + .../configuration/integrations/trpc.mdx | 1 + .../integrations/unhandledrejection.mdx | 1 + .../javascript/common/crons/index.mdx | 1 + .../common/crons/troubleshooting.mdx | 1 + docs/platforms/javascript/common/index.mdx | 6 +- .../javascript/common/install/index.mdx | 1 + .../javascript/common/install/loader.mdx | 1 + .../javascript/common/install/npm.mdx | 1 + .../common/opentelemetry/custom-setup.mdx | 1 + .../javascript/common/opentelemetry/index.mdx | 1 + .../using-opentelemetry-apis.mdx | 1 + .../javascript/guides/react-router/config.yml | 8 ++ package.json | 4 +- .../javascript.react-router.mdx | 131 ++++++++++++++++++ .../javascript.react-router.mdx | 34 +++++ .../javascript.react-router.mdx | 12 ++ .../javascript.react-router.mdx | 9 ++ .../javascript.react-router.mdx | 19 +++ public/icon/rr.svg | 6 + src/components/platformIcon.tsx | 7 + yarn.lock | 8 +- 50 files changed, 274 insertions(+), 9 deletions(-) create mode 100644 docs/platforms/javascript/guides/react-router/config.yml create mode 100644 platform-includes/getting-started-config/javascript.react-router.mdx create mode 100644 platform-includes/getting-started-install/javascript.react-router.mdx create mode 100644 platform-includes/getting-started-primer/javascript.react-router.mdx create mode 100644 platform-includes/getting-started-sourcemaps/javascript.react-router.mdx create mode 100644 platform-includes/getting-started-verify/javascript.react-router.mdx create mode 100644 public/icon/rr.svg diff --git a/docs/platforms/javascript/common/configuration/application-not-responding.mdx b/docs/platforms/javascript/common/configuration/application-not-responding.mdx index 7ae5315f3e783..5bc59597a3698 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 0a302771c40d9..09ceb02b7b471 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 a02758717671c..5ea6a3249136a 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 c1e9eb228bcaf..18831fc7c94b1 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 f0c0e470daaee..11efb15a93f00 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 76228d5d8cb1f..444d8eac74e52 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 d10bb6aeaabc4..3cd1d3121a18e 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 e99219ac0e517..70dd20faff1b1 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 38183a260664b..7449362710044 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 37957be586680..c4c40fa250694 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 e7b7b292c3fa1..172bab14e6b17 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 3fa08bded37a7..e1fb4f9fb8af9 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 f73adc55a47f8..e74cc4e12310e 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 fc0ed93f8b2d3..8bed1557a1132 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 0ec6dd8003a52..9704496b79fc5 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 463ec9dccda23..a4f7828b403eb 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 f7de02f2059cc..563be350673a7 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 03cecc8a47ff0..3685b1bc67d90 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 4afe849dfd4e7..81f6aea2319e2 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 0a48bd770e4c4..53fcf33a5caa5 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 17678309bbfe0..5c08d40bf1c1c 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 4f56bf12fd4a4..cb5cf471a8b69 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 61e82e5a5812b..d20afc7f50cc6 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 1dfaff7f4e2fd..2fa7aa9cae350 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 824bcfd580cef..65d9292aaaade 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 074c58a1a1345..d783c2d517b5b 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 7bd5edc3ac470..392ca10f72c23 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 ac25fbe09efb0..557d8e0270c96 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 be1d9bc9e16cc..1e7d86f71be9e 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 995e32c43cd4b..9e613642ad54a 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 1fe5cd5b3c48a..a876b28a96cac 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 c04b2bd63cd23..e22726f7301be 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 973222a156495..f322d4b9faf1a 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 ce0f5a47bee06..3b0cae9c6bcd6 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 523fb6b62903e..fb65f1d213fef 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 372f6042f30a6..185d5e156bb01 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 4d832bbeee527..b2d3b2f62bfc4 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 2d7403c104ca1..35d4a6240b58e 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 38e6d0b41a302..38a3e32de05eb 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 5bb0cbfaa245a..4ea751284fd04 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 0000000000000..f62329f1af2ba --- /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 14a4a69c7bdd5..7f9048d710f4b 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 0000000000000..8c5597158c4fa --- /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 0000000000000..53ff7c328ea49 --- /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 0000000000000..116fe5cc3cade --- /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 0000000000000..b99358b9f844d --- /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 0000000000000..99bf8fa675c7d --- /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 0000000000000..a5c5dacca6dcf --- /dev/null +++ b/public/icon/rr.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/platformIcon.tsx b/src/components/platformIcon.tsx index 7bc8f068b8abe..cf66c06bac586 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 a99182d952cdf..b77612eb6cded 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" "*"