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-terminal

2.2.3

Show youch error on terminal

youch-core

0.3.1

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

@d2.js/youch

4.2.3

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

youch

Pretty print JavaScript errors on the Web and the Terminal

3.3.4

972

MIT

TypeScript

73.23 kB

59,453,371 5

Installations

npm install youch

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.5.1

NPM Version

10.8.2 Score

99.1

Supply Chain

Quality

88.6

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

2

Total

44

Closed

13

Merged

29

Issues

Open

2

Total

24

Closed

22

Releases

Toggle to view all frames, bug fixes and scripts cleanup

v4.1.0-beta.5

Updated on Jan 17, 2025

Fix path for template exports

v4.1.0-beta.4

Updated on Dec 18, 2024

Bug fixes and support for rendering request properties as metadata

v4.1.0-beta.3

Updated on Dec 13, 2024

Add toJSON method

v4.1.0-beta.2

Updated on Nov 23, 2024

Add console printer and rename methods

v4.1.0-beta.1

Updated on Nov 22, 2024

Add cheviron icon and support for CSP nonce

v4.1.0-beta.0

Updated on Nov 17, 2024

View All 8 releases

Contributors

Unable to fetch Contributors

View All 13 Contributors

Languages

TypeScript

CSS

JavaScript

TypeScript (73.9%)

CSS (22%)

JavaScript (4.11%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

poppinss

Download Statistics

Total Downloads

59,453,371

Last Day

62,224

Last Week

975,891

Last Month

3,728,760

Last Year

34,666,715

GitHub Statistics

MIT License

972 Stars

213 Commits

29 Forks

12 Watchers

4 Branches

13 Contributors

Updated on Feb 13, 2025

Maintainers

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

59,453,371

Last Day

2.4%

62,224

Compared to previous day

Last Week

8.5%

975,891

Compared to previous week

Last Month

27.2%

3,728,760

Compared to previous month

Last Year

109%

34,666,715

Compared to previous year

Daily Downloads

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}

Score

5

/10

Last Scanned on 2025-02-10

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