fix(middleware): scope Rozenite middleware to /rozenite (#230)

## Summary
- scope Rozenite's middleware to `/rozenite` instead of wrapping the
full Metro/Re.Pack middleware chain
- add a guarded middleware wrapper that stops propagation when a
delegated handler incorrectly calls `next()` after ending the response
- cover the scoped routing and `ERR_HTTP_HEADERS_SENT` regression with
middleware tests

## Testing
- pnpm --filter @rozenite/middleware test
- pnpm --filter @rozenite/middleware typecheck
- pnpm --filter @rozenite/metro typecheck
- pnpm --filter @rozenite/repack typecheck
- pnpm --filter @rozenite/middleware lint
- pnpm --filter @rozenite/metro lint
- pnpm --filter @rozenite/repack lint

Fixes #229

Author: V3RON

.changeset/bright-crabs-joke.md

@@ -0,0 +1,5 @@
+---
+'@rozenite/middleware': patch
+---
+
+Fix an issue where opening a stack frame from Rozenite could land in the wrong place.

packages/metro/src/index.ts

@@ -1,5 +1,12 @@
 import { type MetroConfig } from '@react-native/metro-config';
-import { initializeRozenite, type RozeniteConfig } from '@rozenite/middleware';
+import {
+  createScopedMiddleware,
+  initializeRozenite,
+  type MiddlewareHandler,
+  type MiddlewareNext,
+  type MiddlewareRequest,
+  type RozeniteConfig,
+} from '@rozenite/middleware';
 import { logger } from '@rozenite/tools';
 import path from 'node:path';
 import { isBundling } from './is-bundling.js';
@@ -19,24 +26,24 @@ export type RozeniteMetroConfig<TMetroConfig = unknown> = Omit<
    * This option allows you to modify the Metro config in a way that is safe to do when bundling.
    */
   enhanceMetroConfig?: (
-    config: TMetroConfig
+    config: TMetroConfig,
   ) => Promise<TMetroConfig> | TMetroConfig;
 };
 
 export const withRozenite = <T extends MetroConfig>(
   config: T | Promise<T>,
-  options: RozeniteMetroConfig<T> = {}
-): () => Promise<T> => {
+  options: RozeniteMetroConfig<T> = {},
+): (() => Promise<T>) => {
   return async () => {
     const resolvedConfig = await config;
     const projectRoot = resolvedConfig.projectRoot ?? process.cwd();
 
     if (options.enabled === undefined) {
       logger.info(
-        'Rozenite will no longer be enabled by default in the next version.'
+        'Rozenite will no longer be enabled by default in the next version.',
       );
       logger.info(
-        'To continue using Rozenite, please set `enabled` in the options.'
+        'To continue using Rozenite, please set `enabled` in the options.',
       );
       logger.info('Remember to make it conditional to avoid bundling issues.');
 
@@ -49,12 +56,11 @@ export const withRozenite = <T extends MetroConfig>(
       return resolvedConfig;
     }
 
-    const { devModePackage, middleware: rozeniteMiddleware } = initializeRozenite(
-      {
+    const { devModePackage, middleware: rozeniteMiddleware } =
+      initializeRozenite({
         projectRoot,
         ...options,
-      }
-    );
+      });
 
     const rozeniteMetroConfig = {
       ...resolvedConfig,
@@ -73,12 +79,12 @@ export const withRozenite = <T extends MetroConfig>(
               // Rozenite package should use the same versions of React and React Native as the app.
               // Using dirname as sometimes developers use deep imports for react-native.
               react: path.dirname(
-                require.resolve('react', { paths: [projectRoot] })
+                require.resolve('react', { paths: [projectRoot] }),
               ),
               'react-native': path.dirname(
                 require.resolve('react-native', {
                   paths: [projectRoot],
-                })
+                }),
               ),
             }
           : resolvedConfig.resolver?.extraNodeModules,
@@ -87,7 +93,8 @@ export const withRozenite = <T extends MetroConfig>(
           // This is currently the only module that we need to mock, but it may change in the future.
           if (
             platform === 'web' &&
-            moduleName === 'react-native/Libraries/WebSocket/WebSocketInterceptor'
+            moduleName ===
+              'react-native/Libraries/WebSocket/WebSocketInterceptor'
           ) {
             return {
               type: 'empty',
@@ -98,7 +105,7 @@ export const withRozenite = <T extends MetroConfig>(
             resolvedConfig.resolver?.resolveRequest?.(
               context,
               moduleName,
-              platform
+              platform,
             ) ?? context.resolveRequest(context, moduleName, platform)
           );
         },
@@ -107,21 +114,41 @@ export const withRozenite = <T extends MetroConfig>(
         ...resolvedConfig.server,
         enhanceMiddleware: (metroMiddleware, server) => {
           const prevMiddleware =
-            resolvedConfig.server?.enhanceMiddleware?.(metroMiddleware, server) ??
-            metroMiddleware;
+            resolvedConfig.server?.enhanceMiddleware?.(
+              metroMiddleware,
+              server,
+            ) ?? metroMiddleware;
+          const delegatedMetroMiddleware = prevMiddleware as MiddlewareHandler;
+
+          const scopedRozeniteMiddleware = createScopedMiddleware(
+            '/rozenite',
+            rozeniteMiddleware,
+          );
 
-          return rozeniteMiddleware.use(prevMiddleware);
+          return (
+            req: MiddlewareRequest,
+            res: Parameters<MiddlewareHandler>[1],
+            next: MiddlewareNext,
+          ) => {
+            scopedRozeniteMiddleware(req, res, (error) => {
+              if (error) {
+                next(error);
+                return;
+              }
+
+              delegatedMetroMiddleware(req, res, next);
+            });
+          };
         },
       },
     } satisfies MetroConfig;
 
     if (options.enhanceMetroConfig) {
-      const enhancedConfig = await options.enhanceMetroConfig(
-        rozeniteMetroConfig
-      );
+      const enhancedConfig =
+        await options.enhanceMetroConfig(rozeniteMetroConfig);
       return enhancedConfig;
     }
 
     return rozeniteMetroConfig;
-  }
+  };
 };

