Update Remix Hydrogen Docs (#12931)

Author: onurtemizkan

docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx

@@ -7,13 +7,19 @@ If you're using the Shopify Hydrogen framework, you can use the Sentry Remix SDK
 
 ## 1. Installing Sentry Remix SDK
 
-First, install the Sentry Remix SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:
+First, install the Sentry Remix SDK with your package manager:
 
-```bash
-npx @sentry/wizard@latest -i remix
+```bash {tabTitle:npm}
+npm install @sentry/remix --save
+```
+
+```bash {tabTitle:yarn}
+yarn add @sentry/remix
 ```
 
-If the wizard doesn't work for you, you can also [set up the Remix SDK manually](/platforms/javascript/guides/remix/manual-setup/).
+```bash {tabTitle:pnpm}
+pnpm add @sentry/remix
+```
 
 ## 2. Installing Sentry Cloudflare SDK
 
@@ -33,11 +39,19 @@ yarn add @sentry/cloudflare
 pnpm add @sentry/cloudflare
 ```
 
+## 3. Instrumenting Your Server
 
 Then update your `server.ts` file to use the `wrapRequestHandler` method:
 
 ```ts {filename:server.ts}
-import { wrapRequestHandler } from "@sentry/cloudflare";
+import { wrapRequestHandler } from "@sentry/cloudflare/request";
+import { instrumentBuild } from "@sentry/remix/cloudflare";
+// Virtual entry point for the app
+import * as remixBuild from 'virtual:remix/server-build';
+
+// Instrument your server build with Sentry
+// and use the instrumented build inside the fetch handler
+const instrumentedBuild = instrumentBuild(remixBuild)
 
 /**
  * Export a fetch handler in module format.
@@ -66,24 +80,54 @@ export default {
 };
 ```
 
-To remove errors relating to `node:async_hooks` (which is included in the sdk, but not used by `wrapRequestHandler`), add a custom vite plugin to your `vite.config.ts` file that will alias it to an empty module:
+## 4. Instrumenting Your Client
 
-```ts {filename:vite.config.ts}
-export function removeAsyncHooksPlugin(): Plugin {
-  return {
-    name: "remove-async-hooks",
-    load: (id) => {
-      if (id === "node:async_hooks") {
-        return "export default {}";
-      }
-    },
-  };
+Wrap your Remix root component using `withSentry`:
+
+```tsx {filename:root.tsx}
+import { withSentry } from "@sentry/remix/cloudflare";
+
+function App({ children }) {
+  return <>{children}</>;
 }
 
-export default defineConfig({
-  plugins: [
-    removeAsyncHooksPlugin(),
-    // rest of your plugins
+// Pass `useEffect`, `useLocation` and `useMatches` hooks to `withSentry`
+export default withSentry(App, useEffect, useLocation, useMatches);
+```
+
+
+Finally, update your `entry.client.tsx` file to initialize Sentry SDK on the client:
+
+```tsx {filename:entry.client.tsx}
+import * as Sentry from "@sentry/remix/cloudflare";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [
+    Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches,
+    }),
+    // Replay is only available in the client
+    Sentry.replayIntegration(),
   ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 ```