StackTrace.fromError() triggers a network request that results in a 404 and fails while trying to JSON.parse() the result

[nfriend]

Current Behavior

I'm giving stacktrace-js a try in an Angular application that is bundled using webpack. stacktrace-js (or more specifically, stacktrace-gps) is trying to get a .map file from my web server that doesn't exist. Currently, my webpack setup outputs two files at the root of my app's directory:

myapp.js
myapp.js.map

myapp.js.map looks something like this:

{
  "version":3,
  "sources": [
    "webpack:///webpack/bootstrap bb7845f87150726ec08d",
    "webpack:///./~/moment/moment.js",
    "webpack:///./~/jquery/src/core.js",
    "webpack:///./~/css-loader/lib/css-base.js",
    "webpack:///./~/style-loader/lib/addStyles.js",
    "webpack:///./~/angular/index.js",
    "webpack:///./~/jquery/src/jquery.js"
    ...
  ],
  "names":[],
  "mappings": ";AAAA;AACA;;AAEA;AACA ... "
}

My webpack config that generates this map file looks like this:

{
  entry: ['./src/entry'],
  output: {
    filename: 'myapp.js'
  },
  devtool: 'source-map',
  ...
}

In my app, I'm trying to use StackTrace.fromError to catch global errors and send them to my web server to be logged:

StackTrace.fromError(exception).then(stackframes => {

    StackTrace.report(
        stackframes,
        'api/error/myapp',
        'Encountered unhandled error in myapp'
    );

}).catch(err => {

    $log.error('Unable to get stacktrace from Error object for reporting purposes. '
        + 'No error information has been sent to the server.');
});

When an error occurs in my application, stacktrace-js attempts to make a call to https://localhost/myapp/angular-cache.js.map, which doesn't exist. (My app is hosted at https://localhost/myapp/.) As a result, my web server returns a 404 page; stacktrace-gps tries to parse this HTML as JSON (in _parseJson(string) on line 59) and throws an error:

stacktrace-gps.js:59 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at _parseJson (stacktrace-gps.js:59)
    at stacktrace-gps.js:237
    at <anonymous>

It's very possible that this is an issue with my setup, but I'm not sure where to begin. My webpack setup seems fairly standard, and I can't seem to find any information online that's relevant to the error I'm getting.

Expected Behavior

When an error occurs, stacktrace-js shouldn't trigger network calls to files that don't exist on my webserver. The only .map file that exists on my web server is myapp.map.js - I would expect that stacktrace-gps would only make a request to get this file. I also don't seem to see a way to configure the name of the .map.js file that stacktrace-gps should fetch from my web server.

Your Environment

• stacktrace.js version: 2.0.0
• Browser Name and version: Chrome 59/Firefox 54
• Operating System and version (desktop or mobile): Windows 10

[nfriend]

I've discovered this issue is the result of one of my dependencies (angular-cache) including its own sourceMappingURL comment in its output:

//# sourceMappingURL=angular-cache.js.map

If I remove this comment from my build's output .js file, this issue seems to be resolved. I'll close this issue since this doesn't seem to be an issue with stacktrace-js (although perhaps this should be mentioned in a FAQ or Troubleshooting section?).

For anyone else with this issue - you should be able to resolve this issue with this plugin: https://github.com/webpack-contrib/source-map-loader. Unfortunately I haven't been able to get this to work due to this issue (in one of its dependencies): mozilla/source-map#247.