webpack plugin: update plugin to use common code (#56)

* sourcemap tools: fix doesSourceMapHaveSources with undefined sources array

* sourcemap tools: add functions in AsyncResult

* sourcemap tools: add common helpers from CLI to sourcemap-tools and use them

* sourcemap tools: add some common functions and match functions

* sourcemap tools: add common code for managing sourcemaps

* webpack: update plugin to use common code

---------

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

Author: perf2711

tools/webpack-plugin/src/BacktracePlugin.ts

@@ -1,132 +1,41 @@
-import { DebugIdGenerator, SourceProcessor, SymbolUploader, ZipArchive } from '@backtrace/sourcemap-tools';
-import fs from 'fs';
+import { Asset, matchSourceExtension, processAndUploadAssetsCommand } from '@backtrace/sourcemap-tools';
 import path from 'path';
 import webpack, { WebpackPluginInstance } from 'webpack';
 import { BacktracePluginOptions } from './models/BacktracePluginOptions';
 
 export class BacktracePlugin implements WebpackPluginInstance {
-    private readonly _sourceProcessor: SourceProcessor;
-    private readonly _sourceMapUploader?: SymbolUploader;
-
-    constructor(public readonly options?: BacktracePluginOptions) {
-        this._sourceProcessor = new SourceProcessor(new DebugIdGenerator());
-        this._sourceMapUploader = options?.uploadUrl
-            ? new SymbolUploader(options.uploadUrl, options.uploadOptions)
-            : undefined;
-    }
+    constructor(public readonly options?: BacktracePluginOptions) {}
 
     public apply(compiler: webpack.Compiler) {
-        const processResults = new Map<string, string | Error>();
-        let uploadResult: string | Error | undefined;
-
         compiler.hooks.afterEmit.tapPromise(BacktracePlugin.name, async (compilation) => {
             const logger = compilation.getLogger(BacktracePlugin.name);
-            if (!compilation.outputOptions.path) {
+            const outputDir = compilation.outputOptions.path;
+            if (!outputDir) {
                 logger.error(
                     'Skipping everything because outputOptions.path is not set. If you see this error, please report this to Backtrace.',
                 );
                 return;
             }
 
-            const entries: [string, string, string][] = [];
-
-            for (const asset in compilation.assets) {
-                if (!asset.match(/\.(c|m)?jsx?$/)) {
-                    logger.debug(`[${asset}] skipping processing, extension does not match`);
-                    continue;
-                }
-
-                const map = asset + '.map';
-                if (!compilation.assets[map]) {
-                    logger.debug(`[${asset}] skipping processing, map file not found`);
-                    continue;
-                }
-
-                const assetPath = path.join(compilation.outputOptions.path, asset);
-                const sourceMapPath = path.join(compilation.outputOptions.path, map);
-
-                logger.debug(`adding asset ${assetPath} with sourcemap ${sourceMapPath}`);
-                entries.push([asset, assetPath, sourceMapPath]);
-            }
-
-            logger.log(`received ${entries.length} files for processing`);
-
-            for (const [asset, sourcePath, sourceMapPath] of entries) {
-                let debugId: string;
+            const processAndUpload = processAndUploadAssetsCommand(this.options ?? {}, {
+                beforeAll: (assets) => logger.log(`processing ${assets.length} files`),
 
-                logger.time(`[${asset}] process source and sourcemap`);
-                try {
-                    const result = await this._sourceProcessor.processSourceAndSourceMapFiles(
-                        sourcePath,
-                        sourceMapPath,
-                    );
+                afterProcess: (asset) => logger.log(`[${asset.asset.name}] processed source and sourcemap`),
+                afterWrite: (asset) => logger.log(`[${asset.asset.name}] wrote source and sourcemap to file`),
+                assetFinished: (asset) => logger.info(`[${asset.asset.name}] asset processed successfully`),
+                assetError: (asset) => logger.error(`[${asset.asset.name}] ${asset.error}`),
 
-                    if (result.isErr()) {
-                        logger.error(`[${asset}] process source and sourcemap failed:`, result.data);
-                        processResults.set(asset, new Error(result.data));
-                        continue;
-                    }
+                beforeArchive: (paths) => logger.log(`creating archive to upload from ${paths.length} files`),
+                beforeUpload: () => logger.log(`uploading sourcemaps...`),
+                afterUpload: (result) => logger.info(`sourcemaps uploaded to Backtrace: ${result.rxid}`),
+                uploadError: (error) => logger.error(`failed to upload sourcemaps: ${error}`),
+            });
 
-                    debugId = result.data.debugId;
-                    await fs.promises.writeFile(sourcePath, result.data.source, 'utf8');
-                    await fs.promises.writeFile(sourceMapPath, JSON.stringify(result.data.sourceMap), 'utf8');
+            const assets = Object.keys(compilation.assets)
+                .filter(matchSourceExtension)
+                .map<Asset>((asset) => ({ name: asset, path: path.join(outputDir, asset) }));
 
-                    processResults.set(asset, debugId);
-                } catch (err) {
-                    logger.error(`[${asset}] process source and sourcemap failed:`, err);
-                    processResults.set(asset, err instanceof Error ? err : new Error('Unknown error.'));
-                    continue;
-                } finally {
-                    logger.timeEnd(`[${asset}] process source and sourcemap`);
-                }
-            }
-
-            if (this._sourceMapUploader) {
-                logger.time(`upload sourcemaps`);
-                try {
-                    const archive = new ZipArchive();
-                    const request = this._sourceMapUploader.uploadSymbol(archive);
-
-                    for (const [asset, _, sourceMapPath] of entries) {
-                        const stream = fs.createReadStream(sourceMapPath);
-                        archive.append(`${asset}.map`, stream);
-                    }
-
-                    await archive.finalize();
-                    const result = await request;
-                    if (result.isErr()) {
-                        logger.error(`upload sourcemaps failed:`, result.data);
-                        uploadResult = new Error(result.data);
-                    } else {
-                        uploadResult = result.data.rxid;
-                    }
-                } catch (err) {
-                    logger.error(`upload sourcemaps failed:`, err);
-                    uploadResult = err instanceof Error ? err : new Error('Unknown error.');
-                } finally {
-                    logger.timeEnd(`upload sourcemaps`);
-                }
-            }
-
-            for (const [key, result] of processResults) {
-                if (typeof result === 'string') {
-                    logger.info(`[${key}] processed file successfully`);
-                    logger.debug(`\tdebugId: ${result}`);
-                } else {
-                    logger.error(`[${key}] failed to process file: ${result.message}`);
-                    logger.debug(`Error stack trace: ${result.stack}`);
-                }
-            }
-
-            if (uploadResult) {
-                if (typeof uploadResult === 'string') {
-                    logger.info(`uploaded sourcemaps successfully`);
-                    logger.debug(`\trxid: ${uploadResult}`);
-                } else {
-                    logger.error(`failed to upload sourcemaps: ${uploadResult.message}`);
-                    logger.debug(`Error stack trace: ${uploadResult.stack}`);
-                }
-            }
+            await processAndUpload(assets);
         });
     }
 }