npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

awesome-error-handler

v1.0.0

Published

Awesome error handler that makes your development experience with express more awesome

Downloads

91

Readme

Awesome Error Handler for Express

Accelerate your development.

Stacktraces may be very long and noisy. Console output can also be too noisy.

Express default error handling is just ok but lets you define you own error handlers](https://expressjs.com/en/guide/error-handling.html)

The npm module errorhandler improves it but does not fix it.

This module will make express error handling awesome.

Click on the video for a 2:30 minutes demo:

Awesome Error Handler SHORTER-GIFSICLE

Intro

Awesome Error Handler wants to give engineers a faster and better development experience and be still usable in production.

Simple use

const awesomeErrorHandler = require('awesome-error-handler');

const app = express();
// Initialize some middleware helpers
awesomeErrorHandler.initialize({ app });

///
/// ... All your middlewares and routes go here ...
///

// The error route in express needs to be registered last so "next(error)" can handle the error
app.use(awesomeErrorHandler({ app }));

Features

During development it aims to dramatically speedup the development process using a browser and Visual Studio Code. I wanted to keep it useful on the server side too but it needs work to make it generic enough.

Catching asynchronous errors and coloring of trace line (with trycatch)

Currently a lot of node modules still use asynchronous primitive with callbacks. Unfortunately there is no simple way to intercept those error. The standard try...catch cannot catch these errors.

// Simple example
try { 
  setTimeout(() => throw new Error('Catch me if you can'), 0); // This will crash your server!
} catch (err) {
  // This will NOT execute!
  console.error('Error:', err);
}

In a better future when all modules will use async/await and the Promise API, error handling in Javascript will be a lot simpler. But at the moment this is the status quo.

Trycatch:

  • Prevent your sever from crashing wrapping all request. This is definitely good in dev mode. In production it would be good using cluster and gracefully shut down the worker and start a new one so memory is cleaned unless you do proper clean up.
  • Colorizes the stack trace so it is easy to recognize the trace from the code in your repo.
  • Give you a long stack trace that shows where the error originated in the chain of asynchronous calls.

It is doing some magic and wrap all node asynchronous Node APIs so it can catch those errors. I thought it was crazy but I learned to appreciate its monkey patching that save a lot of time in development. In these days the async_hooks would be used.

Another similar npm module you may be familiar with that does something similar is longjohn.

Errors in the browser

When you have an an unhandled error in a route, you will see a page with the detail about the HTTP error, stack trace and other data in the request.

Fully keyboard support

You can navigate the stack trace with the keyboard.

Full Integration with VSCode

Click on the stacktrace in terminal (integetion with iTerm2 on Mac) or double clicking on the editor in the browser will teleport you in the same spot in Visual Studio Code.

Do not leak data to the clients in production

In production we want to avoid to return to the client (usually the browser) stack traces or other sensitive information. The default behavior is not to show the detailed error to the user but track everything in the logs.

Request as curl

An error will show and a CURL request that can easily be used from command line to replicate the call.

Highly customizable

Awesome Error Handler try to use good defaults but giving the flexibility necessary for most use cases and customization. For example , you may want to use your own logger that use your own format.

Hotkeys

  • Close the editor
  • and navigate the stack trace
  • switch between editor and stack trace. also move from the stack trace to the editor
  • on the editor open VSCode on that specific position
  • Navigation items have an underlined letter. Pressing that letter toggle them

Other art and resources

I keep these here for me and whoever need reference about tools that make stack traces easier to use.

Long Stack trace

  • https://github.com/CrabDude/trycatch

  • Promise stack trace

    • https://github.com/mvaldesdeleon/long-promise (use the https://nodejs.org/api/async_hooks.html node API)
    • https://gist.github.com/joeytwiddle/8c357b8a4ac6803a0f188d495901b6bc (Long Stack Support for ES6 Promises.js)
    • http://bluebirdjs.com/docs/api/promise.longstacktraces.html
    • Node changes with --async-stack-traces in Feb 2019
  • https://github.com/AndreasMadsen/trace - Very promising replacement but without async try...catch support

  • async_hooks (node -v > 8.9)

    • https://www.npmjs.com/package/async-hook-domain Domains implemented with async_hooks
    • Intro to async_hooks
    • https://airbrake.io/blog/nodejs-error-handling/err_async_callback
    • https://medium.com/autodesk-tlv/async-hooks-a-whole-new-world-of-opportunities-a1a6daf1990a
  • Other npm modules

    • https://www.npmjs.com/package/trycatch
    • https://www.npmjs.com/package/nn-node-stacktrace
    • https://www.npmjs.com/package/erotic !!!
    • https://www.npmjs.com/package/async-stacktrace
    • https://github.com/olstenlarck/clean-stacktrace
    • https://www.npmjs.com/package/deepstack

Stack formatting

  • https://github.com/poppinss/youch
  • https://github.com/AriaMinaei/pretty-error
  • https://github.com/googlearchive/stacky
  • https://www.npmjs.com/package/stack
  • https://github.com/shinnn/neat-stack

Frontend stack capturing

  • https://github.com/stacktracejs/stacktrace.js/

Awesome nodejs

  • https://github.com/sindresorhus/awesome-nodejs#debugging--profiling
  • https://github.com/valyouw/njstrace
  • https://github.com/watson/stackman

Error handlers

  • https://github.com/expressjs/errorhandler
  • https://gist.github.com/zcaceres/2854ef613751563a3b506fabce4501fd
  • Alex Liu (Netflix) - To Err Is Human: https://vimeo.com/179274736 - Pretty good for beginners/intermediate

Debugging node

  • https://medium.com/netflix-techblog/debugging-node-js-in-production-75901bb10f2d

Notes

  • At the moment this is not the best code I wrote. It was not born as a one independent module. I used bit and pieces of this plugin on servers. The initial version of this code handler is pretty old and I did not have some tools/framework/modules I use today.
  • Please be patient. This is my first attempt to make this available to everybody quickly. I added code to a template I was using for other things.
  • I also wanted to keep it relatively independent of big framework. I am considering a refactoring of the frontend code to use Svelte.
  • A good test suite is needed.
  • Production mode is not perfect. And different companies have their own internal tools and peculiar ways on how exception are handled. Ideally this will set a good default but it is still a work in progress.

Licence

Mozilla Public License 2

What I really care about:

  • You can do what you want with the code. I will try to help to fix problems but I am NOT liable for it.
  • If you make improvements, please share. Make your changes available to everybody. The best way is probably forking this repo so your changes can be easily found on Github. Prefer submitting a PR so everybody will be able to take advantage of your code.

Contributors