@tourmind-frontend/monitor-plugin-webpack 1.2.0 → 1.6.0

package/dist/index.cjs

@@ -33,6 +33,7 @@ __export(src_exports, {
   default: () => UploadSourceMapPlugin
 });
 module.exports = __toCommonJS(src_exports);
+var import_zlib = require("zlib");
 var import_axios = __toESM(require("axios"), 1);
 var import_form_data = __toESM(require("form-data"), 1);
 var LOG_PREFIX = "[frontend-monitor]";
@@ -43,6 +44,11 @@ function defaultLogger(level, msg, extra) {
   else if (level === "warn") console.warn(line, tail);
   else console.error(line, tail);
 }
+function formatSize(bytes) {
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${bytes}B`;
+}
 function extractSourceMaps(compilation) {
   const result = [];
   const assets = compilation.assets;
@@ -65,10 +71,16 @@ function extractSourceMaps(compilation) {
 }
 async function uploadFiles({ url, query, files }) {
   const form = new import_form_data.default();
+  let rawBytes = 0;
+  let gzipBytes = 0;
   for (const [filename, content] of files) {
-    form.append("file", Buffer.from(content, "utf-8"), { filename });
+    const raw = Buffer.from(content, "utf-8");
+    const gz = (0, import_zlib.gzipSync)(raw);
+    rawBytes += raw.byteLength;
+    gzipBytes += gz.byteLength;
+    form.append("file", gz, { filename });
   }
-  const qs = new URLSearchParams(query).toString();
+  const qs = new URLSearchParams({ ...query, encoding: "gzip" }).toString();
   const fullUrl = `${url}${url.includes("?") ? "&" : "?"}${qs}`;
   await (0, import_axios.default)({
     method: "POST",
@@ -78,14 +90,28 @@ async function uploadFiles({ url, query, files }) {
     maxBodyLength: Infinity,
     maxContentLength: Infinity
   });
+  return { rawBytes, gzipBytes };
 }
 var UploadSourceMapPlugin = class {
   constructor(options) {
+    // emit 阶段 fire-and-forget 启动的上传任务；用数组而非单值，兼容同一实例被挂到
+    // 多个 compiler（如 Nuxt 2 modern 模式 client + modern 双客户端构建）的情况。
+    this.pendingUploads = [];
     if (!options.url) throw new Error(`${LOG_PREFIX} "url" is required`);
-    if (!options.token) throw new Error(`${LOG_PREFIX} "token" is required`);
+    if (!options.authToken) throw new Error(`${LOG_PREFIX} "authToken" is required`);
+    if (!options.authToken.startsWith("fm_at_")) {
+      throw new Error(`${LOG_PREFIX} "authToken" must start with "fm_at_"; do not use the client key here`);
+    }
     if (!options.commit) throw new Error(`${LOG_PREFIX} "commit" is required`);
     this.options = options;
   }
+  /**
+   * 等待所有已启动的上传完成（上传失败已被内部 catch 吞掉，不会 reject）。
+   * deferWait 模式下由调用方在构建尾声调用，确保进程退出前上传完成。
+   */
+  waitForUpload() {
+    return Promise.all(this.pendingUploads).then(() => void 0);
+  }
   apply(compiler) {
     var _a;
     const options = this.options;
@@ -93,7 +119,6 @@ var UploadSourceMapPlugin = class {
     if (compiler.options.mode !== "production") return;
     const uploadUrl = `${options.url.replace(/\/+$/, "")}/api/upload`;
     compiler.options.devtool = "hidden-source-map";
-    let uploadPromise = null;
     compiler.hooks.emit.tap("UploadSourceMapPlugin", (compilation) => {
       var _a2;
       const files = extractSourceMaps(compilation);
@@ -104,14 +129,21 @@ var UploadSourceMapPlugin = class {
       const { commit } = options;
       const timestamp = (_a2 = options.timestamp) != null ? _a2 : Date.now();
       const query = {
-        token: options.token,
+        token: options.authToken,
         timestamp: String(timestamp)
       };
       query.commit = commit;
-      uploadPromise = uploadFiles({ url: uploadUrl, query, files }).then(() => log("info", `uploaded ${files.length} sourcemap file(s) (commit=${commit})`)).catch((err) => log("error", "upload failed", err instanceof Error ? err.message : err));
-    });
-    compiler.hooks.done.tapPromise("UploadSourceMapPlugin", async () => {
-      if (uploadPromise) await uploadPromise;
+      this.pendingUploads.push(
+        uploadFiles({ url: uploadUrl, query, files }).then(
+          ({ rawBytes, gzipBytes }) => log(
+            "info",
+            `uploaded ${files.length} sourcemap file(s) (commit=${commit}, ${formatSize(rawBytes)} -> ${formatSize(gzipBytes)} gzipped)`
+          )
+        ).catch((err) => log("error", "upload failed", err instanceof Error ? err.message : err))
+      );
     });
+    if (!options.deferWait) {
+      compiler.hooks.done.tapPromise("UploadSourceMapPlugin", () => this.waitForUpload());
+    }
   }
 };

package/dist/index.d.ts

@@ -2,17 +2,30 @@ import { Compiler } from "webpack";
 export interface UploadSourceMapOptions {
     /** monitor 服务的 base URL，例如 `https://monitor.example.com`。内部拼接 `/api/upload`。 */
     url: string;
-    /** monitor 项目 token，从 web 控制台创建项目后获取，内部已绑定仓库 + 分支。 */
-    token: string;
+    /** monitor 项目 auth token（前缀 `fm_at_`），仅供 CI / 构建机使用，从 web 控制台「项目」页获取。 */
+    authToken: string;
     /** Commit hash，由调用方自行解析(如 `git rev-parse HEAD`)。 */
     commit: string;
     /** 构建时间戳(毫秒)，未设置时取上传时刻的 `Date.now()`。 */
     timestamp?: number;
     /** 自定义 logger，默认走 `console.log` / `console.warn` / `console.error`。 */
     logger?: (level: "info" | "warn" | "error", msg: string, extra?: unknown) => void;
+    /**
+     * 为 true 时本插件不在 compiler 的 done 阶段等待上传完成，由调用方在更晚的时机
+     * （如 Nuxt 2 的 `build:done`，所有 compiler 都结束后）await `waitForUpload()`，
+     * 让上传与后续其它 compiler 的编译并行。
+     * 注意：调用方必须在构建进程退出前 await，否则 CI 退出会掐断未完成的上传。
+     */
+    deferWait?: boolean;
 }
 export default class UploadSourceMapPlugin {
     options: UploadSourceMapOptions;
+    private pendingUploads;
     constructor(options: UploadSourceMapOptions);
+    /**
+     * 等待所有已启动的上传完成（上传失败已被内部 catch 吞掉，不会 reject）。
+     * deferWait 模式下由调用方在构建尾声调用，确保进程退出前上传完成。
+     */
+    waitForUpload(): Promise<void>;
     apply(compiler: Compiler): void;
 }

