@flareapp/vite 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Spatie bvba <info@spatie.be>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# Vite plugin for sending sourcemaps to Flare
+
+The Flare Vite plugin helps you send sourcemaps of your compiled JavaScript code to Flare. This way, reports sent using the `@flareapp/js` will be formatted correctly.
+
+Additionally, it automatically passes the Flare API key to `@flareapp/js`. This way, `flare.light()` works without any additional configuration.
+
+Check the JavaScript error tracking section in [the Flare documentation](https://flareapp.io/docs/javascript-error-tracking/installation) for more information.
+
+## Installation
+
+Install the plugin using NPM or Yarn:
+
+```bash
+yarn add @flareapp/vite
+# or
+npm install @flareapp/vite
+```
+Next, add the plugin to your `vite.config.js` file:
+
+```js
+import { defineConfig } from 'vite';
+import flareSourcemapUploader from '@flareapp/vite';
+
+export default defineConfig({
+    plugins: [
+        flareSourcemapUploader({
+            key: 'YOUR API KEY HERE'
+        }),
+    ],
+});
+```
+
+Run the `vite build` command to make sure the sourcemaps are generated. You should see the following lines in the output:
+
+```bash
+@flareapp/flare-vite-plugin-sourcemaps: Uploading 12 sourcemap files to Flare.
+@flareapp/flare-vite-plugin-sourcemaps: Successfully uploaded sourcemaps to Flare.
+```
+
+## Configuration
+
+- `key: string` **(required)**: the Flare API key 
+- `base: string`: the base path of built output (defaults to Vite's base path)
+- `runInDevelopment: boolean`: whether to upload sourcemaps when `NODE_ENV=development` or when running the dev server (defaults to `false`)
+- `version: string`: the sourcemap version (defaults to a fresh `uuid` per build)
+- `removeSourcemaps: boolean`: whether to remove the sourcemaps after uploading them (defaults to `false`). Comes in handy when you want to upload sourcemaps to Flare but don't want them published in your build.
+
+## development
+
+Publish a new release: 
+
+```bash
+npm version patch
+npm publish
+```
+
+Tag the release:
+
+<pre>
+git tag <var>VERSION</var>
+git push origin <var>VERSION</var>
+</pre>
+
+Replace <var>VERSION</var> with `v` + the version from `package.json` — for example, `v1.0.2` 

package/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "@flareapp/vite",
+    "version": "1.0.0-beta.1",
+    "description": "Vite plugin for flareapp.io",
+    "homepage": "https://flareapp.io",
+    "bugs": "https://github.com/facade/flare-client-js/issues",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/facade/flare-client-js.git"
+    },
+    "license": "MIT",
+    "author": "adriaan@spatie.be",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "prepublishOnly": "npm run build",
+        "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+        "test": "exit 0",
+        "typescript": "tsc"
+    },
+    "dependencies": {
+        "@flareapp/js": "^1.0.0",
+        "axios": "^1.2.1",
+        "fast-glob": "^3.2.12"
+    },
+    "devDependencies": {
+        "@flareapp/js": "file:../js",
+        "@types/node": "^18.11.17",
+        "typescript": "^5.3.3",
+        "vite": "^4.0.0||^5.0.0"
+    },
+    "peerDependencies": {
+        "vite": "^4.0.0||^5.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/flareApi.ts

@@ -0,0 +1,39 @@
+import { deflateRawSync } from 'zlib';
+import axios from 'axios';
+import { Sourcemap } from './index';
+
+export default class FlareApi {
+    endpoint: string;
+    key: string;
+    version: string;
+
+    constructor(endpoint: string, key: string, version: string) {
+        this.endpoint = endpoint;
+        this.key = key;
+        this.version = version;
+    }
+
+    uploadSourcemap(sourcemap: Sourcemap) {
+        return new Promise((resolve, reject) => {
+            const base64GzipSourcemap = deflateRawSync(
+                sourcemap.content,
+            ).toString('base64');
+
+            axios
+                .post(this.endpoint, {
+                    key: this.key,
+                    version_id: this.version,
+                    relative_filename: sourcemap.original_file,
+                    sourcemap: base64GzipSourcemap,
+                })
+                .then(resolve)
+                .catch((error) => {
+                    return reject(
+                        `${error.response.status}: ${JSON.stringify(
+                            error.response.data,
+                        )}`,
+                    );
+                });
+        });
+    }
+}

package/src/index.ts

@@ -0,0 +1,173 @@
+import { resolve } from 'path';
+import { existsSync, readFileSync, unlinkSync } from 'fs';
+import glob from 'fast-glob';
+import { Plugin, ResolvedConfig, UserConfig } from 'vite';
+import { OutputOptions } from 'rollup';
+import { uuid } from './util';
+import FlareApi from './flareApi';
+
+export type PluginConfig = {
+    key: string;
+    base?: string;
+    apiEndpoint?: string;
+    runInDevelopment?: boolean;
+    version?: string;
+    removeSourcemaps?: boolean;
+};
+
+export type Sourcemap = {
+    original_file: string;
+    content: string;
+    sourcemap_url: string;
+};
+
+export default function flareSourcemapUploader({
+    key,
+    base,
+    apiEndpoint = 'https://flareapp.io/api/sourcemaps',
+    runInDevelopment = false,
+    version = uuid(),
+    removeSourcemaps = false,
+}: PluginConfig): Plugin {
+    if (!key) {
+        flareLog(
+            'No Flare API key was provided, not uploading sourcemaps to Flare.',
+        );
+    }
+
+    const flare = new FlareApi(apiEndpoint, key, version);
+
+    const enableUploadingSourcemaps =
+        key &&
+        (process.env.NODE_ENV !== 'development' || runInDevelopment) &&
+        process.env.SKIP_SOURCEMAPS !== 'true';
+
+    return {
+        name: 'flare-vite-plugin',
+        apply: 'build',
+
+        config({ build }: UserConfig, { mode }: { mode: string }) {
+            return {
+                // Set FLARE_SOURCEMAP_VERSION and API key so the Flare JS client can read it
+                define: {
+                    FLARE_SOURCEMAP_VERSION: `'${version}'`,
+                    FLARE_JS_KEY: `'${key}'`,
+                },
+                build: {
+                    sourcemap: (() => {
+                        if (build?.sourcemap !== undefined)
+                            return build.sourcemap;
+                        const enableSourcemaps =
+                            enableUploadingSourcemaps && mode !== 'development';
+                        if (enableSourcemaps) return 'hidden';
+                        return false;
+                    })(),
+                },
+            };
+        },
+
+        configResolved(config: ResolvedConfig) {
+            base = base || config.base;
+            base += base.endsWith('/') ? '' : '/';
+        },
+
+        async writeBundle(outputConfig: OutputOptions) {
+            if (!enableUploadingSourcemaps) {
+                return;
+            }
+
+            const outputDir = outputConfig.dir || '';
+
+            const files = await glob('./**/*.map', { cwd: outputDir });
+            const sourcemaps = files
+                .map((file): Sourcemap | null => {
+                    const sourcePath = file.replace(/\.map$/, '');
+                    const sourceFilename = resolve(outputDir, sourcePath);
+
+                    if (!existsSync(sourceFilename)) {
+                        flareLog(
+                            `no corresponding source found for "${file}"`,
+                            true,
+                        );
+                        return null;
+                    }
+
+                    const sourcemapLocation = resolve(outputDir, file);
+
+                    try {
+                        return {
+                            content: readFileSync(sourcemapLocation, 'utf8'),
+                            sourcemap_url: sourcemapLocation,
+                            original_file: `${base}${sourcePath}`,
+                        };
+                    } catch (error) {
+                        flareLog(
+                            'Error reading sourcemap file ' +
+                                sourcemapLocation +
+                                ': ' +
+                                error,
+                            true,
+                        );
+                        return null;
+                    }
+                })
+                .filter((sourcemap) => sourcemap !== null) as Sourcemap[];
+
+            if (!sourcemaps.length) {
+                return;
+            }
+
+            flareLog(
+                `Uploading ${sourcemaps.length} sourcemap files to Flare.`,
+            );
+
+            const pendingUploads = sourcemaps.map(
+                (sourcemap) => () => flare.uploadSourcemap(sourcemap),
+            );
+
+            try {
+                while (pendingUploads.length) {
+                    // Maximum 10 at once https://stackoverflow.com/a/58686835
+                    await Promise.all(
+                        pendingUploads.splice(0, 10).map((f) => f()),
+                    );
+                }
+
+                flareLog('Successfully uploaded sourcemaps to Flare.');
+            } catch (error) {
+                flareLog(
+                    `Something went wrong while uploading the sourcemaps to Flare: ${error}`,
+                    true,
+                );
+            }
+
+            if (removeSourcemaps) {
+                sourcemaps.forEach(({ sourcemap_url }) => {
+                    try {
+                        unlinkSync(sourcemap_url);
+                    } catch (error) {
+                        console.error(
+                            'Error removing sourcemap file',
+                            sourcemap_url,
+                            ': ',
+                            error,
+                        );
+                    }
+                });
+
+                flareLog('Successfully removed sourcemaps.');
+            }
+        },
+    };
+}
+
+function flareLog(message: string, isError = false) {
+    const formattedMessage = '@flareapp/vite: ' + message;
+
+    if (isError) {
+        console.error(formattedMessage);
+        return;
+    }
+
+    console.log(formattedMessage);
+}

package/src/util.ts

@@ -0,0 +1,11 @@
+export function uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        function (c) {
+            const r = (Math.random() * 16) | 0;
+            const v = c == 'x' ? r : (r & 0x3) | 0x8;
+
+            return v.toString(16);
+        },
+    );
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../tsconfig.json",
+    "include": ["src"],
+}