diff --git a/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx b/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx index cabec4c059eeb..c989adafdf007 100644 --- a/docs/platforms/javascript/guides/remix/frameworks/hydrogen.mdx +++ b/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, }); ```