errorMiddleware() — vite Function Reference

Architecture documentation for the errorMiddleware() function in error.ts from the vite codebase.

Function typescript ViteCore ConfigEngine calls 2 called by 1

Entity Profile

ViteCore→ ConfigEngine→ errorMiddleware() — vite Function Reference

Dependency Diagram

graph TD
  247ba70b_7493_fcc6_f469_b822243eb8f1["errorMiddleware()"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c["error.ts"]
  247ba70b_7493_fcc6_f469_b822243eb8f1 -->|defined in| 09588b79_e65d_f18b_cb8c_e85991fbc94c
  24ecf2a1_3c09_d451_76f3_9485b4e993f8["_createServer()"]
  24ecf2a1_3c09_d451_76f3_9485b4e993f8 -->|calls| 247ba70b_7493_fcc6_f469_b822243eb8f1
  06e41939_9aa1_da0d_2605_8da225bc1ae5["logError()"]
  247ba70b_7493_fcc6_f469_b822243eb8f1 -->|calls| 06e41939_9aa1_da0d_2605_8da225bc1ae5
  350125bb_754e_f5e3_28c9_3c404a3e4edb["prepareError()"]
  247ba70b_7493_fcc6_f469_b822243eb8f1 -->|calls| 350125bb_754e_f5e3_28c9_3c404a3e4edb
  style 247ba70b_7493_fcc6_f469_b822243eb8f1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/server/middlewares/error.ts lines 62–108

export function errorMiddleware(
  server: ViteDevServer,
  allowNext = false,
): Connect.ErrorHandleFunction {
  // note the 4 args must be kept for connect to treat this as error middleware
  // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
  return function viteErrorMiddleware(err: RollupError, _req, res, next) {
    logError(server, err)

    if (allowNext) {
      next()
    } else {
      res.statusCode = 500
      res.end(`
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <title>Error</title>
            <script type="module">
              const error = ${JSON.stringify(prepareError(err)).replace(
                /</g,
                '\\u003c',
              )}
              try {
                const { ErrorOverlay } = await import(${JSON.stringify(path.posix.join(server.config.base, CLIENT_PUBLIC_PATH))})
                document.body.appendChild(new ErrorOverlay(error))
              } catch {
                const h = (tag, text) => {
                  const el = document.createElement(tag)
                  el.textContent = text
                  return el
                }
                document.body.appendChild(h('h1', 'Internal Server Error'))
                document.body.appendChild(h('h2', error.message))
                document.body.appendChild(h('pre', error.stack))
                document.body.appendChild(h('p', '(Error overlay failed to load)'))
              }
            </script>
          </head>
          <body>
          </body>
        </html>
      `)
    }
  }
}