HoneybadgerSourceMapPlugin: ENOENT: no such file or directory /dist/js/0.js.map bringing up dev server

[Jtcruthers]

What are the steps to reproduce this issue?

1. Add HoneybadgerSourceMapPlugin to vue.config
2. Enable source maps in vue.config with devtool: 'source-map'
3. yarn serve to start the dev server <- this is where it fails

What happens?

I'm having a hard time getting these source maps working with Vue2.x (vue-cli 3.x). If I use 'source-map', the source maps are built and uploaded to honeybadger. However, when starting the server, I get an error:

HoneybadgerSourceMapPlugin: ENOENT: no such file or directory, open '/Users/{projectRoot}/dist/js/0.js.map': ENOENT: no such file or directory, open '/Users/{projectRoot}/dist/js/0.js.map'

I can look in ./dist/js and see a ton of map files, but there is no 0.js.map. So the error is legitimate. I'm not sure why it is telling it to look there.

If I change it from source-map to eval-source-map, running yarn build creates 0 source maps at all. So none are getting uploaded. However, the plugin doesn't error out the server. But I just get a Honeybadger could not find any sourcemaps. Nothing will be uploaded. and no .map files in my dist folder. <-- I believe this paragraph is non-honeybadger related.

What were you expecting to happen?

Honeybadger to not error out and my dev server run. Not sure if the plugin should be looking for source maps locally, or if that is intended, if it should be looking for different files than get created on yarn build.

Any logs, error output, etc?

When using source-map:
in terminal:
HoneybadgerSourceMapPlugin: ENOENT: no such file or directory, open '/Users/{projectRoot}/dist/js/0.js.map': ENOENT: no such file or directory, open '/Users/{projectRoot}/dist/js/0.js.map'

in console:
Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data Resource URL: https://${asset_url}/js/chunk-vendors.38153352.js Source Map URL: chunk-vendors.38153352.js.map

when using eval-source-maps:

Honeybadger could not find any sourcemaps. Nothing will be uploaded. (there are no .map files, so that makes sense, and my dev server starts just fine)

Here is my vue.config.js:

  configureWebpack: {
    devtool: 'source-map',
    plugins: [
      new HoneybadgerSourceMapPlugin({
        apiKey: process.env.VUE_APP_HONEYBADGER_API_KEY,
        assetsUrl: 'https://domain-name.com/',
        revision: gitRevisionPlugin.commithash()
      })
    ]
  }

Any other comments?

This only fails on the dev server. Building for production works just fine and that build folder can be served as expected.

I can't see 0.js.map in the dist folder when building for production, but I do see it at localhost:8080/webpack-dev-server in the js directory.

What versions are you using?

Operating System: MacOS Catalina / Ubuntu 21.10
Package Version: 1.5.0
Browser Version: Firefox/Chrome - its failing in the terminal bringing up the server
Webpack Version: 4.x

Sorry if this is actually my error and not related to honeybadger, but I can't figure out the issue and the error is from the plugin directly.

[joshuap]

@Jtcruthers thanks!
@subzero10 can you take a look at this one?

[Jtcruthers]

Updated the issue, mainly to say it happens regardless of the yarn build command and that production builds/source maps work perfectly. The error only ever happens bringing up the dev server.

If I remove the devtools: 'source-map' from my vue.config.js, the dev server can start. I can then add it back into the config and run yarn build if I want, I just can't restart the dev server without removing the line first.

[subzero10]

After inspecting the webpack compilation, I can see that when using source-map, the compilation reports that it has generated js.map files, where as eval-source-maps does not report any .js.map files. The files don't actually exist and the plugin fails. I was thinking that a simple solution could be not to upload source maps to Honeybadger when the app is running with webpack-dev-server. This can be easily checked with process.env.WEBPACK_DEV_SERVER (webpack/webpack-dev-server#1929).
You can see my proposal on this PR. What do you think @joshuap ?

[Jtcruthers]

For what it's worth, it looks like the default vue-cli-service hot-loading causes it to try and upload source maps for every change. So for nearly every change, if you have the proper token stored locally, it tries to upload them to honeybadger servers.

[subzero10]

For what it's worth, it looks like the default vue-cli-service hot-loading causes it to try and upload source maps for every change. So for nearly every change, if you have the proper token stored locally, it tries to upload them to honeybadger servers.

Correct, that's exactly what I noticed too. I think this shouldn't happen, and that's how I came up with my proposal. Another option would be to skip uploading source maps when NODE_ENV != 'production' 🤔

[joshuap]

I think I prefer to check for the webpack dev server, although there may be some additional environment-related checks we could do. I just want to make sure that it "just works" for most people.

[subzero10]

@joshuap PR is merged. Let's close this when a version is released.

[joshuap]

Released in 1.5.1!