@flareapp/webpack 2.0.0

package/.oxlintrc.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../node_modules/oxlint/configuration_schema.json",
+    "extends": ["../../.oxlintrc.json"],
+    "env": {
+        "node": true
+    }
+}

package/README.md

@@ -0,0 +1,52 @@
+# @flareapp/webpack
+
+Webpack 5 plugin for [Flare](https://flareapp.io) that uploads sourcemaps after each build. With sourcemaps, error reports sent by `@flareapp/js` will show the original source code instead of minified output.
+
+The plugin also injects the Flare API key and a sourcemap version identifier into your build via `DefinePlugin`, so `flare.light()` works without any additional configuration.
+
+## Installation
+
+```bash
+npm install @flareapp/webpack
+```
+
+## Quick start
+
+Add the plugin to your `webpack.config.js`:
+
+```js
+const { FlareWebpackPlugin } = require('@flareapp/webpack');
+
+module.exports = {
+    // ...
+    devtool: 'source-map',
+    plugins: [
+        new FlareWebpackPlugin({
+            apiKey: 'YOUR_FLARE_API_KEY',
+        }),
+    ],
+};
+```
+
+## Options
+
+| Option             | Type      | Default                              | Description                                        |
+| ------------------ | --------- | ------------------------------------ | -------------------------------------------------- |
+| `apiKey`           | `string`  | (required)                           | Your Flare API key                                 |
+| `apiEndpoint`      | `string`  | `https://flareapp.io/api/sourcemaps` | Sourcemap upload endpoint                          |
+| `version`          | `string`  | random UUID                          | Sourcemap version identifier                       |
+| `removeSourcemaps` | `boolean` | `false`                              | Delete `.map` files from build output after upload |
+| `runInDevelopment` | `boolean` | `false`                              | Upload sourcemaps even in development mode         |
+| `publicPath`       | `string`  | from webpack config                  | Override the public path prepended to filenames    |
+
+## Compatibility
+
+- Webpack 5
+
+## Documentation
+
+Full documentation is available at [flareapp.io/docs/javascript/general/resolving-bundled-code](https://flareapp.io/docs/javascript/general/resolving-bundled-code).
+
+## License
+
+The MIT License (MIT). Please see [License File](../../LICENSE.md) for more information.

package/dist/index.cjs

@@ -0,0 +1,195 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let node_crypto = require("node:crypto");
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+let node_zlib = require("node:zlib");
+let webpack = require("webpack");
+webpack = __toESM(webpack);
+
+//#region ../flare-api/dist/index.mjs
+var FlareApiError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "FlareApiError";
+	}
+};
+const RETRIABLE_STATUS_CODES = new Set([
+	429,
+	502,
+	503,
+	504
+]);
+var FlareApi = class {
+	constructor(endpoint, key, version) {
+		this.endpoint = endpoint;
+		this.key = key;
+		this.version = version;
+	}
+	uploadSourcemap(sourcemap) {
+		const base64GzipSourcemap = (0, node_zlib.deflateRawSync)(sourcemap.content).toString("base64");
+		return this.postWithRetry({
+			key: this.key,
+			version_id: this.version,
+			relative_filename: sourcemap.originalFile,
+			sourcemap: base64GzipSourcemap
+		});
+	}
+	async postWithRetry(data, maxRetries = 3) {
+		for (let attempt = 1; attempt <= maxRetries; attempt++) {
+			try {
+				const response = await fetch(this.endpoint, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(data)
+				});
+				if (response.ok) return;
+				if (!RETRIABLE_STATUS_CODES.has(response.status)) {
+					const body = await response.text();
+					throw new FlareApiError(`Flare API returned ${response.status}: ${body}`);
+				}
+				if (attempt === maxRetries) throw new FlareApiError(`Flare API returned ${response.status} after ${maxRetries} attempts`);
+			} catch (error) {
+				if (error instanceof FlareApiError) throw error;
+				if (attempt === maxRetries) {
+					const message = error instanceof Error ? error.message : String(error);
+					throw new Error(`Network error after ${maxRetries} attempts: ${message}`, { cause: error });
+				}
+			}
+			await this.delay(Math.pow(2, attempt - 1) * 1e3);
+		}
+	}
+	delay(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+};
+
+//#endregion
+//#region src/FlareWebpackPlugin.ts
+function log(message, isError = false) {
+	const formatted = `@flareapp/webpack: ${message}`;
+	if (isError) console.error(formatted);
+	else console.log(formatted);
+}
+var FlareWebpackPlugin = class {
+	apiKey;
+	apiEndpoint;
+	runInDevelopment;
+	version;
+	removeSourcemaps;
+	publicPathOverride;
+	constructor({ apiKey, apiEndpoint = "https://flareapp.io/api/sourcemaps", runInDevelopment = false, version = (0, node_crypto.randomUUID)(), removeSourcemaps = false, publicPath }) {
+		this.apiKey = apiKey;
+		this.apiEndpoint = apiEndpoint;
+		this.runInDevelopment = runInDevelopment;
+		this.version = version;
+		this.removeSourcemaps = removeSourcemaps;
+		this.publicPathOverride = publicPath;
+	}
+	apply(compiler) {
+		const { DefinePlugin } = webpack.default;
+		new DefinePlugin({
+			FLARE_JS_KEY: JSON.stringify(this.apiKey),
+			FLARE_SOURCEMAP_VERSION: JSON.stringify(this.version)
+		}).apply(compiler);
+		const flare = new FlareApi(this.apiEndpoint, this.apiKey, this.version);
+		compiler.hooks.afterEmit.tapPromise("FlareWebpackPlugin", async (compilation) => {
+			if (!this.shouldUpload(compiler, compilation)) return;
+			const resolvedPublicPath = this.resolvePublicPath(compiler);
+			const sourcemaps = this.getSourcemaps(compilation, resolvedPublicPath);
+			if (!sourcemaps.length) {
+				compilation.warnings.push(new webpack.default.WebpackError("@flareapp/webpack: No sourcemap files found. Make sure sourcemaps are enabled in your webpack config."));
+				return;
+			}
+			log(`Uploading ${sourcemaps.length} sourcemap(s) to Flare.`);
+			const results = await Promise.allSettled(sourcemaps.map(({ sourcemap }) => flare.uploadSourcemap(sourcemap)));
+			const failed = results.filter((r) => r.status === "rejected");
+			if (failed.length > 0) for (const result of failed) compilation.warnings.push(new webpack.default.WebpackError(`@flareapp/webpack: Upload failed: ${result.reason}`));
+			else log("Successfully uploaded all sourcemaps to Flare.");
+			if (this.removeSourcemaps) {
+				for (let i = 0; i < sourcemaps.length; i++) {
+					if (results[i].status === "rejected") continue;
+					try {
+						(0, node_fs.unlinkSync)(sourcemaps[i].path);
+					} catch (error) {
+						log(`Error removing ${sourcemaps[i].path}: ${error}`, true);
+					}
+				}
+				log("Removed sourcemap files from build output.");
+			}
+		});
+	}
+	shouldUpload(compiler, compilation) {
+		if (!this.apiKey) {
+			compilation.warnings.push(new webpack.default.WebpackError("@flareapp/webpack: No Flare API key provided, not uploading sourcemaps."));
+			return false;
+		}
+		if (!this.runInDevelopment && compiler.options.mode === "development") {
+			log("Running webpack in development mode, not uploading sourcemaps.");
+			return false;
+		}
+		if (compiler.options.watch) {
+			log("Running webpack in watch mode, not uploading sourcemaps.");
+			return false;
+		}
+		return true;
+	}
+	resolvePublicPath(compiler) {
+		if (this.publicPathOverride != null) return this.publicPathOverride.endsWith("/") ? this.publicPathOverride : `${this.publicPathOverride}/`;
+		const configPublicPath = compiler.options.output?.publicPath;
+		if (typeof configPublicPath === "string" && configPublicPath && configPublicPath !== "auto") return configPublicPath.endsWith("/") ? configPublicPath : `${configPublicPath}/`;
+		return "/";
+	}
+	getSourcemaps(compilation, publicPath) {
+		const outputPath = compilation.getPath(compilation.compiler.outputPath);
+		const sourcemaps = [];
+		for (const chunk of compilation.chunks) {
+			const jsFile = [...chunk.files].find((file) => file.endsWith(".js"));
+			const mapFile = [...chunk.auxiliaryFiles].find((file) => file.endsWith(".js.map"));
+			if (!jsFile || !mapFile) continue;
+			const mapPath = (0, node_path.join)(outputPath, mapFile);
+			try {
+				const content = (0, node_fs.readFileSync)(mapPath, "utf8");
+				sourcemaps.push({
+					sourcemap: {
+						originalFile: `${publicPath}${jsFile}`,
+						content
+					},
+					path: mapPath
+				});
+			} catch (error) {
+				log(`Error reading sourcemap ${mapPath}: ${error}`, true);
+			}
+		}
+		return sourcemaps;
+	}
+};
+
+//#endregion
+exports.FlareWebpackPlugin = FlareWebpackPlugin;

