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

babel-plugin-pretty-path-errors

v1.0.16

Published

A plugin to wrap all function bodies in try/catch blocks and bubble up errors with a path derived from function names, providing a more effective way of locating the source of error

Downloads

285

Readme

babel-plugin-pretty-path-errors

A plugin to wrap all function bodies in try/catch blocks and bubble up errors with a path derived from function names, providing a more effective way of locating the source of error

Why?

In many cases you will have deeply nested function calls which will inevitably throw errors at some point or another. Transpiled code will frequently change the line number, character position, and function names within the stack traces of errors. This requres you to sift through the transpiled code in order to find the actual location of the error.

Wouldn't life be easier if you just knew which function was called? And which function called that function? Today is your lucky day! This plugin wraps all functions in try/catch blocks, bubbling up errors and supplying them with a path built from the function names, which you can then use to instantly locate the source of error.

As an added bonus, the added try/catch prevents errors thrown in async/await from getting swallowed. This allows you to write your functions without having to worry about always manually surrounding async blocks in a try/catch.

Installation

npm install --save-dev babel-plugin-pretty-path-error

Usage

Via .babelrc

{
  "plugins": ["babel-plugin-pretty-path-errors"]
}

Via CLI

babel --plugins babel-plugin-pretty-path-errors script.js

Disclaimer

While this plugin adds the functionPath property to errors, it won't be useful if you still don't catch the error at the top level of your program. The toString function of a custom Error seems to be overridden by the default Error.prototype.toString when errors are thrown in node. Thus, I suggest making sure your top level code has an error catching mechanism (...which you should probably be doing regardless :) )

try {
  (function foo() { ... })();
} catch (err) {
  // err.toString()
}

Examples

Deeply nested function calls

(function a() {
  (function b() {
    (function c() {
      (function d() {
        (function e() {
          throw new Error('Where am I?');
        })();
      })();
    })();
  })();
})();

The error thrown by the above code would contain a property functionPath with a value:

'a->b->c->d->e'

Basic use case

function foo() {
  throw new Error('Where was I thrown?');
}

function bar() {
  foo();
}

try {
  bar();
} catch(err) {
  console.log(err.message); // 'Where was I thrown?'
  console.log(err.functionPath); // 'foo->bar'

  // Use the toString method to get the full error with function path
  // err.toString() -> 'Where was I thrown? | Location(foo->bar)'
}

Async / Await

async function foo() {
  throw new Error('Where was I thrown?');
}

async function bar() {
  await foo();
}

try {
  bar();
} catch(err) {
  // err.toString() -> 'Where was I thrown? | Location(foo->bar)'
}

Custom catch block

If you want to run a block of code after an error is thrown in your function, add it at the bottom of the function body preceeded by a comment with @onError

var success = 1;

function bar() {
  foo();

  // @onError
  success = 0;
}

try {
  bar();
} catch {
  console.log(success); // 0
}

Existing try/catch

If you have an existing try/catch block in your function, error handling will be added to the end of the catch block and your existing functionality won't be modified.

Options

The default delimiter used to build the function path is an arrow ->, however you may specify a custom delimiter if desired:

// .babelrc

{
  plugins: [
    ["pretty-path-errors", { "delimiter": "." }]
  ]
}

The above would provide you with a function path a.b.c rather than a->b->c