packages/middleware/src/__tests__/middleware.test.ts

@@ -1,5 +1,76 @@
-import { describe, expect, it } from 'vitest';
+import { createServer, get } from 'node:http';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { getNormalizedRequestUrl } from '../middleware.js';
+import {
+  createScopedMiddleware,
+  type MiddlewareHandler,
+} from '../scoped-middleware.js';
+
+let activeServer: ReturnType<typeof createServer> | null = null;
+
+afterEach(async () => {
+  await new Promise<void>((resolve, reject) => {
+    if (!activeServer) {
+      resolve();
+      return;
+    }
+
+    activeServer.close((error) => {
+      activeServer = null;
+
+      if (error) {
+        reject(error);
+        return;
+      }
+
+      resolve();
+    });
+  });
+});
+
+const runRequest = async (
+  middleware: MiddlewareHandler,
+  url: string,
+): Promise<{ status: number; body: string }> => {
+  activeServer = createServer((req, res) => {
+    middleware(req, res, () => {
+      res.statusCode = 404;
+      res.end('not found');
+    });
+  });
+
+  await new Promise<void>((resolve) => {
+    activeServer!.listen(0, resolve);
+  });
+
+  const address = activeServer.address();
+
+  if (!address || typeof address === 'string') {
+    throw new Error('Expected an ephemeral TCP port');
+  }
+
+  return new Promise((resolve, reject) => {
+    const request = get(
+      `http://127.0.0.1:${address.port}${url}`,
+      (response) => {
+        let body = '';
+
+        response.setEncoding('utf8');
+        response.on('data', (chunk) => {
+          body += chunk;
+        });
+        response.on('end', () => {
+          resolve({
+            status: response.statusCode ?? 0,
+            body,
+          });
+        });
+      },
+    );
+
+    request.on('error', reject);
+  });
+};
 
 describe('middleware request normalization', () => {
   it('preserves agent routes under /rozenite', () => {
@@ -20,3 +91,50 @@ describe('middleware request normalization', () => {
     );
   });
 });
+
+describe('scoped middleware', () => {
+  it('delegates only requests within the configured prefix', async () => {
+    const handler = vi.fn<MiddlewareHandler>((req, res) => {
+      res.end(req.url);
+    });
+    const middleware = createScopedMiddleware('/rozenite', handler);
+
+    const insideResponse = await runRequest(
+      middleware,
+      '/rozenite/plugins/demo/index.js',
+    );
+    const outsideResponse = await runRequest(middleware, '/open-stack-frame');
+
+    expect(insideResponse).toEqual({
+      status: 200,
+      body: '/plugins/demo/index.js',
+    });
+    expect(outsideResponse).toEqual({
+      status: 404,
+      body: 'not found',
+    });
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it('stops propagation when delegated middleware ends the response and still calls next', async () => {
+    const downstream = vi.fn();
+    const buggyMiddleware = createScopedMiddleware(
+      '/rozenite',
+      (_req, res, next) => {
+        res.statusCode = 204;
+        res.end();
+        next();
+      },
+    );
+
+    const response = await runRequest((req, res, next) => {
+      buggyMiddleware(req, res, () => {
+        downstream();
+        next();
+      });
+    }, '/rozenite/rn_fusebox.html');
+
+    expect(response).toEqual({ status: 204, body: '' });
+    expect(downstream).not.toHaveBeenCalled();
+  });
+});

packages/middleware/src/index.ts

@@ -4,6 +4,7 @@ import { getMiddleware } from './middleware.js';
 import { logger } from './logger.js';
 import { getPackageJSON } from './package-json.js';
 import { getInstalledPlugins } from './auto-discovery.js';
+import { createScopedMiddleware } from './scoped-middleware.js';
 import type { RozeniteConfig } from './config.js';
 import { getDevModePackage } from './dev-mode.js';
 import { verifyReactNativeVersion } from './verify-react-native-version.js';
@@ -17,6 +18,13 @@ export type RozeniteInstance = {
   dispose: () => Promise<void>;
 };
 
+export { createScopedMiddleware };
+export type {
+  MiddlewareHandler,
+  MiddlewareNext,
+  MiddlewareRequest,
+} from './scoped-middleware.js';
+
 export const initializeRozenite = (
   options: RozeniteConfig,
 ): RozeniteInstance => {

packages/middleware/src/scoped-middleware.ts

@@ -0,0 +1,68 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+
+export type MiddlewareRequest = IncomingMessage & {
+  url?: string;
+};
+
+export type MiddlewareNext = (error?: unknown) => void;
+
+export type MiddlewareHandler = (
+  req: MiddlewareRequest,
+  res: ServerResponse,
+  next: MiddlewareNext,
+) => void;
+
+const matchesPrefix = (url: string, prefix: string): boolean => {
+  return url === prefix || url.startsWith(prefix + '/');
+};
+
+const withFinishedResponseGuard = (
+  middleware: MiddlewareHandler,
+): MiddlewareHandler => {
+  return (req, res, next) => {
+    middleware(req, res, (error) => {
+      if (error) {
+        next(error);
+        return;
+      }
+
+      // Some upstream middleware incorrectly calls next() after it already ended
+      // the response. Stop the chain here so later middleware does not try to
+      // write headers again and crash with ERR_HTTP_HEADERS_SENT.
+      if (res.headersSent || res.writableEnded) {
+        return;
+      }
+
+      next();
+    });
+  };
+};
+
+export const createScopedMiddleware = (
+  prefix: string,
+  middleware: MiddlewareHandler,
+): MiddlewareHandler => {
+  const guardedMiddleware = withFinishedResponseGuard(middleware);
+
+  return (req, res, next) => {
+    if (!req.url || !matchesPrefix(req.url, prefix)) {
+      next();
+      return;
+    }
+
+    const originalUrl = req.url;
+    const scopedUrl = req.url.slice(prefix.length) || '/';
+    req.url = scopedUrl.startsWith('/') ? scopedUrl : '/' + scopedUrl;
+
+    guardedMiddleware(req, res, (error) => {
+      req.url = originalUrl;
+
+      if (error) {
+        next(error);
+        return;
+      }
+
+      next();
+    });
+  };
+};