use webpack for logging #55

djskinner · 2021-05-18T16:24:30Z

use the webpack infrastructure logger (if available) rather than outputting to the console directly so that webpack --silent mode is respected.

Goal

Webpack supports a --silent option and our webpack plugins should respect that
In webpack 4 it is common to output stats as json and pipe it to a file (e.g. webpack --mode=production --profile --json > stats/stats.json). This requires silent mode to be respected. Note: webpack 5 stats don't need piping as they are generated withnpx webpack --profile --json=compilation-stats.json. See https://webpack.js.org/api/stats/

Design

Use the webpack recommended way of handling logging in webpack 4 and 5 plugins. See https://v4.webpack.js.org/api/plugins/#logging and https://webpack.js.org/api/plugins/#logging

The logger returned with getLogger doesn't output anything to the console in the event of an error, so getInfrastructureLogger is used, as the output is more useful.

BugsnagBuildReporterPlugin will not use the webpack logger when a custom logger option is supplied.

webpack <= 4.37 doesn't have the logging API so:

BugsnagBuildReporterPlugin falls back to its built in logger (unless a custom option logger is supplied); and
BugsnagSourceMapUploaderPlugin falls back to console (there is no custom logger option).

Changeset

BugsnagBuildReporterPlugin: use the webpack "infrastructure" logger for logging, if present
BugsnagSourceMapUploaderPlugin: use the webpack "infrastructure logger" for logging, if present

Testing

