HoneybadgerSourceMapPlugin WebPack [ERR_INVALID_URL]

[ingrocha]

Hello, can someone please assist me?

I am currently working on a project using NX and Angular. When I built the project with the package '@honeybadger-io/webpack', I encountered several errors. Unfortunately, I couldn't debug them because the web package did not specify the source of the errors.

custom-webpack.config:

module.exports = {
    plugins: [
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        new HoneybadgerSourceMapPlugin({
            apiKey: environment.honeyBadgerAPIKey,
            assetsUrl: environment.domain,
            revision: honeyBadgerRevision,
            deploy: {
                environment: environment.envName,
                localUsername: 'Webpack',
            },
            ignoreErrors: true,
        }),
    ],
};

project.json

"build": {
            "executor": "@nx/angular:webpack-browser",
            "options": {
                "outputPath": "apps/summon-worlds-app/dist",
                "serviceWorker": false,
                "index": "apps/summon-worlds-app/src/index.html",
                "main": "apps/summon-worlds-app/src/main.ts",
                "polyfills": "apps/summon-worlds-app/src/polyfills.ts",
                "tsConfig": "apps/summon-worlds-app/tsconfig.app.json",
                "commonChunk": true,
                "namedChunks": true,
                "extractLicenses": true,
                "vendorChunk": true,
                "buildOptimizer": true,
                "sourceMap": true,
                "aot": true,
                "inlineStyleLanguage": "scss",
                "assets": [
                    {
                        "glob": "**/*",
                        "input": "apps/summon-worlds-app/src/assets",
                        "output": "assets"
                    },
                    {
                        "glob": "**/*.svg",
                        "input": "node_modules/ionicons/dist/ionicons/svg",
                        "output": "./svg"
                    }
                ],
                "styles": [
                    "apps/summon-worlds-app/src/global.scss",
                    "apps/summon-worlds-app/src/theme/variables.scss",
                    "node_modules/swiper/swiper-bundle.min.css",
                    "node_modules/@photo-sphere-viewer/core/index.scss"
                ],
                "scripts": [],
                "allowedCommonJsDependencies": ["@honeybadger-io/js", "buffer", "@ionic/storage", "localforage", "lodash", "@2toad/profanity", "html-entities", "onesignal-cordova-plugin"]
            },
            "configurations": {
                   "qa": {
                    "customWebpackConfig": {
                        "path": "custom-webpack.config.ts"
                    },
                    "sourceMap": true,
                    "fileReplacements": [
                        {
                            "replace": "libs/util/util-config/src/lib/environment.ts",
                            "with": "libs/util/util-config/src/lib/environment.qa.ts"
                        }
                    ],
                    "outputHashing": "all"
                }

[subzero10]

Hey @ingrocha, thank you for reaching out!

Unfortunately, I haven't used Angular and Webpack together in the same project for some time now, therefore nothing comes out just by looking at the code snippet.

Here's what I'd do to troubleshoot this further:

1. Set the silent flag to false, as this may produce some logs that could hint on what the error may be.
2. The Invalid URL message makes me think that it could be one of the inputs that's causing an invalid URL to be generated. Have you tried hardcoding all the Honeybadger Webpack plugin configuration just to rule out the possibility of values being undefined/null/invalid? I'm referring to apiKey, assetsUrl, revision etc. Note that if you are going to try this out locally and set the environment to a development environment (defaults are: test, dev, development), source maps will not be uploaded by default.
3. Create a new sample project with the minimum code needed to integrate Nx, Angular, Webpack and Honeybadger. It is possible that some other webpack configuration is interfering with the plugin. Setting up the plugin with the minimum options will assist in getting more information. You can commit this to a public repository and share it here so that I can try to troubleshoot as well.

[ingrocha]

Hi @subzero10! I really appreciate your response.

Has anything changed in @honeybadger-io/webpack from version 6.0.0 to version 6.1.0?

When I use version 6.0.0, it starts working and uploading all files without errors. However, error messages start appearing when I switch to version 6.1.0 or higher.

[subzero10]

Hmm, this sounds like a regression. v6.1.0 didn't come with any feature changes, but we extracted a lot of the logic into an external package (which is used by all our source map plugins such as rollup and esbuild).

I'd love to get to the bottom of this.
I took a look at the release history and it seems we fixed a bug with URL generation on v6.1.1. You can't easily see it in the changelog of the webpack package, because the fix is actually in the plugin-core package.
Can you please try the upload with v6.1.1 (or even better, with the latest version of the package)? Also, remember to set the silent flag to false. I think it should produce some warnings, just make sure you haven't disabled them using the stats option.

(note: I made a typo in my previous message -- the silent flag needs to be false)