docs(js): React Quick Start guide for Tracing (#13186)

* React Quick Start guide for Error Monitoring feature only

* update section on error boundary

* make Step 4 optional

* update React QS guide for Tracing

* merge with error monitoring and fine-tune

Author: inventarSarah

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 <PlatformLink to="/configuration/integrations/react-router/">React Router Integration</PlatformLink> 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";
 </Alert>
 
 <OnboardingOption optionId="performance">
-## 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
 <button
@@ -207,10 +200,37 @@ Add the following test button to one of your pages, which will trigger an error
 </button>
 ```
 
-Open the page in a browser (for most React applications, this will be at localhost) and click the button to trigger a frontend error.
+<OnboardingOption optionId="performance" hideForThisOption>
+  Open the page in a browser (for most React applications, this will be at
+  localhost) and click the button to trigger a frontend error.
+</OnboardingOption>
 
 <PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
+<OnboardingOption optionId="performance">
+### Tracing
+
+To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for the execution of your code:
+
+```javascript
+<button
+  type="button"
+  onClick={() => {
+    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
+      setTimeout(() => {
+        throw new Error("Sentry Test Error");
+      }, 99);
+    });
+  }}
+>
+  Break the world
+</button>
+```
+
+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.
+
+</OnboardingOption>
+
 ### 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).