add onboarding options + diffs

Author: chargome

platform-includes/getting-started-config/javascript.react-router.mdx

@@ -10,20 +10,28 @@ npx react-router reveal
 
 Initialize the Sentry React SDK in your `entry.client.tsx` file:
 
-```tsx {filename: entry.client.tsx}
+```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()],
+  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(() => {
@@ -38,7 +46,7 @@ startTransition(() => {
 
 Now, update your `app/root.tsx` file to report any unhandled errors from your error boundary:
 
-```tsx {filename: app/root.tsx} {14,15}
+```tsx {diff} {filename: app/root.tsx}
 import * as Sentry from "@sentry/react";
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
@@ -53,20 +61,20 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
         ? "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 error boundary
-    Sentry.captureException(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 (
-    <main className="pt-16 p-4 container mx-auto">
+    <main>
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
+        <pre>
           <code>{stack}</code>
         </pre>
       )}
@@ -80,25 +88,28 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
 Create an `instrument.server.mjs` file in the root of your app:
 
-```js {filename: instrument.server.mjs}
+```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 {filename: entry.server.tsx} {7}
+```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);
++   Sentry.captureException(error);
 
     // make sure to still log the error so you can see it
     console.error(error);

platform-includes/getting-started-install/javascript.react-router.mdx

@@ -1,11 +1,34 @@
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "profiling", "session-replay"]}
+/>
+
+<OnboardingOption optionId="profiling">
+
 ```bash {tabTitle:npm}
-npm install @sentry/react @sentry/node
+npm install @sentry/react @sentry/node @sentry/profiling-node
 ```
 
 ```bash {tabTitle:yarn}
-yarn add @sentry/react @sentry/node
+yarn add @sentry/react @sentry/node @sentry/profiling-node
 ```
 
 ```bash {tabTitle:pnpm}
-pnpm add @sentry/react @sentry/node
+pnpm add @sentry/react @sentry/node @sentry/profiling-node
 ```
+
+</OnboardingOption> 
+
+<OnboardingOption optionId="profiling" hideForThisOption>
+  ```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
+  ```
+</OnboardingOption>
+

platform-includes/getting-started-verify/javascript.react-router.mdx

@@ -2,17 +2,16 @@ 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/error-loader";
+import type { Route } from "./+types/example-page";
 
 export async function loader() {
-  console.log("server loader");
   throw new Error("some error thrown in a loader");
 }
 
-export default function Loaders({ loaderData }: Route.ComponentProps) {
+export default function ExamplePage() {
   return (
     <div>
-      Loaders, loaderData: <pre>{JSON.stringify(loaderData, null, 2)}</pre>
+      Loading this page will throw an error
     </div>
   );
 }