From 18d7ba729b58d43ec2cb1676c09fbc780d9f994c Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Wed, 6 Nov 2024 14:09:37 -0500
Subject: [PATCH] feat: Add docs for Shopify Hydrogen (#11580)

Co-authored-by: Alex Krawiec <alex.krawiec@sentry.io>
---
 .../guides/remix/frameworks/hydrogen.mdx      | 74 +++++++++++++++++++
 .../guides/remix/frameworks/index.mdx         |  8 ++
 2 files changed, 82 insertions(+)
 create mode 100644 docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx
 create mode 100644 docs/platforms/javascript/guides/remix/frameworks/index.mdx

diff --git a/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx b/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx
new file mode 100644
index 0000000000000..299fd9325d063
--- /dev/null
+++ b/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx
@@ -0,0 +1,74 @@
+---
+title: Shopify Hydrogen Guide
+description: "Learn how to use the Sentry Remix SDK to instrument your Shopify Hydrogen app."
+---
+
+If you're using the Shopify Hydrogen framework, you can use the Sentry Remix SDK to add Sentry instrumentation to your app.
+
+First, install the Sentry Remix SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:
+
+```bash
+npx @sentry/wizard@latest -i remix
+```
+
+If the wizard doesn't work for you, you can also [set up the Remix SDK manually](/platforms/javascript/guides/remix/manual-setup/).
+
+After installing the Sentry Remix SDK, delete the newly generated `instrumentation.server.mjs` file and all newly generated code from `entry.server.tsx`. This instrumentation is not needed because you are going to use the Sentry Cloudflare SDK for server-side instrumentation.
+
+Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager:
+
+<PlatformContent includePath="getting-started-install" />
+
+Then update your `server.ts` file to use the `wrapRequestHandler` method:
+
+```ts {filename:server.ts}
+import { wrapRequestHandler } from "@sentry/cloudflare";
+
+/**
+ * Export a fetch handler in module format.
+ */
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    executionContext: ExecutionContext
+  ): Promise<Response> {
+    return wrapRequestHandler(
+      {
+        options: {
+          dsn: "YOUR_DSN_HERE",
+          tracesSampleRate: 1.0,
+        },
+        // Need to cast to any because this is not on cloudflare
+        request: request as any,
+        context: executionContext,
+      },
+      async () => {
+        // request handling logic
+      }
+    );
+  },
+};
+```
+
+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:
+
+```ts {filename:vite.config.ts}
+export function removeAsyncHooksPlugin(): Plugin {
+  return {
+    name: "remove-async-hooks",
+    load: (id) => {
+      if (id === "node:async_hooks") {
+        return "export default {}";
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [
+    removeAsyncHooksPlugin(),
+    // rest of your plugins
+  ],
+});
+```
diff --git a/docs/platforms/javascript/guides/remix/frameworks/index.mdx b/docs/platforms/javascript/guides/remix/frameworks/index.mdx
new file mode 100644
index 0000000000000..a66d7fb3d6e98
--- /dev/null
+++ b/docs/platforms/javascript/guides/remix/frameworks/index.mdx
@@ -0,0 +1,8 @@
+---
+title: Cloudflare SDK Framework Guide
+description: "Learn how to set up the Remix SDK with popular Frameworks like Hydrogen."
+---
+
+You can use the Sentry Remix SDK to setup Sentry with frameworks like Shopify Hydrogen.
+
+<PageGrid />