Add printing asset stats to Webpack plugin (#32)

* webpack-plugin: add webpack build for testing

* webpack-plugin: add asset stats printing

* webpack plugin: changes info logs to log

---------

Co-authored-by: Sebastian Alex <sebastian.alex@saucelabs.com>

Author: perf2711

package-lock.json

@@ -0,0 +1 @@
+webpackBuild/

tools/webpack-plugin/.gitignore

@@ -9,6 +9,7 @@
     },
     "scripts": {
         "build": "tsc -b ./tsconfig.build.json",
+        "build:webpack": "webpack",
         "clean": "tsc -b ./tsconfig.build.json --clean && rimraf \"lib\"",
         "format": "prettier --write '**/*.ts'",
         "lint": "eslint . --ext .ts",
@@ -45,9 +46,11 @@
         "jest": "^29.5.0",
         "ts-jest": "^29.1.0",
         "ts-loader": "^9.4.3 || ^8.4.0",
+        "ts-loader-webpack-4": "npm:ts-loader@^8.4.0",
         "typescript": "^5.0.4",
         "webpack-4": "npm:webpack@^4.46.0",
-        "ts-loader-webpack-4": "npm:ts-loader@^8.4.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-node-externals": "^3.0.0",
         "webpack-sources-webpack-4": "npm:webpack-sources@^1.4.1"
     },
     "dependencies": {

tools/webpack-plugin/package.json

@@ -1,6 +1,8 @@
 import { DebugIdGenerator, SourceMapUploader, SourceProcessor } from '@backtrace/sourcemap-tools';
 import path from 'path';
 import webpack, { WebpackPluginInstance } from 'webpack';
+import { statsPrinter } from './helpers/statsPrinter';
+import { AssetStats } from './models/AssetStats';
 import { BacktracePluginOptions } from './models/BacktracePluginOptions';
 
 export class BacktracePlugin implements WebpackPluginInstance {
@@ -15,6 +17,8 @@ export class BacktracePlugin implements WebpackPluginInstance {
     }
 
     public apply(compiler: webpack.Compiler) {
+        const assetStats = new Map<string, AssetStats>();
+
         compiler.hooks.afterEmit.tapPromise(BacktracePlugin.name, async (compilation) => {
             const logger = compilation.getLogger(BacktracePlugin.name);
             if (!compilation.outputOptions.path) {
@@ -48,33 +52,47 @@ export class BacktracePlugin implements WebpackPluginInstance {
             logger.log(`received ${entries.length} files for processing`);
 
             for (const [asset, sourcePath, sourceMapPath] of entries) {
+                const stats: AssetStats = {};
+                assetStats.set(asset, stats);
+
                 let debugId: string;
 
                 logger.time(`[${asset}] process source and sourcemap`);
                 try {
                     debugId = await this._sourceProcessor.processSourceAndSourceMapFiles(sourcePath, sourceMapPath);
+                    stats.debugId = debugId;
+                    stats.processSource = true;
+                    logger.timeEnd(`[${asset}] process source and sourcemap`);
                 } catch (err) {
                     logger.error(`[${asset}] process source and sourcemap failed:`, err);
+                    stats.processSource = err instanceof Error ? err : new Error('Unknown error.');
                     continue;
                 } finally {
                     logger.timeEnd(`[${asset}] process source and sourcemap`);
                 }
 
                 if (!this._sourceMapUploader) {
-                    logger.info(`[${asset}] file processed`);
+                    logger.log(`[${asset}] file processed`);
                     continue;
                 }
 
                 logger.time(`[${asset}] upload sourcemap`);
                 try {
-                    await this._sourceMapUploader.upload(sourceMapPath, debugId);
-                    logger.info(`[${asset}] file processed and sourcemap uploaded`);
+                    const result = await this._sourceMapUploader.upload(sourceMapPath, debugId);
+                    stats.sourceMapUpload = result;
+                    logger.log(`[${asset}] file processed and sourcemap uploaded`);
                 } catch (err) {
                     logger.error(`[${asset}] upload sourcemap failed:`, err);
+                    stats.sourceMapUpload = err instanceof Error ? err : new Error('Unknown error.');
                 } finally {
                     logger.timeEnd(`[${asset}] upload sourcemap`);
                 }
             }
+
+            const printer = statsPrinter(compilation.getLogger(BacktracePlugin.name));
+            for (const [key, stats] of assetStats) {
+                printer(key, stats);
+            }
         });
     }
 }

tools/webpack-plugin/src/BacktracePlugin.ts

@@ -0,0 +1,52 @@
+import webpack from 'webpack';
+import { AssetStats } from '../models/AssetStats';
+
+function statToString(stat: boolean | string | Error) {
+    if (typeof stat === 'string') {
+        return stat;
+    }
+
+    if (typeof stat === 'boolean') {
+        return stat ? 'successful' : 'skipped';
+    }
+
+    return stat.message;
+}
+
+export function statsPrinter(logger: webpack.Compilation['logger']) {
+    return function printStats(key: string, stats: AssetStats) {
+        const errors = [stats.sourceMapUpload, stats.processSource].some((v) => v instanceof Error);
+
+        const infoLog = errors
+            ? (...args: unknown[]) => logger.error(...args)
+            : (...args: unknown[]) => logger.info(...args);
+
+        const debugLog = (...args: unknown[]) => logger.log(...args);
+
+        if (!errors) {
+            if (!!stats.sourceMapUpload && !(stats.sourceMapUpload instanceof Error)) {
+                infoLog(`[${key}] processed file and uploaded sourcemap successfully`);
+            } else {
+                infoLog(`[${key}] processed file successfully`);
+            }
+        } else {
+            infoLog(`[${key}] processed file with errors`);
+        }
+
+        debugLog(`\tdebugId: ${stats.debugId ?? '<not generated>'}`);
+
+        if (stats.processSource != null) {
+            debugLog(`\tsource snippet append: ${statToString(stats.processSource) ?? '<disabled>'}`);
+        }
+
+        if (stats.sourceMapUpload != null) {
+            if (stats.sourceMapUpload === false || stats.sourceMapUpload instanceof Error) {
+                debugLog(`\tsourcemap upload: ${statToString(stats.sourceMapUpload)}`);
+            } else {
+                debugLog(
+                    `\tsourcemap upload: yes, rxid: ${stats.sourceMapUpload.rxid}, debugId: ${stats.sourceMapUpload.debugId}`,
+                );
+            }
+        }
+    };
+}

tools/webpack-plugin/src/helpers/statsPrinter.ts

@@ -0,0 +1,7 @@
+import { UploadResult } from '@backtrace/sourcemap-tools';
+
+export interface AssetStats {
+    debugId?: string;
+    processSource?: boolean | string | Error;
+    sourceMapUpload?: false | UploadResult | Error;
+}

tools/webpack-plugin/src/models/AssetStats.ts

@@ -0,0 +1,39 @@
+const path = require('path');
+const { BacktracePlugin } = require('./lib');
+const nodeExternals = require('webpack-node-externals');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+    entry: './src/index.ts',
+    devtool: 'source-map',
+    mode: 'production',
+    target: 'node',
+    externalsPresets: { node: true },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    stats: {
+        logging: 'verbose',
+    },
+    module: {
+        rules: [
+            {
+                test: /.ts$/,
+                loader: 'ts-loader',
+                options: {
+                    configFile: 'tsconfig.build.json',
+                },
+            },
+        ],
+    },
+    output: {
+        path: path.join(__dirname, './webpackBuild'),
+        filename: '[name].js',
+    },
+    externals: [
+        nodeExternals({
+            additionalModuleDirs: ['../../node_modules'],
+        }),
+    ],
+    plugins: [new BacktracePlugin({})],
+};