Add e2e tests

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/package.json

@@ -49,7 +49,7 @@
     "vite-tsconfig-paths": "^4.2.1",
     "ts-node": "10.9.1"
   },
-  "engines": {
-    "node": ">=18.0.0"
+  "volta": {
+    "extends": "../../package.json"
   }
 }

dev-packages/e2e-tests/test-applications/create-remix-app-express/README.md

@@ -1,9 +1,3 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
 import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
 import * as Sentry from '@sentry/remix';
 import { StrictMode, startTransition, useEffect } from 'react';
@@ -24,6 +18,7 @@ Sentry.init({
   tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
   replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
   replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  tunnel: 'http://localhost:3031/', // proxy server
 });
 
 Sentry.addEventProcessor(event => {

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/entry.client.tsx

@@ -1,32 +1,26 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
+import * as Sentry from '@sentry/remix';
+import * as isbotModule from 'isbot';
+
+Sentry.init({
+  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: process.env.E2E_TEST_DSN,
+  tunnel: 'http://localhost:3031/', // proxy server
+  sendDefaultPii: true, // Testing the FormData
+});
 
 import { PassThrough } from 'node:stream';
 
 import type { AppLoadContext, EntryContext } from '@remix-run/node';
 import { createReadableStreamFromReadable } from '@remix-run/node';
 import { installGlobals } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
-import * as Sentry from '@sentry/remix';
-import { isbot } from 'isbot';
 import { renderToPipeableStream } from 'react-dom/server';
 
 installGlobals();
 
 const ABORT_DELAY = 5_000;
 
-Sentry.init({
-  environment: 'qa', // dynamic sampling bias to keep transactions
-  dsn: process.env.E2E_TEST_DSN,
-  // Performance Monitoring
-  tunnel: 'http://localhost:3031/', // proxy server
-  tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
-  sendDefaultPii: true, // Testing the FormData
-});
-
 export const handleError = Sentry.wrapRemixHandleError;
 
 export default function handleRequest(
@@ -36,11 +30,32 @@ export default function handleRequest(
   remixContext: EntryContext,
   loadContext: AppLoadContext,
 ) {
-  return isbot(request.headers.get('user-agent'))
+  return isBotRequest(request.headers.get('user-agent'))
     ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
     : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
 }
 
+// We have some Remix apps in the wild already running with isbot@3 so we need
+// to maintain backwards compatibility even though we want new apps to use
+// isbot@4.  That way, we can ship this as a minor Semver update to @remix-run/dev.
+function isBotRequest(userAgent: string | null) {
+  if (!userAgent) {
+    return false;
+  }
+
+  // isbot >= 3.8.0, >4
+  if ('isbot' in isbotModule && typeof isbotModule.isbot === 'function') {
+    return isbotModule.isbot(userAgent);
+  }
+
+  // isbot < 3.8.0
+  if ('default' in isbotModule && typeof isbotModule.default === 'function') {
+    return isbotModule.default(userAgent);
+  }
+
+  return false;
+}
+
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,

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

@@ -1,7 +1,13 @@
-import { Link } from '@remix-run/react';
+import { Link, useSearchParams } from '@remix-run/react';
 import * as Sentry from '@sentry/remix';
 
 export default function Index() {
+  const [searchParams] = useSearchParams();
+
+  if (searchParams.get('tag')) {
+    Sentry.setTag('sentry_test', searchParams.get('tag'));
+  }
+
   return (
     <div>
       <input

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/_index.tsx

@@ -1,21 +1,21 @@
+import { json } from '@remix-run/node';
 import { Form } from '@remix-run/react';
 
-export default function Index() {
+export async function action({ request }) {
+  const formData = await request.formData();
+
+  console.log('form data', formData.get('text'), formData.get('file'));
+
+  return json({ message: 'success' });
+}
+
+export default function ActionFormData() {
   return (
-    <Form method="POST">
-      <input name="test" />
+    <Form method="post" action="/action-formdata" navigate={false}>
+      <input type="text" name="text" />
       <input type="file" name="file" />
-      <input type="file" multiple name="multifile" />
 
       <button type="submit">submit</button>
     </Form>
   );
 }
-
-export async function action({ request }) {
-  const formData = await request.formData();
-
-  console.log('form data', formData.get('test'), formData.get('file'));
-
-  return new Response('ok');
-}

dev-packages/e2e-tests/test-applications/create-remix-app-express/app/routes/action-formdata.tsx

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
 /// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />