diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index 4222d5488ac38..1709327085dde 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -50,34 +50,20 @@ pnpm add @sentry/react ## Step 2: Configure -Sentry supports multiple versions of React Router. To learn how to configure them, read the React Router Integration docs. - ### Initialize the Sentry SDK To import and initialize Sentry, create a file in your project's root directory, for example, `instrument.js`, and add the following code: -```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "1, 3-8, 13-21, 24-30", "session-replay": "22, 33-39"}} -import { useEffect } from "react"; +```javascript {filename:instrument.js} {"onboardingOptions": {"performance": "6-9, 12-20", "session-replay": "10, 21-27"}} import * as Sentry from "@sentry/react"; -import { - createRoutesFromChildren, - matchRoutes, - useLocation, - useNavigationType, -} from "react-router-dom"; Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - // See docs for support of different versions of variation of react router + // If you're using react router, use the integration for your react router version instead. + // Learn more at // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/ - Sentry.reactRouterV6BrowserTracingIntegration({ - useEffect, - useLocation, - useNavigationType, - createRoutesFromChildren, - matchRoutes, - }), + Sentry.browserTracingIntegration(), Sentry.replayIntegration(), ], @@ -160,9 +146,14 @@ import * as Sentry from "@sentry/react"; -## Step 4: Set Up React Router (Optional) +## Step 4: Set Up React Router +If you're using `react-router` in your application, you need to set up the Sentry integration for your specific React Router version to trace `navigation` events.\ +Select your React Router version to start instrumenting your routing: -The React Router integration is designed to work with our tracing package. Learn more about set up for our [React Router Integration](configuration/integrations/react-router/). +- [React Router v7 (library mode)](features/react-router/v7) +- [React Router v6](features/react-router/v6) +- [Older React Router versions](features/react-router) +- [TanStack Router](features/tanstack-router) ## Step 5: Capture Redux State Data (Optional) @@ -194,7 +185,9 @@ To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it: +### Issues + +To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it: ```javascript +``` + +Open the page in a browser (for most React applications, this will be at localhost) and click the button to trigger a frontend error and performance trace. + + + ### 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).