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

stack-mapper

v0.2.2

Published

Initialize it with a source map, then feed it error stacks to have the trace locations mapped to the original files.

Downloads

6,346

Readme

stack-mapper build status

testling badge

Initialize it with a source map, then feed it error stacks to have the trace locations mapped to the original files.

var stackMapper = require('stack-mapper');

// it is up to you to create stack-mapper compatible frame objects
// this will depend on your environment
var inframes = [{
  filename: '/full/path/to/bundle.js',
  line: 5,
  column: 10
}, {
  filename: '/full/path/to/bundle.js',
  line: 9,
  column: 10
}, {
  filename: '/full/path/to/bundle.js',
  line: 20,
  column: 12
}, {
  filename: '/full/path/to/bundle.js',
  line: 22,
  column: 10,
}, {
  filename: '/Users/thlorenz/dev/js/projects/stack-mapper/test/twofiles.js',
  line: 18,
  column: 21
}];

var map = { version: 3,
  file: 'generated.js',
  sources:
   [ '/Users/thlorenz/dev/js/projects/stack-mapper/test/twofiles/barbar.js',
     '/Users/thlorenz/dev/js/projects/stack-mapper/test/twofiles/main.js' ],
  names: [],
  mappings: ';AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACTA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA',
  sourcesContent:
   [ '\'use strict\';\n\nfunction foobar() {\n  return new Error();\n}\n\nvar go = module.exports = function () {\n  return foobar();  \n};\n',
     '\'use strict\';\n\nvar barbar = require(\'./barbar\');\n\nmodule.exports = function main() {\n  var a = 1;\n  function bar() {\n    return barbar();\n  }\n  return bar();\n}\n' ] }

var sm = stackMapper(map);
var frames = sm.map(inframes);

console.log(frames);

Output

[{
    filename: '/Users/thlorenz/dev/js/projects/stack-mapper/test/twofiles/barbar.js',
    line: 4,
    column: 10
}, {
    filename: '/Users/thlorenz/dev/js/projects/stack-mapper/test/twofiles/barbar.js',
    line: 8,
    column: 10
}, {
 ...
}]

Obtaining the source map

You need to pass the source map as an object as shown in the example. If your source map happens to be in a different format, please use the convert-source-map module in order to convert it.

browserify attaches source maps to the bottom of the bundle if the --debug flag is set, here is an example how to obtain and convert it to use with stack-mapper.

var browserify =  require('browserify')
  , convert    =  require('convert-source-map')

browserify()
  .require(entry)
  .bundle({ debug: true }, function (err, src) {
    if (err) return cb(err);

    var map = convert.fromSource(src).toObject();
  });

Installation

npm install stack-mapper

API

stackMapper(sourcemap)

/**
 * Returns a Stackmapper that will use the given source map to map error trace locations.
 * 
 * @name stackMapper
 * @function
 * @param {Object} sourcemap source map for the generated file
 * @return {StackMapper} stack mapper for the particular source map
 */

stackMapper.map(frames, includeSource)

/**
 * Maps the trace statements of the given error stack and replaces locations
 * referencing code in the generated file with the locations inside the original files.
 * 
 * @name map
 * @function
 * @param {Array} array of callsite objects (see readme for details about Callsite object)
 * @param {boolean} includeSource if set to true, the source code at the first traced location is included
 * @return {Array.<Object>} info about the error stack with adapted locations, each with the following properties
 *    - filename: original filename 
 *    - line: origial line in that filename of the trace
 *    - column: origial column on that line of the trace
 */

Stack Frames

The frames array passed to stackMapper.map should contain at least the following items

  • filename
  • line
  • column

License

MIT