Return reply for Fastify adapter

Author: rustworthy

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

@@ -1,34 +1,33 @@
-# Welcome to Remix + Vite!
+# Welcome to Remix + Vite + Fastify + Sentry!
 
-📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite)
+for details on supported features.
 
 ## Development
 
 Run the Express server with Vite dev middleware:
 
-```shellscript
-npm run dev
+```sh
+pnpm dev
 ```
 
 ## Deployment
 
 First, build your app for production:
 
 ```sh
-npm run build
+pnpm build
 ```
 
 Then run the app in production mode:
 
 ```sh
-npm start
+pnpm start
 ```
 
 Now you'll need to pick a host to deploy it to.
 
-### DIY
-
-If you're familiar with deploying Express applications you should be right at home. Just make sure to deploy the output of `npm run build`
+## Sentry Events Inspection
 
-- `build/server`
-- `build/client`
+After you have launched the app with `pnpm dev:events`, visit the index page and open your browser's network tab. You
+will find there an event sent to `Sentry` and correlated server event will be written to `tests/events` directory.

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

@@ -11,18 +11,21 @@
     "start": "cross-env NODE_ENV=production node ./server.js",
     "typecheck": "tsc",
     "test:build": "pnpm install && npx playwright install && pnpm build",
-    "test:assert": "pnpm playwright test"
+    "test:assert": "FASTIFY_LOG_LEVEL=warn pnpm playwright test"
   },
   "dependencies": {
     "@remix-run/express": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
     "@sentry/remix": "latest || *",
-    "compression": "^1.7.4",
+    "fastify": "^4.26.2",
+    "@fastify/compress": "^7.0.0",
+    "@fastify/middie": "^8.3.0",
+    "@fastify/multipart": "^8.2.0",
+    "@fastify/static": "^7.0.1",
+    "@mcansh/remix-fastify": "^3.2.2",
     "dotenv": "^16.4.5",
-    "express": "^4.18.2",
     "isbot": "^4.1.0",
-    "morgan": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/server.js

@@ -1,13 +1,23 @@
-import { createRequestHandler } from '@remix-run/express';
-import { wrapExpressCreateRequestHandler } from '@sentry/remix';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { wrapFastifyCreateRequestHandler } from '@sentry/remix';
 import { installGlobals } from '@remix-run/node';
-import compression from 'compression';
-import express from 'express';
-import morgan from 'morgan';
+import { createRequestHandler } from '@mcansh/remix-fastify';
+import fastify from 'fastify';
+import compression from '@fastify/compress';
+import middie from '@fastify/middie';
+import multipart from '@fastify/multipart';
+import serveStatic from '@fastify/static';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PORT = Number(process.env.PORT || '3000');
+const FASTIFY_LOG_LEVEL = process.env.FASTIFY_LOG_LEVEL || 'info';
 
 installGlobals();
 
-const withSentryCreateRequestHandler = wrapExpressCreateRequestHandler(createRequestHandler);
+const withSentryCreateRequestHandler = wrapFastifyCreateRequestHandler(createRequestHandler);
 
 const viteDevServer =
   process.env.NODE_ENV === 'production'
@@ -24,29 +34,48 @@ const remixHandler = withSentryCreateRequestHandler({
     : await import('./build/server/index.js'),
 });
 
-const app = express();
-
-app.use(compression());
-
-// http://expressjs.com/en/advanced/best-practice-security.html#at-a-minimum-disable-x-powered-by-header
-app.disable('x-powered-by');
+const app = fastify({ logger: { level: FASTIFY_LOG_LEVEL } });
+await app.register(middie);
+await app.register(multipart);
+await app.register(compression, { global: true });
 
-// handle asset requests
 if (viteDevServer) {
   app.use(viteDevServer.middlewares);
 } else {
-  // Vite fingerprints its assets so we can cache forever.
-  app.use('/assets', express.static('build/client/assets', { immutable: true, maxAge: '1y' }));
+  // options borrowed from:
+  // https://github.com/mcansh/remix-fastify/blob/main/examples/vite/server.js
+  // Remix fingerprints its assets so we can cache forever.
+  await app.register(serveStatic, {
+    root: path.join(__dirname, 'build', 'client', 'assets'),
+    prefix: '/assets',
+    wildcard: true,
+    decorateReply: false,
+    cacheControl: true,
+    dotfiles: 'allow',
+    etag: true,
+    maxAge: '1y',
+    immutable: true,
+    serveDotFiles: true,
+    lastModified: true,
+  });
+  await app.register(serveStatic, {
+    root: path.join(__dirname, 'build', 'client'),
+    prefix: '/',
+    wildcard: false,
+    cacheControl: true,
+    dotfiles: 'allow',
+    etag: true,
+    maxAge: '1h',
+    serveDotFiles: true,
+    lastModified: true,
+  });
 }
 
-// Everything else (like favicon.ico) is cached for an hour. You may want to be
-// more aggressive with this caching.
-app.use(express.static('build/client', { maxAge: '1h' }));
-
-app.use(morgan('tiny'));
-
-// handle SSR requests
 app.all('*', remixHandler);
 
-const port = process.env.PORT || 3000;
-app.listen(port, () => console.log(`Express server listening at http://localhost:${port}`));
+app.listen({ port: PORT }, err => {
+  if (err) {
+    console.err(err);
+    process.exit(1);
+  }
+});