package/dist/index.d.cts

@@ -0,0 +1,35 @@
+import { Compiler } from "webpack";
+
+//#region src/types.d.ts
+type FlareWebpackPluginOptions = {
+  apiKey: string;
+  apiEndpoint?: string;
+  runInDevelopment?: boolean;
+  version?: string;
+  removeSourcemaps?: boolean;
+  publicPath?: string;
+};
+//#endregion
+//#region src/FlareWebpackPlugin.d.ts
+declare class FlareWebpackPlugin {
+  private readonly apiKey;
+  private readonly apiEndpoint;
+  private readonly runInDevelopment;
+  private readonly version;
+  private readonly removeSourcemaps;
+  private readonly publicPathOverride;
+  constructor({
+    apiKey,
+    apiEndpoint,
+    runInDevelopment,
+    version,
+    removeSourcemaps,
+    publicPath
+  }: FlareWebpackPluginOptions);
+  apply(compiler: Compiler): void;
+  private shouldUpload;
+  private resolvePublicPath;
+  private getSourcemaps;
+}
+//#endregion
+export { FlareWebpackPlugin, type FlareWebpackPluginOptions };

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import { Compiler } from "webpack";
+
+//#region src/types.d.ts
+type FlareWebpackPluginOptions = {
+  apiKey: string;
+  apiEndpoint?: string;
+  runInDevelopment?: boolean;
+  version?: string;
+  removeSourcemaps?: boolean;
+  publicPath?: string;
+};
+//#endregion
+//#region src/FlareWebpackPlugin.d.ts
+declare class FlareWebpackPlugin {
+  private readonly apiKey;
+  private readonly apiEndpoint;
+  private readonly runInDevelopment;
+  private readonly version;
+  private readonly removeSourcemaps;
+  private readonly publicPathOverride;
+  constructor({
+    apiKey,
+    apiEndpoint,
+    runInDevelopment,
+    version,
+    removeSourcemaps,
+    publicPath
+  }: FlareWebpackPluginOptions);
+  apply(compiler: Compiler): void;
+  private shouldUpload;
+  private resolvePublicPath;
+  private getSourcemaps;
+}
+//#endregion
+export { FlareWebpackPlugin, type FlareWebpackPluginOptions };

