npmpackage.info

Gathering detailed insights and metrics for youch

Other packages similar to youch

@nuxtjs/youch

4.2.3

HTML Pretty error stack viewer

youch-core

0.3.3

Error parser to parse an error instance into a collection of frames

youch-terminal

2.2.3

Show youch error on terminal

@d2.js/youch

4.2.3

Pretty error reporting for Node.js 🚀 (Modified for D2.js & SSR Bundles)

Gathering detailed insights and metrics for youch

youch - 3.3.4 | npmpackage.info

youch

Pretty print JavaScript errors on the Web and the Terminal

3.3.4

1,061

MIT

TypeScript

73.23 kB

Installations

npm install youch

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.5.1

NPM Version

10.8.2 Pull Requests

Open

0

Total

47

Closed

14

Merged

33

Issues

Open

0

Total

27

Closed

27

Releases

Update dependencies

v4.1.0-beta.10

Updated on Jul 04, 2025

Fix CSP issue

v4.1.0-beta.9

Updated on Jun 27, 2025

Add missing `@poppinss/colors` dependency

v4.1.0-beta.8

Updated on May 28, 2025

Mobile view styling fixes

v4.1.0-beta.7

Updated on Apr 09, 2025

Allow Node.js 18 via package.json engines

v4.1.0-beta.6

Updated on Mar 07, 2025

Toggle to view all frames, bug fixes and scripts cleanup

v4.1.0-beta.5

Updated on Jan 17, 2025

View All 13 releases

Languages

TypeScript

CSS

JavaScript

TypeScript (73.34%)

CSS (22.44%)

JavaScript (4.21%)

Developer

poppinss

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,061 Stars

227 Commits

32 Forks

12 Watchers

4 Branches

15 Contributors

Updated on Jul 11, 2025

Maintainers

View All 15 Contributors

Package Meta Information

Latest Version

3.3.4

Package Id

youch@3.3.4

Unpacked Size

73.23 kB

Size

25.36 kB

File Count

NPM Version

10.8.2

Node Version

22.5.1

Published on

Oct 07, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

cookie mustache stacktracey

Dev Dependencies

concat cz-conventional-changelog japa standard supertest uglify-js

Youch!

Pretty error reporting for Node.js :rocket:

Youch is inspired by Whoops but with a modern design. Reading stack trace of the console slows you down from active development. Instead Youch print those errors in structured HTML to the browser.

Features

HTML reporter
JSON reporter, if request accepts a json instead of text/html.
Sorted frames of error stack.
Support for ESM.

Checkout youch terminal to beautify errors on terminal.

Installation

1npm i --save youch

Basic Usage

Youch is used by AdonisJs, but it can be used by express or raw HTTP server as well.

1const Youch = require('youch')
2const http = require('http')
3
4http.createServer(async function (req, res) {
5
6  // PERFORM SOME ACTION
7  if (error) {
8    const youch = new Youch(error, req)
9    const html = await youch.toHTML()
10
11    res.writeHead(200, {'content-type': 'text/html'})
12    res.write(html)
13    res.end()
14  }
15
16}).listen(8000)

Adding helpful links

Everytime an error occurs, we can help users we letting search for the error on Google, over even on the Github repo of our project.

Youch let you define clickable links to redirect the user to a website with the error message.

1const youch = new Youch(error)
2
3await youch
4  .addLink(({ message }) => {
5    const url = `https://stackoverflow.com/search?q=${encodeURIComponent(`[adonis.js] ${message}`)}`
6    
7    return `<a href="${url}" target="_blank" title="Search on stackoverflow">Search stackoverflow</a>`
8  })
9  .toHTML()

Also you can make use of Font awesome brands icons to display icons.

If you will use fontawesome icons, then Youch will automatically load the CSS files from the font awesome CDN for you.

1const youch = new Youch(error)
2
3await youch
4  .addLink(({ message }) => {
5    const url = `https://stackoverflow.com/search?q=${encodeURIComponent(`[adonis.js] ${message}`)}`
6    return `<a href="${url}" target="_blank" title="Search on stackoverflow"><i class="fab fa-stack-overflow"></i></a>`
7  })
8  .toHTML()

Toggle show all frames checkbox

When rendering HTML you can call the toggleShowAllFrames method to check/uncheck the show all frames checkbox.

By default, the checkbox is not checked and calling this method once will toggle the state.

1const youch = new Youch(error)
2
3await youch
4  .toggleShowAllFrames()
5  .toHTML()

Adding CSP nonce

Youch HTML output outputs inline style and script tags and therefore you will have add nonce attribute to them when you have enabled CSP on your website.

You can pass the cspNonce property to the toHTML method at the time of rendering the error to an HTML output.

1const youch = new Youch(error, req)
2const html = await youch.toHTML({
3  cspNonce: 'nonce-value'
4})

Get stack as JSON

You can also the error stack frames as JSON by calling the .toJSON method.

1const youch = new Youch(error, {})
2const jsonResponse = await youch.toJSON()

Following is the shape of the toJSON return data type.

1type JsonResponse = {
2  error: {
3    message: string;
4    name: string;
5    status: number;
6    frames: {
7      file: string,
8      filePath: string,
9      line: number,
10      column: number,
11      callee: string,
12      calleeShort: string,
13      context: {
14        start: number,
15        pre: string,
16        line: string,
17        post: string,
18      },
19      isModule: boolean,
20      isNative: boolean,
21      isApp: boolean
22    }[];
23  };
24}

Release History

Checkout CHANGELOG.md file for release history.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

9

Maintained

Determines if the project is "actively maintained".

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/checks.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/checks.yml/4.x?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/checks.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/checks.yml/4.x?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/checks.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/checks.yml/4.x?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labels.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/labels.yml/4.x?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/labels.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/labels.yml/4.x?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/release.yml/4.x?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/release.yml/4.x?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/stale.yml/4.x?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/toc.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/poppinss/youch/toc.yml/4.x?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/release.yml:32
Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned
Info: 0 out of 1 npmCommand dependencies pinned

0

SAST

Determines if the project uses static code analysis.

Score

5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More