{"id":12697,"library":"youch","title":"Youch: Pretty Print JavaScript Errors","description":"Youch is an error-parsing library designed to transform raw JavaScript error stack traces into highly readable and visually appealing output. It can render these errors into self-contained HTML pages for web contexts or formatted ANSI output for terminal environments. The current stable version is 4.1.1, with frequent updates, including beta releases for new features and bug fixes. A key differentiator is its ability to provide detailed error information, including code snippets, request/response metadata, and configurable links to code editors, significantly enhancing the developer experience compared to standard unformatted stack traces. It is widely adopted by frameworks like Hono, Nuxt, and AdonisJS, emphasizing its utility in modern web development workflows.","status":"active","version":"4.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/poppinss/youch","tags":["javascript","typescript"],"install":[{"cmd":"npm install youch","lang":"bash","label":"npm"},{"cmd":"yarn add youch","lang":"bash","label":"yarn"},{"cmd":"pnpm add youch","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for generating colored ANSI terminal output for errors, essential for the `toANSI()` method.","package":"@poppinss/colors","optional":false},{"reason":"Dependency for parsing and displaying request cookies within the metadata section of the HTML error page.","package":"cookie-es","optional":false}],"imports":[{"note":"Since v4.1.0, `Youch` is a named export. Previous major versions used a default export.","wrong":"import Youch from 'youch'","symbol":"Youch","correct":"import { Youch } from 'youch'"},{"note":"CommonJS `require()` is not directly supported for Youch v4.1.0 and later due to the switch to ESM. Dynamic `import()` or transpilation is required for CommonJS environments.","wrong":"const Youch = require('youch')","symbol":"Youch (CommonJS)","correct":"const { Youch } = await import('youch')"},{"note":"Since v4.1.0, the `error` and `request` objects are passed directly to the `toHTML`, `toJSON`, and `toANSI` methods, rather than to the `Youch` constructor.","wrong":"const youch = new Youch(error, request); const html = await youch.toHTML();","symbol":"toHTML, toJSON, toANSI methods","correct":"const youch = new Youch(); const html = await youch.toHTML(error, request);"}],"quickstart":{"code":"import { Youch } from 'youch';\nimport http from 'node:http';\n\nconst server = http.createServer(async (req, res) => {\n  try {\n    if (req.url === '/error') {\n      throw new Error('This is a simulated error for Youch to display!');\n    }\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Visit /error to see Youch in action.');\n  } catch (error) {\n    const youch = new Youch();\n    // The request object is optional, but provides valuable context.\n    const html = await youch.toHTML(error, req);\n    res.writeHead(500, { 'Content-Type': 'text/html' });\n    res.end(html);\n  }\n});\n\nconst PORT = process.env.PORT ?? 3000;\nserver.listen(PORT, () => {\n  console.log(`Server running on http://localhost:${PORT}`);\n  console.log('Open http://localhost:3000/error in your browser to trigger an error.');\n});","lang":"typescript","description":"Demonstrates how to integrate Youch into a Node.js HTTP server to catch errors and render them as a rich, self-contained HTML error page."},"warnings":[{"fix":"Migrate your project to use ES Modules (`import`/`export`) or use dynamic `import()` for Youch if you must remain in a CommonJS environment.","message":"Youch switched from CommonJS to ES Modules (ESM) starting with v4.1.0. Direct `require()` statements for Youch will no longer work in a CommonJS context.","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Update your import statements to use named import syntax: `import { Youch } from 'youch'`.","message":"The primary export for Youch changed from a default export to a named export in v4.1.0. Importing Youch via `import Youch from 'youch'` will result in a `TypeError`.","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Instantiate `Youch` without arguments: `const youch = new Youch()`. Then, pass the `error` and `request` context when calling a rendering method, e.g., `await youch.toHTML(error, request)`.","message":"The `Youch` constructor no longer accepts the `error` or `request` objects. These parameters are now passed directly to the `toHTML()`, `toJSON()`, and `toANSI()` methods.","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Upgrade to Youch v4.1.0 or later to ensure proper HTML escaping. If using an older version, manually sanitize any potentially untrusted input before it is incorporated into error messages.","message":"Versions of Youch prior to v4.1.0 (specifically before v4.1.0-beta.14) did not properly escape HTML in error content, potentially leading to Cross-Site Scripting (XSS) vulnerabilities if error messages contained untrusted user input.","severity":"gotcha","affected_versions":"<4.1.0"},{"fix":"If encountering issues related to missing modules, ensure these dependencies are properly installed and linked, potentially by adding them explicitly to your `package.json`.","message":"Dependencies like `@poppinss/colors` and `cookie-es` are crucial for Youch's functionality. In some environments (e.g., Yarn PnP), these might need to be explicitly declared or correctly resolved for Youch to work as expected.","severity":"gotcha","affected_versions":">=4.1.0-beta.8"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import statement to `import { Youch } from 'youch'` to use the named export.","cause":"Attempting to instantiate Youch with `new Youch()` after an `import Youch from 'youch'` statement on Youch v4.1.0 or later.","error":"TypeError: Youch is not a constructor"},{"fix":"Refactor your module to use ES Modules, or if absolutely necessary, use a dynamic import: `const { Youch } = await import('youch')` in an `async` context. Otherwise, downgrade Youch to a version prior to 4.1.0.","cause":"Attempting to load Youch v4.1.0 or later using a CommonJS `require()` call in a CommonJS module.","error":"ERR_REQUIRE_ESM: require() of ES Module .../node_modules/youch/dist/index.js from ... not supported."},{"fix":"Ensure `error` and `request` (or `null` for `request` if not applicable) are passed as arguments to the rendering methods: `await youch.toHTML(error, request)`.","cause":"Calling `youch.toHTML()` without passing the `error` and `request` objects as arguments after instantiating `Youch` in v4.1.0 or later.","error":"TypeError: Cannot read properties of undefined (reading 'constructor')"}],"ecosystem":"npm"}