package/dist/index.mjs

@@ -0,0 +1,166 @@
+import { randomUUID } from "node:crypto";
+import { readFileSync, unlinkSync } from "node:fs";
+import { join } from "node:path";
+import { deflateRawSync } from "node:zlib";
+import webpack from "webpack";
+
+//#region ../flare-api/dist/index.mjs
+var FlareApiError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "FlareApiError";
+	}
+};
+const RETRIABLE_STATUS_CODES = new Set([
+	429,
+	502,
+	503,
+	504
+]);
+var FlareApi = class {
+	constructor(endpoint, key, version) {
+		this.endpoint = endpoint;
+		this.key = key;
+		this.version = version;
+	}
+	uploadSourcemap(sourcemap) {
+		const base64GzipSourcemap = deflateRawSync(sourcemap.content).toString("base64");
+		return this.postWithRetry({
+			key: this.key,
+			version_id: this.version,
+			relative_filename: sourcemap.originalFile,
+			sourcemap: base64GzipSourcemap
+		});
+	}
+	async postWithRetry(data, maxRetries = 3) {
+		for (let attempt = 1; attempt <= maxRetries; attempt++) {
+			try {
+				const response = await fetch(this.endpoint, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(data)
+				});
+				if (response.ok) return;
+				if (!RETRIABLE_STATUS_CODES.has(response.status)) {
+					const body = await response.text();
+					throw new FlareApiError(`Flare API returned ${response.status}: ${body}`);
+				}
+				if (attempt === maxRetries) throw new FlareApiError(`Flare API returned ${response.status} after ${maxRetries} attempts`);
+			} catch (error) {
+				if (error instanceof FlareApiError) throw error;
+				if (attempt === maxRetries) {
+					const message = error instanceof Error ? error.message : String(error);
+					throw new Error(`Network error after ${maxRetries} attempts: ${message}`, { cause: error });
+				}
+			}
+			await this.delay(Math.pow(2, attempt - 1) * 1e3);
+		}
+	}
+	delay(ms) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+};
+
+//#endregion
+//#region src/FlareWebpackPlugin.ts
+function log(message, isError = false) {
+	const formatted = `@flareapp/webpack: ${message}`;
+	if (isError) console.error(formatted);
+	else console.log(formatted);
+}
+var FlareWebpackPlugin = class {
+	apiKey;
+	apiEndpoint;
+	runInDevelopment;
+	version;
+	removeSourcemaps;
+	publicPathOverride;
+	constructor({ apiKey, apiEndpoint = "https://flareapp.io/api/sourcemaps", runInDevelopment = false, version = randomUUID(), removeSourcemaps = false, publicPath }) {
+		this.apiKey = apiKey;
+		this.apiEndpoint = apiEndpoint;
+		this.runInDevelopment = runInDevelopment;
+		this.version = version;
+		this.removeSourcemaps = removeSourcemaps;
+		this.publicPathOverride = publicPath;
+	}
+	apply(compiler) {
+		const { DefinePlugin } = webpack;
+		new DefinePlugin({
+			FLARE_JS_KEY: JSON.stringify(this.apiKey),
+			FLARE_SOURCEMAP_VERSION: JSON.stringify(this.version)
+		}).apply(compiler);
+		const flare = new FlareApi(this.apiEndpoint, this.apiKey, this.version);
+		compiler.hooks.afterEmit.tapPromise("FlareWebpackPlugin", async (compilation) => {
+			if (!this.shouldUpload(compiler, compilation)) return;
+			const resolvedPublicPath = this.resolvePublicPath(compiler);
+			const sourcemaps = this.getSourcemaps(compilation, resolvedPublicPath);
+			if (!sourcemaps.length) {
+				compilation.warnings.push(new webpack.WebpackError("@flareapp/webpack: No sourcemap files found. Make sure sourcemaps are enabled in your webpack config."));
+				return;
+			}
+			log(`Uploading ${sourcemaps.length} sourcemap(s) to Flare.`);
+			const results = await Promise.allSettled(sourcemaps.map(({ sourcemap }) => flare.uploadSourcemap(sourcemap)));
+			const failed = results.filter((r) => r.status === "rejected");
+			if (failed.length > 0) for (const result of failed) compilation.warnings.push(new webpack.WebpackError(`@flareapp/webpack: Upload failed: ${result.reason}`));
+			else log("Successfully uploaded all sourcemaps to Flare.");
+			if (this.removeSourcemaps) {
+				for (let i = 0; i < sourcemaps.length; i++) {
+					if (results[i].status === "rejected") continue;
+					try {
+						unlinkSync(sourcemaps[i].path);
+					} catch (error) {
+						log(`Error removing ${sourcemaps[i].path}: ${error}`, true);
+					}
+				}
+				log("Removed sourcemap files from build output.");
+			}
+		});
+	}
+	shouldUpload(compiler, compilation) {
+		if (!this.apiKey) {
+			compilation.warnings.push(new webpack.WebpackError("@flareapp/webpack: No Flare API key provided, not uploading sourcemaps."));
+			return false;
+		}
+		if (!this.runInDevelopment && compiler.options.mode === "development") {
+			log("Running webpack in development mode, not uploading sourcemaps.");
+			return false;
+		}
+		if (compiler.options.watch) {
+			log("Running webpack in watch mode, not uploading sourcemaps.");
+			return false;
+		}
+		return true;
+	}
+	resolvePublicPath(compiler) {
+		if (this.publicPathOverride != null) return this.publicPathOverride.endsWith("/") ? this.publicPathOverride : `${this.publicPathOverride}/`;
+		const configPublicPath = compiler.options.output?.publicPath;
+		if (typeof configPublicPath === "string" && configPublicPath && configPublicPath !== "auto") return configPublicPath.endsWith("/") ? configPublicPath : `${configPublicPath}/`;
+		return "/";
+	}
+	getSourcemaps(compilation, publicPath) {
+		const outputPath = compilation.getPath(compilation.compiler.outputPath);
+		const sourcemaps = [];
+		for (const chunk of compilation.chunks) {
+			const jsFile = [...chunk.files].find((file) => file.endsWith(".js"));
+			const mapFile = [...chunk.auxiliaryFiles].find((file) => file.endsWith(".js.map"));
+			if (!jsFile || !mapFile) continue;
+			const mapPath = join(outputPath, mapFile);
+			try {
+				const content = readFileSync(mapPath, "utf8");
+				sourcemaps.push({
+					sourcemap: {
+						originalFile: `${publicPath}${jsFile}`,
+						content
+					},
+					path: mapPath
+				});
+			} catch (error) {
+				log(`Error reading sourcemap ${mapPath}: ${error}`, true);
+			}
+		}
+		return sourcemaps;
+	}
+};
+
+//#endregion
+export { FlareWebpackPlugin };

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@flareapp/webpack",
+    "version": "2.0.0",
+    "description": "Webpack plugin for uploading sourcemaps to Flare",
+    "homepage": "https://flareapp.io",
+    "bugs": "https://github.com/spatie/flare-client-js/issues",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/spatie/flare-client-js.git"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "Spatie",
+        "email": "info@spatie.be"
+    },
+    "contributors": [
+        "Dries Heyninck <dries@spatie.be>"
+    ],
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.cts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.mts",
+                "default": "./dist/index.mjs"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        }
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "scripts": {
+        "prepublishOnly": "npm run build",
+        "build": "tsdown src/index.ts --format cjs,esm --dts --clean --noExternal @flareapp/flare-api",
+        "test": "vitest run",
+        "typescript": "tsc --noEmit",
+        "release": "release-it"
+    },
+    "devDependencies": {
+        "@flareapp/flare-api": "*",
+        "@types/webpack": "^5.0.0",
+        "tsdown": "^0.20.3",
+        "typescript": "^5.7.0",
+        "vitest": "^4.0.0",
+        "webpack": "^5.0.0"
+    },
+    "peerDependencies": {
+        "webpack": "^5.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}