test(remix): Run tsc before Remix E2E tests (#16345)

onurtemizkan · web-flow · commit d06b72b33805 · 2025-05-29T12:32:35.000-04:00
Following up: #16336
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.client.tsx
@@ -3,6 +3,16 @@ import * as Sentry from '@sentry/remix';
 import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
+// Extend the Window interface to include ENV
+declare global {
+  interface Window {
+    ENV: {
+      SENTRY_DSN: string;
+      [key: string]: unknown;
+    };
+  }
+}
+
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: window.ENV.SENTRY_DSN,
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/entry.server.tsx
@@ -40,11 +40,6 @@ function isBotRequest(userAgent: string | null) {
     return isbotModule.isbot(userAgent);
   }
 
-  // isbot < 3.8.0
-  if ('default' in isbotModule && typeof isbotModule.default === 'function') {
-    return isbotModule.default(userAgent);
-  }
-
   return false;
 }
 
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/root.tsx
@@ -52,7 +52,7 @@ export function ErrorBoundary() {
 }
 
 function App() {
-  const { ENV } = useLoaderData();
+  const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } };
 
   return (
     <html lang="en">
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/app/routes/navigate.tsx
@@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => {
 };
 
 export default function LoaderError() {
-  const data = useLoaderData();
+  const data = useLoaderData() as { test?: string };
 
   return (
     <div>
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "remix vite:build",
+    "build": "remix vite:build && pnpm typecheck",
     "dev": "node ./server.mjs",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "cross-env NODE_ENV=production node ./server.mjs",
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx
@@ -3,6 +3,16 @@ import * as Sentry from '@sentry/remix';
 import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
+// Extend the Window interface to include ENV
+declare global {
+  interface Window {
+    ENV: {
+      SENTRY_DSN: string;
+      [key: string]: unknown;
+    };
+  }
+}
+
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: window.ENV.SENTRY_DSN,
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.server.tsx
@@ -40,11 +40,6 @@ function isBotRequest(userAgent: string | null) {
     return isbotModule.isbot(userAgent);
   }
 
-  // isbot < 3.8.0
-  if ('default' in isbotModule && typeof isbotModule.default === 'function') {
-    return isbotModule.default(userAgent);
-  }
-
   return false;
 }
 
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/root.tsx
@@ -52,7 +52,7 @@ export function ErrorBoundary() {
 }
 
 function App() {
-  const { ENV } = useLoaderData();
+  const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } };
 
   return (
     <html lang="en">
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/navigate.tsx
@@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => {
 };
 
 export default function LoaderError() {
-  const data = useLoaderData();
+  const data = useLoaderData() as { test?: string };
 
   return (
     <div>
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express/package.json
@@ -3,7 +3,7 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix vite:build",
+    "build": "remix vite:build && pnpm typecheck",
     "dev": "node ./server.mjs",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "cross-env NODE_ENV=production node ./server.mjs",
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-errors.test.ts
@@ -3,7 +3,7 @@ import { waitForError } from '@sentry-internal/test-utils';
 
 test('Sends a loader error to Sentry', async ({ page }) => {
   const loaderErrorPromise = waitForError('create-remix-app-express', errorEvent => {
-    return errorEvent.exception.values[0].value === 'Loader Error';
+    return errorEvent?.exception?.values?.[0]?.value === 'Loader Error';
   });
 
   await page.goto('/loader-error');
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tests/server-transactions.test.ts
@@ -20,7 +20,7 @@ test('Sends parameterized transaction name to Sentry', async ({ page }) => {
 
 test('Sends form data with action span', async ({ page }) => {
   const formdataActionTransaction = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'action');
+    return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'action') || false;
   });
 
   await page.goto('/action-formdata');
@@ -34,31 +34,31 @@ test('Sends form data with action span', async ({ page }) => {
 
   await page.locator('button[type=submit]').click();
 
-  const actionSpan = (await formdataActionTransaction).spans.find(
+  const actionSpan = (await formdataActionTransaction)?.spans?.find(
     span => span.data && span.data['code.function'] === 'action',
   );
 
   expect(actionSpan).toBeDefined();
-  expect(actionSpan.op).toBe('action.remix');
-  expect(actionSpan.data).toMatchObject({
+  expect(actionSpan?.op).toBe('action.remix');
+  expect(actionSpan?.data).toMatchObject({
     'formData.text': 'test',
     'formData.file': 'file.txt',
   });
 });
 
 test('Sends a loader span to Sentry', async ({ page }) => {
   const loaderTransactionPromise = waitForTransaction('create-remix-app-express', transactionEvent => {
-    return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'loader');
+    return transactionEvent?.spans?.some(span => span.data && span.data['code.function'] === 'loader') || false;
   });
 
   await page.goto('/');
 
-  const loaderSpan = (await loaderTransactionPromise).spans.find(
+  const loaderSpan = (await loaderTransactionPromise)?.spans?.find(
     span => span.data && span.data['code.function'] === 'loader',
   );
 
   expect(loaderSpan).toBeDefined();
-  expect(loaderSpan.op).toBe('loader.remix');
+  expect(loaderSpan?.op).toBe('loader.remix');
 });
 
 test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
@@ -83,9 +83,8 @@ test('Propagates trace when ErrorBoundary is triggered', async ({ page }) => {
 
   const httpServerTraceId = httpServerTransaction.contexts?.trace?.trace_id;
   const httpServerSpanId = httpServerTransaction.contexts?.trace?.span_id;
-  const loaderSpanId = httpServerTransaction.spans.find(
-    span => span.data && span.data['code.function'] === 'loader',
-  )?.span_id;
+  const loaderSpanId = httpServerTransaction?.spans?.find(span => span.data && span.data['code.function'] === 'loader')
+    ?.span_id;
 
   const pageLoadTraceId = pageloadTransaction.contexts?.trace?.trace_id;
   const pageLoadSpanId = pageloadTransaction.contexts?.trace?.span_id;
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json b/dev-packages/e2e-tests/test-applications/create-remix-app-express/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "./app/**/*.ts", "./app/**/*.tsx"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx
@@ -4,6 +4,16 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
+// Extend the Window interface to include ENV
+declare global {
+  interface Window {
+    ENV: {
+      SENTRY_DSN: string;
+      [key: string]: unknown;
+    };
+  }
+}
+
 import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
 import * as Sentry from '@sentry/remix';
 import { StrictMode, startTransition, useEffect } from 'react';
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx
@@ -52,7 +52,7 @@ export function ErrorBoundary() {
 }
 
 function App() {
-  const { ENV } = useLoaderData();
+  const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } };
 
   return (
     <html lang="en">
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/routes/navigate.tsx
@@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ params: { id } }) => {
 };
 
 export default function LoaderError() {
-  const data = useLoaderData();
+  const data = useLoaderData() as { test?: string };
 
   return (
     <div>
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "remix build",
+    "build": "remix build && pnpm typecheck",
     "dev": "remix dev",
     "start": "NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build/index.js",
     "typecheck": "tsc",
@@ -12,24 +12,28 @@
   },
   "dependencies": {
     "@sentry/remix": "latest || *",
-    "@remix-run/css-bundle": "2.16.5",
-    "@remix-run/node": "2.16.5",
-    "@remix-run/react": "2.16.5",
-    "@remix-run/serve": "2.16.5",
+    "@remix-run/css-bundle": "2.16.7",
+    "@remix-run/node": "2.16.7",
+    "@remix-run/react": "2.16.7",
+    "@remix-run/serve": "2.16.7",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@playwright/test": "~1.50.0",
     "@sentry-internal/test-utils": "link:../../../test-utils",
-    "@remix-run/dev": "2.16.5",
-    "@remix-run/eslint-config": "2.16.5",
+    "@remix-run/dev": "2.16.7",
+    "@remix-run/eslint-config": "2.16.7",
     "@sentry/core": "latest || *",
-    "@types/react": "^18.0.35",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.34",
+    "@types/prop-types": "15.7.7",
     "eslint": "^8.38.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.6"
+  },
+  "resolutions": {
+    "@types/react": "18.2.22"
   },
   "volta": {
     "extends": "../../package.json"
diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/tsconfig.json
@@ -1,5 +1,6 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["remix.env.d.ts", "./app/**/*.ts", "./app/**/*.tsx"],
+  "exclude": ["node_modules", "build"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
@@ -10,6 +11,7 @@
     "target": "ES2019",
     "strict": true,
     "allowJs": true,
+    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/functions/_middleware.ts
@@ -1,12 +1,16 @@
-import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
-import { sentryPagesPlugin } from '@sentry/cloudflare';
+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 }),
+  (context: EventPluginContext<any, any, any, any>) =>
+    sentryPagesPlugin({
+      dsn: context.env.E2E_TEST_DSN,
+      tracesSampleRate: 1.0,
+    })(context),
+  createPagesFunctionHandler({build}),
 ];
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/lib/search.ts
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/root.tsx
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/_index.tsx
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx b/dev-packages/e2e-tests/test-applications/remix-hydrogen/app/routes/navigate.tsx
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json b/dev-packages/e2e-tests/test-applications/remix-hydrogen/package.json
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/server.ts
diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json b/dev-packages/e2e-tests/test-applications/remix-hydrogen/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -40,11 +40,6 @@ function isBotRequest(userAgent: string \| null) {`
`40`	`40`	`return isbotModule.isbot(userAgent);`
`41`	`41`	`}`
`42`	`42`
`43`		`- // isbot < 3.8.0`
`44`		`- if ('default' in isbotModule && typeof isbotModule.default === 'function') {`
`45`		`- return isbotModule.default(userAgent);`
`46`		`- }`
`47`		`-`
`48`	`43`	`return false;`
`49`	`44`	`}`
`50`	`45`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export function ErrorBoundary() {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`function App() {`
`55`		`- const { ENV } = useLoaderData();`
	`55`	`+ const { ENV } = useLoaderData() as { ENV: { SENTRY_DSN: string } };`
`56`	`56`
`57`	`57`	`return (`
`58`	`58`	`<html lang="en">`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "include": ["env.d.ts", "*/.ts", "*/.tsx"],`
	`2`	`+ "include": ["env.d.ts", "./app/*/.ts", "./app/*/.tsx"],`
`3`	`3`	`"compilerOptions": {`
`4`	`4`	`"lib": ["DOM", "DOM.Iterable", "ES2022"],`
`5`	`5`	`"isolatedModules": true,`