dev-packages/e2e-tests/test-applications/create-remix-app-fastify-vite/tests/behaviour-server.test.ts

@@ -55,7 +55,6 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
         .toBe(200);
     }),
   );
-
   expect(pageLoadTransactionEvent).not.toBeNull();
 
   let serverEventIds = null;
@@ -69,6 +68,7 @@ test('Sends two linked transactions (server & client) to Sentry', async ({ page
   }).toBe(true)
   expect(serverEventIds).not.toBeNull();
 
+  console.log(`Polling for server-side eventIds: ${JSON.stringify(serverEventIds)}`);
   // we could have read the event details from the file (since we are
   // dumping event without any mutations before sending it to Sentry),
   // but let's following the practice in other test applications and

packages/remix/src/utils/serverAdapters/shared.ts

@@ -114,7 +114,7 @@ async function finishSentryProcessing(res: AugmentedResponse): Promise<void> {
 
 function startRequestHandlerTransactionWithRoutes(
   this: unknown,
-  handler: GenericRequestHandler,
+  handler: GenericRequestHandler<SupportedResponse>,
   framework: SupportedFramework,
   routes: ServerRoute[],
   req: SupportedRequest,
@@ -144,22 +144,20 @@ function startRequestHandlerTransactionWithRoutes(
 }
 
 export const wrapRequestHandler = <NextFn>(
-  handler: GenericRequestHandler,
+  handler: GenericRequestHandler<SupportedResponse>,
   framework: SupportedFramework,
   readyBuildOrGetBuildFn: ServerBuild | (() => Promise<ServerBuild> | ServerBuild),
-): GenericRequestHandler => {
+): GenericRequestHandler<SupportedResponse> => {
   let routes: ServerRoute[];
 
-  return async function (this: unknown, req: PolymorphicRequest, res: SupportedResponse, next: NextFn): Promise<void> {
+  return async function (this: unknown, req: PolymorphicRequest, res: SupportedResponse, next: NextFn): Promise<SupportedResponse | null> {
+    const isExpress = framework === SupportedFramework.Express;
+    const isFastify = framework === SupportedFramework.Fastify;
     await withIsolationScope(async isolationScope => {
-      if (framework === SupportedFramework.Express) {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        (res as ExpressResponse).end = wrapEndMethod((res as ExpressResponse).end);
-      } else if (framework === SupportedFramework.Fastify) {
-        (res as FastifyReply).send = wrapEndMethod((res as FastifyReply).send);
-      } else {
-        throw new Error('Unreachable');
-      }
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      if (isExpress) (res as ExpressResponse).end = wrapEndMethod((res as ExpressResponse).end)
+      else if (isFastify) (res as FastifyReply).send = wrapEndMethod((res as FastifyReply).send)
+      else throw new Error('Unreachable');
 
       const request = extractRequestData(req);
 
@@ -190,18 +188,22 @@ export const wrapRequestHandler = <NextFn>(
       routes = createRoutes(build.routes);
       return startRequestHandlerTransactionWithRoutes.call(this, handler, framework, routes, req, res, next, url);
     });
+    // Fastify wants us to _return_ the "reply" instance
+    // in case we are sending a response ourselves, which
+    // we _are_ doing by means of`reply.send(data)`.
+    return isFastify ? res : null;
   };
 };
 
 export const prepareWrapCreateRequestHandler = (forFramework: SupportedFramework) =>
   function wrapCreateRequestHandler(
-    createRequestHandler: CreateGenericRequestHandler,
-  ): (this: unknown, options: CreateRequestHandlerOptions) => GenericRequestHandler {
-    return function (this: unknown, opts: CreateRequestHandlerOptions): GenericRequestHandler {
+    createRequestHandler: CreateGenericRequestHandler<SupportedResponse>,
+  ): (this: unknown, options: CreateRequestHandlerOptions) => GenericRequestHandler<SupportedResponse> {
+    return function (this: unknown, opts: CreateRequestHandlerOptions): GenericRequestHandler<SupportedResponse> {
       if (!opts.getLoadContext) opts['getLoadContext'] = () => ({});
       fill(opts, 'getLoadContext', wrapGetLoadContext(forFramework));
       const build = typeof opts.build === 'function' ? wrapBuildFn(opts.build) : instrumentBuild(opts.build, true);
-      const handler: GenericRequestHandler = createRequestHandler.call(this, { ...opts, build });
+      const handler: GenericRequestHandler<SupportedResponse> = createRequestHandler.call(this, { ...opts, build });
       return wrapRequestHandler(handler, forFramework, build);
     };
   };

packages/remix/src/utils/vendor/types.ts

@@ -237,9 +237,9 @@ export interface AssetsManifest {
   version: string;
 }
 
-export type GenericRequestHandler = (req: any, res: any, next: any) => Promise<void>;
+export type GenericRequestHandler<R> = (req: any, res: R, next: any) => Promise<R | null>;
 
-export type CreateGenericRequestHandler = (this: unknown, options: any) => GenericRequestHandler;
+export type CreateGenericRequestHandler<R> = (this: unknown, options: any) => GenericRequestHandler<R>;
 
 export interface CreateRequestHandlerOptions {
   build: ServerBuild | (() => ServerBuild) | (() => Promise<ServerBuild>);