Webpack & sourcemaps?

Question

I'm currently using windows.onerror to log our javascript errors in production. I'm using webpack to bundle our javascript and using the uglify plugin to minify. Unfortunately the ErrorEvent object's lineno and columno are coming from the minified blob produced by webpack. Webpack is producing its default sourcemap files. Is there anyway to get the correct lineno and columno ?

w.addEventListener("error", handleError, true);

function handleError(e) {

    let errorToLog = {};

    if (e.message) {
        errorToLog.ErrorMessage = e.message;
    }

    if (e.filename) {
        errorToLog.source = e.filename;
    }

    if (e.lineno) {
        errorToLog.lineNumber = e.lineno;
    }

    if (e.colno) {
        errorToLog.columnNumber = e.colno;
    }

    if (e.error.stack) {
        errorToLog.stackTrace = e.error.stack;
    }

Answer 1

Use webpack's `devtool' setting to add a source map:

{
    devtool: "#inline-source-map"
}

Note that using a full source map will add an overhead to your transpile time, so if you can live without the column number during development, use the faster cheap-module-inline-source-map instead:

{
    devtool: "#cheap-module-inline-source-map"
}

Answer 2

There are many possible problems.

The most common is that uglify now requires an explicit sourcemap: true or it will break your source map generation. The default is now false , because, er, reasons.