e2e tests use webpack 3/4/5 are passing
the workaround in dashboard-js can be removed (see https://github.com/bugsnag/dashboard-js/pull/4231)
manually checked output of errors and log level bugs against dashboard-js

Output from webpack 4:

Before

[bugsnag-build-reporter] Configuration error
[bugsnag-build-reporter]   sourceControl must be an object containing { provider, repository, revision } (got "{
  provider: 'github',
  repository: 'https://github.com/bugsnag/dashboard-js',
  revision: undefined
}")
[BugsnagSourceMapUploaderPlugin] uploading sourcemap for "http://localhost:8080/assets/app.826c2f1ffce9f1548c4c.js"
Error: HTTP status 401 received from upload API
    at /Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/dist/Request.js:105:33
    at ConcatStream.<anonymous> (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (node:events:381:22)
    at finishMaybe (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/readable-stream/lib/_stream_writable.js:620:14)
    at afterWrite (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/readable-stream/lib/_stream_writable.js:466:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
error Command failed with exit code 1.

After:

<e> [BugsnagBuildReporterPlugin] Configuration error
<e> [BugsnagBuildReporterPlugin]   sourceControl must be an object containing { provider, repository, revision } (got "{
<e>   provider: 'github',
<e>   repository: 'https://github.com/bugsnag/dashboard-js',
<e>   revision: undefined
<e> }")
Error: HTTP status 401 received from upload API
    at /Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/dist/Request.js:105:33
    at ConcatStream.<anonymous> (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (node:events:381:22)
    at finishMaybe (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/readable-stream/lib/_stream_writable.js:620:14)
    at afterWrite (/Users/dan/dashboard-js/node_modules/@bugsnag/source-maps/node_modules/readable-stream/lib/_stream_writable.js:466:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
error Command failed with exit code 1.

Note the absence of [BugsnagSourceMapUploaderPlugin] uploading sourcemap for "http://localhost:8080/assets/app.826c2f1ffce9f1548c4c.js" as the webpack logger does not output log level.

If it was a warn it would output <w> [BugsnagSourceMapUploaderPlugin] uploading sourcemap for "http://localhost:8080/assets/app.826c2f1ffce9f1548c4c.js" (in yellow colour).

It might be worth reviewing the various levels used throughout the code.

In terms of unit-level coverage I think the first step would be to convert to jest

djskinner · 2021-05-18T16:25:19Z

source-map-uploader-plugin.js


      const chunkToSourceMapDescriptors = chunk => {
        // find .map files in this chunk
        const maps = chunk[webpackMajorVersion >= 5 ? 'auxiliaryFiles' : 'files'].filter(file => /.+\.map(\?.*)?$/.test(file))

        if (!publicPath) {
-          console.warn(`${LOG_PREFIX} ${PUBLIC_PATH_WARN}`)
+          logger.warn(`${LOG_PREFIX} ${PUBLIC_PATH_WARN}`)


This needs a little more work as webpack already adds the prefix so we need to omit it when the webpack logger is used

build-reporter-plugin.js

djskinner · 2021-05-19T09:01:52Z

build-reporter-plugin.js

+          : {}
+      )
+
+      reportBuild(this.build, options)


This means that for webpack >= 4.37 the logLevel documented option does nothing because the built-in logger is not used. This also applies (as it did before) if you pass a custom logger. Not sure if this is worth documenting?

I think that's fine. We should update the docs to say which cases it works in.

source-map-uploader-plugin.js

rather than outputting to the console directly so that the plugins respect webpack silent mode

bengourley

It would seem odd to have to use a "warn" log to say that an upload was successful. Can you use .info() instead?

bengourley · 2021-05-26T15:15:25Z

build-reporter-plugin.js

+          : {}
+      )
+
+      reportBuild(this.build, options)


I think that's fine. We should update the docs to say which cases it works in.

djskinner · 2021-06-08T12:20:46Z

source-map-uploader-plugin.js

@@ -91,7 +93,7 @@ class BugsnagSourceMapUploaderPlugin {

      const sourceMaps = stats.chunks.map(chunkToSourceMapDescriptors).reduce((accum, ds) => accum.concat(ds), [])
      parallel(sourceMaps.map(sm => cb => {
-        console.log(`${LOG_PREFIX} uploading sourcemap for "${sm.url}"`)
+        logger.info(`${logPrefix}uploading sourcemap for "${sm.url}"`)


Changed to info so that it shows in the webpack logger output

Output shows as:

<i> [BugsnagSourceMapUploaderPlugin] uploading sourcemap for "http://localhost:8080/assets/slack.826c2f1ffce9f1548c4c.js"

djskinner commented May 18, 2021

View reviewed changes

djskinner force-pushed the use-webpack-for-logging branch 2 times, most recently from 9dee51f to d793f93 Compare May 19, 2021 08:35

djskinner commented May 19, 2021

View reviewed changes

source-map-uploader-plugin.js Outdated Show resolved Hide resolved

use webpack for logging

71fbbab

rather than outputting to the console directly so that the plugins respect webpack silent mode

djskinner force-pushed the use-webpack-for-logging branch from d793f93 to 71fbbab Compare May 19, 2021 09:11

djskinner marked this pull request as ready for review May 20, 2021 16:57

djskinner requested a review from bengourley May 20, 2021 16:57

bengourley approved these changes May 26, 2021

View reviewed changes

fix(logging): use info instead of log on successful upload

83062c3

djskinner force-pushed the use-webpack-for-logging branch from 5b317d0 to 83062c3 Compare June 8, 2021 15:56

djskinner commented Jun 8, 2021

View reviewed changes

djskinner added 2 commits June 8, 2021 16:59

chore: update changelog

9489e8d

Merge branch 'master' into use-webpack-for-logging

0189e8a

djskinner merged commit 4167102 into master Jun 14, 2021

djskinner deleted the use-webpack-for-logging branch June 14, 2021 10:27

This was referenced Jul 6, 2021

Release v1.8.0 #59

Closed

Release v1.8.0 #62

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use webpack for logging #55

use webpack for logging #55

djskinner commented May 18, 2021 •

edited

Loading

djskinner May 18, 2021

djskinner May 19, 2021

bengourley May 26, 2021

bengourley left a comment

bengourley May 26, 2021

djskinner Jun 8, 2021

djskinner Jun 8, 2021

use webpack for logging #55

use webpack for logging #55

Conversation

djskinner commented May 18, 2021 • edited Loading

Goal

Design

Changeset

Testing

djskinner May 18, 2021

Choose a reason for hiding this comment

djskinner May 19, 2021

Choose a reason for hiding this comment

bengourley May 26, 2021

Choose a reason for hiding this comment

bengourley left a comment

Choose a reason for hiding this comment

bengourley May 26, 2021

Choose a reason for hiding this comment

djskinner Jun 8, 2021

Choose a reason for hiding this comment

djskinner Jun 8, 2021

Choose a reason for hiding this comment

djskinner commented May 18, 2021 •

edited

Loading