Nuxt.js v2 serverMiddleware中Express错误处理功能不生效问题

Nuxt.js v2 的 serverMiddleware 基于 Connect 框架实现，你导出的 Express 应用实例本质上是作为一个 Connect 中间件挂载到 Nuxt 内置的服务栈上。当 Express 作为中间件被上层服务调用时，Express 内部通过 next(error) 传递的错误会直接透传给 Nuxt 的全局错误处理器，绕过你定义在 Express 内部的自定义错误中间件，因此才会出现独立 Express 服务运行正常、嵌入 Nuxt 后返回 500 错误的现象。

方案1：路由内直接处理错误（适合路由较少的场景） #

不需要调用 next 传递错误，直接在路由的 catch 块内完成错误响应，避免错误透传给上层 Nuxt 服务：

// serverMiddleware/index.js
app.get("/", async (req, res) => {
  try {
    // 校验请求参数
    if (typeof req.query.foo !== "string") throw new BadRequestError()
    res.sendStatus(200)
  } catch (error) {
    res.status(error.status || 500).send("Something broke!")
  }
})

方案2：封装Express实例为标准中间件（适合多路由场景，保留全局错误处理逻辑） #

不直接导出 Express 实例，而是导出一层包装函数，将 Express 的错误拦截在当前中间件范围内，确保自定义错误处理逻辑生效：

// serverMiddleware/index.js
import express from "express"
import { BadRequestError } from "./errors.js"

const app = express()

// 路由定义和之前保持一致
app.get("/", async (req, res, next) => {
  try {
    if (typeof req.query.foo !== "string") throw new BadRequestError()
    res.sendStatus(200)
  } catch (error) {
    next(error)
  }
})

// 全局错误处理中间件保留，注意必须保留4个参数，不可省略next
app.use((err, req, res, next) => {
  console.error(err)
  res.status(err.status || 500).send("Something broke!")
})

// 重点：导出包装后的中间件
export default function (req, res, next) {
  app(req, res, next)
}

• Express 的错误处理中间件必须严格定义4个参数(err, req, res, next)，即使不会用到next参数也不能省略，否则 Express 会将其识别为普通中间件，不会触发错误处理逻辑
• 所有异步路由中抛出的错误必须通过try...catch捕获后传递给next，不要出现未捕获的 Promise 拒绝，否则仍然会触发 Nuxt 全局500错误

内容的提问来源于stack exchange，提问作者DaDo