fix(edge): error handling for edge route and middleware is inconsistent

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -380,7 +380,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`,
         }
       }
     })
-    registerUnsupportedApiHooks(parser, compilation)
+    if (!dev) {
+      // do not issue compilation warning on dev: invoking code will provide details
+      registerUnsupportedApiHooks(parser, compilation)
+    }
   }
 }
 
@@ -445,7 +448,7 @@ function getExtractMetadata(params: {
 
           compilation.errors.push(
             buildWebpackError({
-              message: `Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Middleware ${entryName}${
+              message: `Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime ${
                 typeof buildInfo.usingIndirectEval !== 'boolean'
                   ? `\nUsed by ${Array.from(buildInfo.usingIndirectEval).join(
                       ', '

packages/next/client/dev/error-overlay/format-webpack-messages.js

@@ -44,7 +44,7 @@ function formatMessage(message, verbose) {
       message.moduleTrace &&
       message.moduleTrace.filter(
         (trace) =>
-          !/next-(middleware|client-pages|flight-(client|server))-loader\.js/.test(
+          !/next-(middleware|client-pages|edge-function|flight-(client|server))-loader\.js/.test(
             trace.originName
           )
       )

packages/next/server/dev/next-dev-server.ts

@@ -13,7 +13,6 @@ import type { RoutingItem } from '../base-server'
 
 import crypto from 'crypto'
 import fs from 'fs'
-import chalk from 'next/dist/compiled/chalk'
 import { Worker } from 'next/dist/compiled/jest-worker'
 import findUp from 'next/dist/compiled/find-up'
 import { join as pathJoin, relative, resolve as pathResolve, sep } from 'path'
@@ -714,7 +713,12 @@ export default class DevServer extends Server {
     page: string
   }) {
     try {
-      return super.runEdgeFunction(params)
+      return super.runEdgeFunction({
+        ...params,
+        onWarning: (warn) => {
+          this.logErrorWithOriginalStack(warn, 'warning')
+        },
+      })
     } catch (error) {
       if (error instanceof DecodeError) {
         throw error
@@ -797,7 +801,9 @@ export default class DevServer extends Server {
         const frames = parseStack(err.stack!)
         const frame = frames.find(
           ({ file }) =>
-            !file?.startsWith('eval') && !file?.includes('web/adapter')
+            !file?.startsWith('eval') &&
+            !file?.includes('web/adapter') &&
+            !file?.includes('sandbox/context')
         )!
 
         if (frame.lineNumber && frame?.file) {
@@ -838,12 +844,9 @@ export default class DevServer extends Server {
               `${file} (${lineNumber}:${column}) @ ${methodName}`
             )
             if (src === 'edge-server') {
-              console[type === 'warning' ? 'warn' : 'error'](
-                `${(type === 'warning' ? chalk.yellow : chalk.red)(
-                  err.name
-                )}: ${err.message}`
-              )
-            } else if (type === 'warning') {
+              err = err.message
+            }
+            if (type === 'warning') {
               Log.warn(err)
             } else if (type) {
               Log.error(`${type}:`, err)

packages/next/server/next-server.ts

@@ -1247,12 +1247,7 @@ export default class NextNodeServer extends BaseServer {
             body: originalBody?.cloneBodyStream(),
           },
           useCache: !this.nextConfig.experimental.runtime,
-          onWarning: (warning: Error) => {
-            if (params.onWarning) {
-              warning.message += ` "./${middlewareInfo.name}"`
-              params.onWarning(warning)
-            }
-          },
+          onWarning: params.onWarning,
         })
 
         for (let [key, value] of result.response.headers) {
@@ -1531,6 +1526,7 @@ export default class NextNodeServer extends BaseServer {
     query: ParsedUrlQuery
     params: Params | undefined
     page: string
+    onWarning?: (warning: Error) => void
   }): Promise<FetchEventResult | null> {
     let middlewareInfo: ReturnType<typeof this.getEdgeFunctionInfo> | undefined
 
@@ -1584,12 +1580,7 @@ export default class NextNodeServer extends BaseServer {
             : requestToBodyStream(nodeReq.originalRequest),
       },
       useCache: !this.nextConfig.experimental.runtime,
-      onWarning: (_warning: Error) => {
-        // if (params.onWarning) {
-        //   warning.message += ` "./${middlewareInfo.name}"`
-        //   params.onWarning(warning)
-        // }
-      },
+      onWarning: params.onWarning,
     })
 
     params.res.statusCode = result.response.status

packages/next/server/web/sandbox/context.ts

@@ -120,7 +120,7 @@ async function createModuleContext(options: ModuleContextOptions) {
         if (!warnedEvals.has(key)) {
           const warning = getServerError(
             new Error(
-              `Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware`
+              `Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Edge Runtime`
             ),
             'edge-server'
           )
@@ -137,7 +137,7 @@ async function createModuleContext(options: ModuleContextOptions) {
           const key = fn.toString()
           if (!warnedWasmCodegens.has(key)) {
             const warning = getServerError(
-              new Error(`Dynamic WASM code generation (e. g. 'WebAssembly.compile') not allowed in Middleware.
+              new Error(`Dynamic WASM code generation (e. g. 'WebAssembly.compile') not allowed in Edge Runtime.
 Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation`),
               'edge-server'
             )
@@ -164,7 +164,7 @@ Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation
           const key = fn.toString()
           if (instantiatedFromBuffer && !warnedWasmCodegens.has(key)) {
             const warning = getServerError(
-              new Error(`Dynamic WASM code generation ('WebAssembly.instantiate' with a buffer parameter) not allowed in Middleware.
+              new Error(`Dynamic WASM code generation ('WebAssembly.instantiate' with a buffer parameter) not allowed in Edge Runtime.
 Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation`),
               'edge-server'
             )
@@ -240,7 +240,7 @@ Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation
       }
 
       for (const name of EDGE_UNSUPPORTED_NODE_APIS) {
-        addStub(context, name, options)
+        addStub(context, name)
       }
 
       Object.assign(context, wasm)
@@ -285,9 +285,7 @@ function buildEnvironmentVariablesFrom(
   return env
 }
 
-function createProcessPolyfill(
-  options: Pick<ModuleContextOptions, 'env' | 'onWarning'>
-) {
+function createProcessPolyfill(options: Pick<ModuleContextOptions, 'env'>) {
   const env = buildEnvironmentVariablesFrom(options.env)
 
   const processPolyfill = { env }
@@ -296,8 +294,13 @@ function createProcessPolyfill(
     if (key === 'env') continue
     Object.defineProperty(processPolyfill, key, {
       get() {
-        emitWarning(`process.${key}`, options)
-        return overridenValue[key]
+        if (overridenValue[key]) {
+          return overridenValue[key]
+        }
+        if (typeof (process as any)[key] === 'function') {
+          return () => throwUnsupportedAPIError(`process.${key}`)
+        }
+        return undefined
       },
       set(value) {
         overridenValue[key] = value
@@ -308,35 +311,23 @@ function createProcessPolyfill(
   return processPolyfill
 }
 
-const warnedAlready = new Set<string>()
-
-function addStub(
-  context: Primitives,
-  name: string,
-  contextOptions: Pick<ModuleContextOptions, 'onWarning'>
-) {
+function addStub(context: Primitives, name: string) {
   Object.defineProperty(context, name, {
     get() {
-      emitWarning(name, contextOptions)
-      return undefined
+      return function () {
+        throwUnsupportedAPIError(name)
+      }
     },
     enumerable: false,
   })
 }
 
-function emitWarning(
-  name: string,
-  contextOptions: Pick<ModuleContextOptions, 'onWarning'>
-) {
-  if (!warnedAlready.has(name)) {
-    const warning =
-      new Error(`A Node.js API is used (${name}) which is not supported in the Edge Runtime.
+function throwUnsupportedAPIError(name: string) {
+  const error =
+    new Error(`A Node.js API is used (${name}) which is not supported in the Edge Runtime.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
-    warning.name = 'NodejsRuntimeApiInMiddlewareWarning'
-    contextOptions.onWarning(warning)
-    console.warn(warning.message)
-    warnedAlready.add(name)
-  }
+  decorateServerError(error, 'edge-server')
+  throw error
 }
 
 function decorateUnhandledError(error: any) {

packages/next/server/web/sandbox/sandbox.ts

@@ -8,7 +8,7 @@ export const ErrorSource = Symbol('SandboxError')
 type RunnerFn = (params: {
   name: string
   env: string[]
-  onWarning: (warn: Error) => void
+  onWarning?: (warn: Error) => void
   paths: string[]
   request: RequestData
   useCache: boolean
@@ -19,7 +19,7 @@ type RunnerFn = (params: {
 export const run = withTaggedErrors(async (params) => {
   const { runtime, evaluateInContext } = await getModuleContext({
     moduleName: params.name,
-    onWarning: params.onWarning,
+    onWarning: params.onWarning ?? (() => {}),
     useCache: params.useCache !== false,
     env: params.env,
     edgeFunctionEntry: params.edgeFunctionEntry,

packages/react-dev-overlay/src/middleware.ts

@@ -344,7 +344,11 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
         return res.end()
       }
 
-      const filePath = path.resolve(options.rootDirectory, frameFile)
+      // frame files may start with their webpack layer, like (middleware)/middleware.js
+      const filePath = path.resolve(
+        options.rootDirectory,
+        frameFile.replace(/^\([^)]+\)\//, '')
+      )
       const fileExists = await fs.access(filePath, FS.F_OK).then(
         () => true,
         () => false

test/integration/middleware-dynamic-code/lib/utils.js → test/integration/edge-runtime-dynamic-code/lib/utils.js

@@ -1,3 +1,11 @@
+export const useCases = {
+  eval: 'using-eval',
+  noEval: 'not-using-eval',
+  wasmCompile: 'using-webassembly-compile',
+  wasmInstanciate: 'using-webassembly-instantiate',
+  wasmBufferInstanciate: 'using-webassembly-instantiate-with-buffer',
+}
+
 export async function usingEval() {
   // eslint-disable-next-line no-eval
   return { value: eval('100') }

test/integration/middleware-dynamic-code/middleware.js → test/integration/edge-runtime-dynamic-code/middleware.js

@@ -1,42 +1,47 @@
-import { notUsingEval, usingEval } from './lib/utils'
+import { NextResponse } from 'next/server'
+import { useCases, notUsingEval, usingEval } from './lib/utils'
 import {
   usingWebAssemblyCompile,
   usingWebAssemblyInstantiate,
   usingWebAssemblyInstantiateWithBuffer,
 } from './lib/wasm'
 
 export async function middleware(request) {
-  if (request.nextUrl.pathname === '/using-eval') {
+  if (request.nextUrl.pathname === `/${useCases.eval}`) {
     return new Response(null, {
       headers: { data: JSON.stringify(await usingEval()) },
     })
   }
 
-  if (request.nextUrl.pathname === '/not-using-eval') {
+  if (request.nextUrl.pathname === `/${useCases.noEval}`) {
     return new Response(null, {
       headers: { data: JSON.stringify(await notUsingEval()) },
     })
   }
 
-  if (request.nextUrl.pathname === '/using-webassembly-compile') {
+  if (request.nextUrl.pathname === `/${useCases.wasmCompile}`) {
     return new Response(null, {
       headers: { data: JSON.stringify(await usingWebAssemblyCompile(9)) },
     })
   }
 
-  if (request.nextUrl.pathname === '/using-webassembly-instantiate') {
+  if (request.nextUrl.pathname === `/${useCases.wasmInstanciate}`) {
     return new Response(null, {
       headers: { data: JSON.stringify(await usingWebAssemblyInstantiate(9)) },
     })
   }
 
-  if (
-    request.nextUrl.pathname === '/using-webassembly-instantiate-with-buffer'
-  ) {
+  if (request.nextUrl.pathname === `/${useCases.wasmBufferInstanciate}`) {
     return new Response(null, {
       headers: {
         data: JSON.stringify(await usingWebAssemblyInstantiateWithBuffer(9)),
       },
     })
   }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: Object.values(useCases).map((route) => `/${route}`),
 }

test/integration/edge-runtime-dynamic-code/pages/api/route.js

@@ -0,0 +1,26 @@
+import { useCases, notUsingEval, usingEval } from '../../lib/utils'
+import {
+  usingWebAssemblyCompile,
+  usingWebAssemblyInstantiate,
+  usingWebAssemblyInstantiateWithBuffer,
+} from '../../lib/wasm'
+
+export default async function handler(request) {
+  const useCase = request.nextUrl.searchParams.get('case')
+
+  return Response.json(
+    useCase === useCases.eval
+      ? await usingEval()
+      : useCase === useCases.noEval
+      ? await notUsingEval()
+      : useCase === useCases.wasmCompile
+      ? await usingWebAssemblyCompile(9)
+      : useCase === useCases.wasmInstanciate
+      ? await usingWebAssemblyInstantiate(9)
+      : useCase === useCases.wasmBufferInstanciate
+      ? await usingWebAssemblyInstantiateWithBuffer(9)
+      : { ok: true }
+  )
+}
+
+export const config = { runtime: 'experimental-edge' }