node library to use client side source map to resolve stacktraces
npm install resolve-browser-traceWhen 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.
 
yarn add resolve-browser-trace
ornpm install --save resolve-browser-trace
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
` 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",
}
]*/
`
webpack.config.js
`js``
module.exports = {
// ...
target:"web",
devtool: 'source-map',
output: {
path: path.resolve(__dirname, "public"),
filename: "[name]-[hash].min.js"
},
// ...