WIP

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/create-remix-app-v2-legacy/app/entry.server.tsx

@@ -26,11 +26,9 @@ installGlobals();
 
 const ABORT_DELAY = 5_000;
 
-const handleErrorImpl = () => {
+export const handleError = Sentry.wrapHandleErrorWithSentry(() => {
   Sentry.setTag('remix-test-tag', 'remix-test-value');
-};
-
-export const handleError = Sentry.wrapHandleErrorWithSentry(handleErrorImpl);
+});
 
 export default function handleRequest(
   request: Request,

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/entry.server.tsx

@@ -1,22 +1,22 @@
-import * as Sentry from '@sentry/remix';
+// import * as Sentry from '@sentry/remix';
 
-import { RemixServer } from '@remix-run/react';
-import { createContentSecurityPolicy } from '@shopify/hydrogen';
-import type { DataFunctionArgs, EntryContext } from '@shopify/remix-oxygen';
+import {RemixServer} from '@remix-run/react';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
+import type {EntryContext} from '@shopify/remix-oxygen';
 import isbot from 'isbot';
-import { renderToReadableStream } from 'react-dom/server';
+import {renderToReadableStream} from 'react-dom/server';
 
-export async function handleError(error: unknown, { request }: DataFunctionArgs): Promise<void> {
-  Sentry.captureRemixServerException(error, 'remix.server', request, true);
-}
+// export async function handleError(error: unknown, { request }: DataFunctionArgs): Promise<void> {
+//   Sentry.captureRemixServerException(error, 'remix.server', request, true);
+// }
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const { nonce, header, NonceProvider } = createContentSecurityPolicy();
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
 
   const body = await renderToReadableStream(
     <NonceProvider>

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts

@@ -0,0 +1,12 @@
+import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
+import { sentryPagesPlugin } from '@sentry/cloudflare';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+// eslint-disable-next-line import/no-unresolved
+import * as build from '../build/server';
+
+export const onRequest = [
+  context => sentryPagesPlugin({ dsn: context.env.E2E_TEST_DSN, tracesSampleRate: 1.0 })(context),
+  createPagesFunctionHandler({ build }),
+];

dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx

@@ -19,7 +19,7 @@ import {type LoaderArgs, defer} from '@shopify/remix-oxygen';
 import favicon from '../public/favicon.svg';
 import type {HydrogenSession} from '../server';
 
-import * as Sentry from '@sentry/remix';
+import {captureRemixErrorBoundaryError} from '@sentry/remix';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -142,8 +142,8 @@ function App() {
   );
 }
 
-// export default Sentry.withSentry(App);
 export default App;
+// export default withSentry(App);
 
 export function ErrorBoundary() {
   const error = useRouteError();
@@ -152,8 +152,8 @@ export function ErrorBoundary() {
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
-  // // Send the error to Sentry
-  // const eventId = Sentry.captureRemixErrorBoundaryError(error);
+  // Send the error to Sentry
+  const eventId = captureRemixErrorBoundaryError(error);
 
   if (isRouteErrorResponse(error)) {
     errorMessage = error?.data?.message ?? error.data;

dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json

@@ -4,8 +4,8 @@
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build",
-    "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' shopify hydrogen dev",
-    "start": "NODE_OPTIONS='--import ./instrument.server.mjs' shopify hydrogen preview --build --verbose --debug",
+    "dev": "shopify hydrogen dev",
+    "start": "shopify hydrogen preview --build --verbose",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
     "typecheck": "tsc --noEmit",
     "codegen": "shopify hydrogen codegen",
@@ -18,6 +18,7 @@
     "@remix-run/react": "2.9.2",
     "@remix-run/server-runtime": "^2.9.2",
     "@sentry/remix": "latest || *",
+    "@sentry/cloudflare": "latest || *",
     "@shopify/cli": "3.60.0",
     "@shopify/cli-hydrogen": "^8.1.1",
     "@shopify/hydrogen": "2024.4.7",

dev-packages/e2e-tests/test-applications/remix-hydrogen/playwright.config.mjs

@@ -1,7 +1,8 @@
-import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+import {getPlaywrightConfig} from '@sentry-internal/test-utils';
 
 const config = getPlaywrightConfig({
   startCommand: `pnpm run start`,
+  port: 3000,
 });
 
 export default config;

dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts

@@ -1,3 +1,5 @@
+// import './instrument.server.mjs';
+
 import {
   cartGetIdDefault,
   cartSetIdDefault,