NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1942 most downloaded on npm
Pretty print JavaScript errors on the Web and the Terminal
Last release 6 months ago
28 Mar 2026
Ships fairly regularly
a new release about every 5 weeks
Rarely documented
notes for 3 of 32 stable releases
Nothing withdrawn
no release was ever pulled
10 years old
48 releases · first in 2016
chore(deps): update cookie-es to v3 by @pi0 in https://github.com/poppinss/youch/pull/88
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0...v4.1.1
Switch from CommonJS to ESM. The package can no longer be require()'d.
require()'d.- import Youch from 'youch'
+ import { Youch } from 'youch'
Youch constructor no longer accepts the error or request object. Instead, the error is passed directly to toHTML(), toJSON(), and the new toANSI() methods.- const youch = new Youch(error, req)
- const html = await youch.toHTML()
- const json = await youch.toJSON()
+ const youch = new Youch()
+ const html = await youch.toHTML(error)
+ const json = await youch.toJSON(error)
toHTML() instead. The request must be a plain object with url, method, and headers properties (not a Node.js http.IncomingMessage).- const youch = new Youch(error, req)
- const html = await youch.toHTML()
+ const youch = new Youch()
+ const html = await youch.toHTML(error, {
+ request: {
+ url: req.url,
+ method: req.method,
+ headers: req.headers,
+ },
+ })
toJSON() return value is now a ParsedError object directly, instead of being wrapped inside { error: {...} }.- const { error } = await youch.toJSON()
- console.log(error.message)
+ const error = await youch.toJSON(error)
+ console.log(error.message)
toHTML() method no longer accepts arbitrary template data. Use the structured options object instead, which accepts title, cspNonce, ide, request, offset, and frameSourceBuffer.- await youch.toHTML({ cspNonce: 'abc123' })
+ await youch.toHTML(error, { cspNonce: 'abc123' })
preLines and postLines constructor options have been replaced by frameSourceBuffer on each render method.- const youch = new Youch(error, req, { preLines: 8, postLines: 8 })
- const html = await youch.toHTML()
+ const youch = new Youch()
+ const html = await youch.toHTML(error, { frameSourceBuffer: 8 })
addLink() method. Custom links can no longer be added to the error page. Use the new template/component system to customize the HTML output instead.toggleShowAllFrames() method. Frame visibility is now handled by the new HTML UI.toANSI() method for rendering errors as ANSI-colored terminal output.const youch = new Youch()
const output = await youch.toANSI(error)
console.log(output)
Metadata API for attaching contextual information to error pages. Metadata is organized into groups, sections, and rows.const youch = new Youch()
youch.metadata.group('Request', {
Headers: [
{ key: 'Host', value: 'localhost:3000' },
{ key: 'Accept', value: 'text/html' },
],
Cookies: [
{ key: 'session_id', value: 'abc123' },
],
})
useParser() for pre-processing errors before they are parsed.youch.useParser((source) => {
// Normalize or transform the error before parsing
return source
})
useTransformer() for post-processing parsed errors.youch.useTransformer((error, source) => {
// Mutate the ParsedError after parsing
error.hint = 'Did you forget to install dependencies?'
})
defineSourceLoader() for custom source code loading (e.g., remote files, bundled sources).youch.defineSourceLoader(async (frame) => {
const contents = await fetchSource(frame.fileName)
return { contents }
})
header, layout, errorInfo, errorStack, errorStackSource, errorCause, errorMetadata) can be replaced with a custom component.youch.templates.use('errorInfo', new MyCustomErrorInfo())
ide option ("vscode", "sublime", "phpstorm", etc.) or a custom URL format.await youch.toHTML(error, { ide: 'vscode' })
templates.injectStyles() for injecting custom CSS into the error page.youch.templates.injectStyles(':root { --surface-bg: #1a1a2e; }')
BaseComponent class for building custom template components.Metadata class for standalone use.codeContext property to types by @Julien-R44 in https://github.com/poppinss/youch/pull/43filePath to posix format by @Julien-R44 in https://github.com/poppinss/youch/pull/46toHTML method by @yorch in https://github.com/poppinss/youch/pull/51addEventListener by @AylenHoz in https://github.com/poppinss/youch/pull/62engines by @pi0 in https://github.com/poppinss/youch/pull/69DOMContentLoaded events based on document state by @AylenHoz in https://github.com/poppinss/youch/pull/65Full Changelog: https://github.com/poppinss/youch/compare/v2.0.10...v4.1.0
One column per quarter.
fix: Escape HTML in error content by @AylenHoz in https://github.com/poppinss/youch/pull/83
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.13...v4.1.0-beta.14
Adjust styles for devices with small screens (#82) 121a017, closes #82
template: wrong scollbar color when page and browser theme mismatch
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.11...v4.1.0-beta.12
rename jsFile property to scriptFile
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.10...v4.1.0-beta.11
# 4.1.0-beta.10 (2025-07-04) Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.9...v4.1.0-beta.10
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.9...v4.1.0-beta.10
share CSP nonce with dump (141a655), closes #74
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.8...v4.1.0-beta.9
Add @poppinss/colors dependency to satisfy Yarn PnP requirements by @robigan in https://github.com/poppinss/youch/pull/71
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.7...v4.1.0-beta.8
Add or execute DOMContentLoaded events based on document state
DOMContentLoaded events based on document state (#65) (e136cb8)DOMContentLoaded events based on document state by @AylenHoz in https://github.com/poppinss/youch/pull/65Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.6...v4.1.0-beta.7
build: allow node.js 18 in engines by @pi0 in https://github.com/poppinss/youch/pull/69
engines by @pi0 in https://github.com/poppinss/youch/pull/69Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.5...v4.1.0-beta.6
After this release all the native frames will be hidden by default and they can be toggled using the View all frames checkbox.
After this release all the native frames will be hidden by default and they can be toggled using the View all frames checkbox.
https://github.com/user-attachments/assets/f64e0ffe-4773-48d9-be4c-bdc74f67b992
addEventListener (#62) (961aac2)addEventListener by @AylenHoz in https://github.com/poppinss/youch/pull/62Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.4...v4.1.0-beta.5
update template exports with the correct path
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.3...v4.1.0-beta.4
apply transformers, parsers and source loader to the Error parser
### Features * add toJSON method (3bc2eb7) Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.1...v4.1.0-beta.2
Full Changelog: https://github.com/poppinss/youch/compare/v4.1.0-beta.1...v4.1.0-beta.2
In this release, we have renamed the render method to toHTML and introduced toANSI method that returns the ANSI output for terminals
add cheviron to expandable frames and support for csp nonce
Full Changelog: https://github.com/poppinss/youch/compare/v4.0.0-beta.0...v4.1.0-beta.0
add codeContext property to types
codeContext property to types (#43) (b701a9f)filePath to posix format (#46) (cd66012)toHTML method argument (#51) (bef2df8)codeContext property to types by @Julien-R44 in https://github.com/poppinss/youch/pull/43filePath to posix format by @Julien-R44 in https://github.com/poppinss/youch/pull/46toHTML method by @yorch in https://github.com/poppinss/youch/pull/51Full Changelog: https://github.com/poppinss/youch/compare/v2.0.10...v4.0.0-beta.0
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Helpful links is a way for users to search for the error on the websites where they can find helpful information.
Helpful links is a way for users to search for the error on the websites where they can find helpful information.
Usually these sites can be Google or Stackoverflow. However, you can also add links to your forum or slack group or even Github search.
youch
.addLink(({ message }) => {
return `<a href="google.com/search?q=${message}"> Search google </a>`
})
.toHTML()
Also, you can return the HTML with classes from font awesome brand icons. If your returned HTML is making use of the font awesome icons, then Youch will automatically load the CSS files from font awesome CDN.
youch
.addLink(({ message }) => {
return `<a href="google.com/search?q=${message}"><i class="fab fa-google"></i></a>`
})
.toHTML()
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →