Shopify Hydrogen Guide
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 with your package manager:
npm install @sentry/remix --save
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:
npm install @sentry/cloudflare --save
Then update your server.ts file to use the wrapRequestHandler method:
server.tsimport { 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';
/**
* 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 () => {
// Instrument your server build with Sentry
// and use the instrumented build inside the fetch handler
const instrumentedBuild = instrumentBuild(remixBuild)
// request handling logic
}
);
},
};
Wrap your Remix root component using withSentry:
root.tsximport { withSentry } from "@sentry/remix/cloudflare";
function App({ children }) {
return <>{children}</>;
}
// 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:
entry.client.tsximport * as Sentry from "@sentry/remix/cloudflare";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
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,
});
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").