vite Architecture Docs
Home / File/ error.ts — vite Source File

error.ts — vite Source File

Architecture documentation for error.ts, a typescript file in the vite codebase. 10 imports, 6 dependents.

File typescript ViteCore ConfigEngine 10 imports 6 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  09588b79_e65d_f18b_cb8c_e85991fbc94c["error.ts"]
  031bc221_67a8_c579_f2bf_bb30a08beeb2["utils.ts"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 031bc221_67a8_c579_f2bf_bb30a08beeb2
  b17eb6ef_3cdf_aac9_c51e_a2ae67a48ff2["pad"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> b17eb6ef_3cdf_aac9_c51e_a2ae67a48ff2
  8377ae20_ffba_2f9c_bded_58742b7f1c3b["index.ts"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 8377ae20_ffba_2f9c_bded_58742b7f1c3b
  545df65b_7f67_94d3_e2e8_a592d5e64b8f["constants.ts"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 545df65b_7f67_94d3_e2e8_a592d5e64b8f
  51e96894_3556_ed5c_1ede_97d449867adf["node:path"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 51e96894_3556_ed5c_1ede_97d449867adf
  10809968_066c_58db_f8b4_cb0464da805e["node:util"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 10809968_066c_58db_f8b4_cb0464da805e
  bff4f846_ab01_b5ba_74d4_c1608e434d2c["picocolors"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> bff4f846_ab01_b5ba_74d4_c1608e434d2c
  693ca867_249b_3e5a_0ce1_8930413b7fcd["rolldown"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 693ca867_249b_3e5a_0ce1_8930413b7fcd
  9165291b_077b_bedb_8c23_36e44bc99390["connect"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> 9165291b_077b_bedb_8c23_36e44bc99390
  ccb8a028_b1ec_3743_cfbe_0ac5315bc7c3["hmrPayload"]
  09588b79_e65d_f18b_cb8c_e85991fbc94c --> ccb8a028_b1ec_3743_cfbe_0ac5315bc7c3
  7916c84f_5621_2b3b_d220_a171ebce997f["environment.ts"]
  7916c84f_5621_2b3b_d220_a171ebce997f --> 09588b79_e65d_f18b_cb8c_e85991fbc94c
  f070fb78_2f2a_ef11_0530_d34862fa95ca["fullBundleEnvironment.ts"]
  f070fb78_2f2a_ef11_0530_d34862fa95ca --> 09588b79_e65d_f18b_cb8c_e85991fbc94c
  18db4f26_79f1_5b7d_b291_4feeaf95538f["hmr.ts"]
  18db4f26_79f1_5b7d_b291_4feeaf95538f --> 09588b79_e65d_f18b_cb8c_e85991fbc94c
  a423a1ed_f7d8_0eb5_9b8f_ddfa7fa8147e["index.ts"]
  a423a1ed_f7d8_0eb5_9b8f_ddfa7fa8147e --> 09588b79_e65d_f18b_cb8c_e85991fbc94c
  style 09588b79_e65d_f18b_cb8c_e85991fbc94c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import path from 'node:path'
import { stripVTControlCharacters as strip } from 'node:util'
import colors from 'picocolors'
import type { RollupError } from 'rolldown'
import type { Connect } from '#dep-types/connect'
import type { ErrorPayload } from '#types/hmrPayload'
import { pad } from '../../utils'
import type { ViteDevServer } from '../..'
import { CLIENT_PUBLIC_PATH } from '../../constants'

export function prepareError(err: Error | RollupError): ErrorPayload['err'] {
  // only copy the information we need and avoid serializing unnecessary
  // properties, since some errors may attach full objects (e.g. PostCSS)
  return {
    message: strip(err.message),
    stack: strip(cleanStack(err.stack || '')),
    id: (err as RollupError).id,
    frame: strip((err as RollupError).frame || ''),
    plugin: (err as RollupError).plugin,
    pluginCode: (err as RollupError).pluginCode?.toString(),
    loc: (err as RollupError).loc,
  }
}

export function buildErrorMessage(
  err: RollupError,
  args: string[] = [],
  includeStack = true,
): string {
  if (err.plugin) args.push(`  Plugin: ${colors.magenta(err.plugin)}`)
  const loc = err.loc ? `:${err.loc.line}:${err.loc.column}` : ''
  if (err.id) args.push(`  File: ${colors.cyan(err.id)}${loc}`)
  if (err.frame) args.push(colors.yellow(pad(err.frame)))
  if (includeStack && err.stack) args.push(pad(cleanStack(err.stack)))
  return args.join('\n')
}

function cleanStack(stack: string) {
  return stack
    .split(/\n/)
    .filter((l) => /^\s*at/.test(l))
    .join('\n')
}

export function logError(server: ViteDevServer, err: RollupError): void {
  const msg = buildErrorMessage(err, [
    colors.red(`Internal server error: ${err.message}`),
  ])

  server.config.logger.error(msg, {
    clear: true,
    timestamp: true,
    error: err,
  })

  server.environments.client.hot.send({
    type: 'error',
    err: prepareError(err),
  })
}

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>
      `)
    }
  }
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does error.ts do?
error.ts is a source file in the vite codebase, written in typescript. It belongs to the ViteCore domain, ConfigEngine subdomain.
What functions are defined in error.ts?
error.ts defines 5 function(s): buildErrorMessage, cleanStack, errorMiddleware, logError, prepareError.
What does error.ts depend on?
error.ts imports 10 module(s): connect, constants.ts, hmrPayload, index.ts, node:path, node:util, pad, picocolors, and 2 more.
What files import error.ts?
error.ts is imported by 6 file(s): environment.ts, fullBundleEnvironment.ts, hmr.ts, index.ts, pluginContainer.ts, ssrModuleLoader.ts.
Where is error.ts in the architecture?
error.ts is located at packages/vite/src/node/server/middlewares/error.ts (domain: ViteCore, subdomain: ConfigEngine, directory: packages/vite/src/node/server/middlewares).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free