package/dist/index.js

@@ -1,4 +1,5 @@
 // extensions/plugin-webpack/src/index.ts
+import { gzipSync } from "zlib";
 import axios from "axios";
 import FormData from "form-data";
 var LOG_PREFIX = "[frontend-monitor]";
@@ -9,6 +10,11 @@ function defaultLogger(level, msg, extra) {
   else if (level === "warn") console.warn(line, tail);
   else console.error(line, tail);
 }
+function formatSize(bytes) {
+  if (bytes >= 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${bytes}B`;
+}
 function extractSourceMaps(compilation) {
   const result = [];
   const assets = compilation.assets;
@@ -31,10 +37,16 @@ function extractSourceMaps(compilation) {
 }
 async function uploadFiles({ url, query, files }) {
   const form = new FormData();
+  let rawBytes = 0;
+  let gzipBytes = 0;
   for (const [filename, content] of files) {
-    form.append("file", Buffer.from(content, "utf-8"), { filename });
+    const raw = Buffer.from(content, "utf-8");
+    const gz = gzipSync(raw);
+    rawBytes += raw.byteLength;
+    gzipBytes += gz.byteLength;
+    form.append("file", gz, { filename });
   }
-  const qs = new URLSearchParams(query).toString();
+  const qs = new URLSearchParams({ ...query, encoding: "gzip" }).toString();
   const fullUrl = `${url}${url.includes("?") ? "&" : "?"}${qs}`;
   await axios({
     method: "POST",
@@ -44,14 +56,28 @@ async function uploadFiles({ url, query, files }) {
     maxBodyLength: Infinity,
     maxContentLength: Infinity
   });
+  return { rawBytes, gzipBytes };
 }
 var UploadSourceMapPlugin = class {
   constructor(options) {
+    // emit 阶段 fire-and-forget 启动的上传任务；用数组而非单值，兼容同一实例被挂到
+    // 多个 compiler（如 Nuxt 2 modern 模式 client + modern 双客户端构建）的情况。
+    this.pendingUploads = [];
     if (!options.url) throw new Error(`${LOG_PREFIX} "url" is required`);
-    if (!options.token) throw new Error(`${LOG_PREFIX} "token" is required`);
+    if (!options.authToken) throw new Error(`${LOG_PREFIX} "authToken" is required`);
+    if (!options.authToken.startsWith("fm_at_")) {
+      throw new Error(`${LOG_PREFIX} "authToken" must start with "fm_at_"; do not use the client key here`);
+    }
     if (!options.commit) throw new Error(`${LOG_PREFIX} "commit" is required`);
     this.options = options;
   }
+  /**
+   * 等待所有已启动的上传完成（上传失败已被内部 catch 吞掉，不会 reject）。
+   * deferWait 模式下由调用方在构建尾声调用，确保进程退出前上传完成。
+   */
+  waitForUpload() {
+    return Promise.all(this.pendingUploads).then(() => void 0);
+  }
   apply(compiler) {
     var _a;
     const options = this.options;
@@ -59,7 +85,6 @@ var UploadSourceMapPlugin = class {
     if (compiler.options.mode !== "production") return;
     const uploadUrl = `${options.url.replace(/\/+$/, "")}/api/upload`;
     compiler.options.devtool = "hidden-source-map";
-    let uploadPromise = null;
     compiler.hooks.emit.tap("UploadSourceMapPlugin", (compilation) => {
       var _a2;
       const files = extractSourceMaps(compilation);
@@ -70,15 +95,22 @@ var UploadSourceMapPlugin = class {
       const { commit } = options;
       const timestamp = (_a2 = options.timestamp) != null ? _a2 : Date.now();
       const query = {
-        token: options.token,
+        token: options.authToken,
         timestamp: String(timestamp)
       };
       query.commit = commit;
-      uploadPromise = uploadFiles({ url: uploadUrl, query, files }).then(() => log("info", `uploaded ${files.length} sourcemap file(s) (commit=${commit})`)).catch((err) => log("error", "upload failed", err instanceof Error ? err.message : err));
-    });
-    compiler.hooks.done.tapPromise("UploadSourceMapPlugin", async () => {
-      if (uploadPromise) await uploadPromise;
+      this.pendingUploads.push(
+        uploadFiles({ url: uploadUrl, query, files }).then(
+          ({ rawBytes, gzipBytes }) => log(
+            "info",
+            `uploaded ${files.length} sourcemap file(s) (commit=${commit}, ${formatSize(rawBytes)} -> ${formatSize(gzipBytes)} gzipped)`
+          )
+        ).catch((err) => log("error", "upload failed", err instanceof Error ? err.message : err))
+      );
     });
+    if (!options.deferWait) {
+      compiler.hooks.done.tapPromise("UploadSourceMapPlugin", () => this.waitForUpload());
+    }
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tourmind-frontend/monitor-plugin-webpack",
-  "version": "1.2.0",
+  "version": "1.6.0",
   "description": "Webpack plugin that uploads sourcemaps to a frontend-monitor server.",
   "type": "module",
   "main": "./dist/index.cjs",