resolve-browser-trace

$3

When we develop locally. We can have the convenience of a readable stacktrace to let you know what has happened.
However, with your live site, letting the whole world know how our source is constructed is not something we may want.

$3

$3

resolve-browser-trace is a NodeJs library to rebuild client side stacktraces into source pointers

 

$3

Install

yarn add resolve-browser-trace
or
npm install --save resolve-browser-trace

$3

The first step to import the lib
`` js
const setupResolveTrace = require('resolve-browser-trace')
`

Next is to set the path to where you store your map files for your bundles
` js
const sourceDecoder = setupResolveTrace(__dirname+"/src/ .map files are here");
`

To use just pass the stacktrace
` js
sourceDecoder(stack) // returns Promise
`

Example

` js
const sourceDecoder = require('resolve-browser-trace')(__dirname+"/src/ .map files are here")

const clientStacktrack = @https://localhost/main-9adc196540168f060d54.min.js:1:3385
@https://localhost/main-9adc196540168f060d54.min.js:1:96;

sourceDecoder(clientStacktrack).then(newStack => console.log(newStack))
/* RESULT -> [
{
"source": "main.jsx",
"line": 20,
"column": 21,
"arguments": [],
"name": appElem
},
{
"source": "webpack/bootstrap 9adc196540168f060d54",
"line": 19,
"column": 0,
"arguments": [],
"name": "modules",
}
]*/
`

setup your webpack

webpack.config.js
`js
module.exports = {
// ...
target:"web",
devtool: 'source-map',
output: {
path: path.resolve(__dirname, "public"),
filename: "[name]-[hash].min.js"
},
// ...
``