Fix middleware build result. Return middleware next when invalid result. (#6963)

* Fix middleware build result. Return middleware next when invalid result.

* Add a unit test that would have failed before previous commit.

* Copy next.js behavior.

* Add a test for invalid responses from middleware.

Co-authored-by: Leo Lamprecht <leo@vercel.com>

packages/cli/src/util/dev/server.ts

@@ -1358,6 +1358,7 @@ export default class DevServer {
       this.cwd,
       this.output
     );
+    try {
       for (let plugin of devMiddlewarePlugins) {
         const result = await plugin.plugin.runDevMiddleware(req, res, this.cwd);
         if (result.finished) {
@@ -1365,6 +1366,12 @@ export default class DevServer {
         }
       }
       return { finished: false };
+    } catch (e) {
+      return {
+        finished: true,
+        error: e,
+      };
+    }
   };
 
   /**

packages/cli/test/fixtures/unit/edge-middleware-invalid-response/_middleware.js

@@ -0,0 +1,3 @@
+export default function () {
+  return 'freecandy';
+}

packages/cli/test/util/dev/server.test.ts

@@ -374,4 +374,15 @@ describe('DevServer', () => {
       );
     })
   );
+
+  it(
+    'should render an error page when the middleware returns not a Response',
+    testFixture('edge-middleware-invalid-response', async server => {
+      const response = await fetch(`${server.address}/index.html`);
+      const body = await response.text();
+      expect(body).toStrictEqual(
+        'A server error has occurred\n\nEDGE_FUNCTION_INVOCATION_FAILED\n'
+      );
+    })
+  );
 });

packages/middleware/src/entries.js

@@ -3,13 +3,16 @@ _ENTRIES = typeof _ENTRIES === 'undefined' ? {} : _ENTRIES;
 _ENTRIES['middleware_pages/_middleware'] = {
   default: async function (ev) {
     const result = await middleware.default(ev.request, ev);
-    if (result instanceof Response) {
     return {
       promise: Promise.resolve(),
       waitUntil: Promise.resolve(),
-        response: result,
+      response:
+        result ||
+        new Response(null, {
+          headers: {
+            'x-middleware-next': 1,
+          },
+        }),
     };
-    }
-    return result;
   },
 };

packages/middleware/test/build.test.ts

@@ -1,8 +1,19 @@
 import { join } from 'path';
 import { promises as fsp } from 'fs';
 import { build } from '../src';
+import { Response } from 'node-fetch';
 
 describe('build()', () => {
+  beforeEach(() => {
+    //@ts-ignore
+    global.Response = Response;
+  });
+  afterEach(() => {
+    //@ts-ignore
+    delete global.Response;
+    //@ts-ignore
+    delete global._ENTRIES;
+  });
   it('should build simple middleware', async () => {
     const fixture = join(__dirname, 'fixtures/simple');
     await build({
@@ -17,8 +28,30 @@ describe('build()', () => {
     );
     expect(middlewareManifest).toMatchSnapshot();
 
+    const outputFile = join(fixture, '.output/server/pages/_middleware.js');
+    expect(await fsp.stat(outputFile)).toBeTruthy();
+
+    require(outputFile);
+    //@ts-ignore
+    const middleware = global._ENTRIES['middleware_pages/_middleware'].default;
+    expect(typeof middleware).toStrictEqual('function');
+    const handledResponse = await middleware({
+      request: {
+        url: 'http://google.com',
+      },
+    });
+    const unhandledResponse = await middleware({
+      request: {
+        url: 'literallyanythingelse',
+      },
+    });
+    expect(String(handledResponse.response.body)).toEqual('Hi from the edge!');
     expect(
-      await fsp.stat(join(fixture, '.output/server/pages/_middleware.js'))
-    ).toBeTruthy();
+      (handledResponse.response as Response).headers.get('x-middleware-next')
+    ).toEqual(null);
+    expect(unhandledResponse.response.body).toEqual(null);
+    expect(
+      (unhandledResponse.response as Response).headers.get('x-middleware-next')
+    ).toEqual('1');
   });
 });

packages/middleware/test/fixtures/simple/_middleware.js

@@ -1 +1,5 @@
-export default () => new Response('Hi from the edge!');
+export default req => {
+  if (req.url === 'http://google.com') {
+    return new Response('Hi from the edge!');
+  }
+};