Shopify Hydrogen Guide

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:

npx @sentry/wizard@latest -i remix

If the wizard doesn't work for you, you can also set up the Remix SDK manually.

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:

We recommend installing the SDK through our installation wizard:

npx @sentry/wizard@latest -i remix

The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you:

• create two files in the root directory of your project, entry.client.tsx and entry.server.tsx (if they don't already exist).
• add the default Sentry.init() for the client in entry.client.tsx and the server in entry.server.tsx.
• create .sentryclirc with an auth token to upload source maps (this file is automatically added to .gitignore).
• adjust your build script in package.json to automatically upload source maps to Sentry when you build your application.
• add an example page to your app to verify your Sentry setup

If you use Remix future flags, the wizard will instrument your application accordingly to support Remix v2 features.

After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. You can also manually capture errors.

Then update your server.ts file to use the wrapRequestHandler method:

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:

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
  ],
});