Resolving bundled code

When you bundle your frontend code for production (using Webpack, Vite, Gulp, Babel…), it will get minified and transformed and ultimately won't look like the original code any more. This causes the code snippets attached to error reports to be malformed as well. The solution to this problem is uploading a sourcemap.

Using one of our plugins, you can automatically upload the sourcemaps produced by your bundler. We'll then use them to format your error reports to show a clean stacktrace that resembles your original code.

The following options are available:

• Vite
• Webpack
• Laravel Mix (using Webpack plugin)
• Manually uploading sourcemaps

Vite

When using Vite (v5, v6, v7, or v8) to build your front-end code, you can use Flare's Vite plugin.

To get started, run one of the following commands to install the plugin:

npm install @flareapp/vite
# or
yarn add @flareapp/vite
# or
pnpm add @flareapp/vite

Next, add the plugin to your vite.config.js file and fill in your Flare project's public key:

import { defineConfig } from 'vite';
import flareSourcemapUploader from '@flareapp/vite';

export default defineConfig({
    plugins: [
        flareSourcemapUploader({
            key: 'YOUR PROJECT KEY HERE'
        }),
    ],
});

Finally, run the vite build command to confirm that sourcemaps are generated. You should see the following lines in the output:

@flareapp/vite: Uploading 12 sourcemap files to Flare.
@flareapp/vite: Successfully uploaded sourcemaps to Flare.

Integration notes

• The plugin also passes your project's API token to the JavaScript client by setting a global variable. This way, when initializing the Flare JS client, you can just run flare.light() without having to pass in your API key.
• The plugin automatically enables hidden sourcemaps in your Vite build configuration when uploading is active. You don't need to set build.sourcemap yourself — it's handled for you. If you've already set a custom sourcemap option, the plugin will respect it.
• By default, the plugin will not upload your sourcemaps to Flare when compiling in Vite's development mode. You can override this behaviour using the runInDevelopment option.
• You can skip sourcemap uploads entirely by setting the SKIP_SOURCEMAPS=true environment variable.

Vite plugin options

Webpack or Laravel Mix

If you're using Laravel Mix or Webpack (v3, v4 or v5), you can use our Webpack plugin.

To get started, run one of the following commands to install the plugin:

npm install @flareapp/flare-webpack-plugin-sourcemap --dev
# or
yarn add @flareapp/flare-webpack-plugin-sourcemap --dev
# or
pnpm add @flareapp/flare-webpack-plugin-sourcemap --dev

Next, modify your webpack.config.js or webpack.mix.js file to enable sourcemaps and the plugin. You can find example configurations for Laravel Mix and Webpack below. The configuration must only be added to one of these configuration files, otherwise it may lead to unexpected behaviour.

The only required parameter for the plugin is a configuration object with a key property. Enter your Flare project's public key here.

The plugin also passes your project's API token to the JavaScript client by setting a global variable. This way, when initializing the Flare JS client, you can just run flare.light() without passing in your API key.

By default, the plugin will not upload your sourcemaps to Flare when compiling in Webpack's development or watch modes. You can override this behaviour using the runInDevelopment option.

Laravel Mix

In a Laravel Mix build, you can also use the aforementioned Webpack plugin. Follow the steps above to install it. Then, add the following to your webpack.mix.js file:

const FlareWebpackPluginSourcemap = require("@flareapp/flare-webpack-plugin-sourcemap");

mix
    // ...
    .webpackConfig({
        plugins: [ new FlareWebpackPluginSourcemap({ key: "your-project-key" }) ],
    })
    .sourceMaps(true, 'hidden-source-map');

The configuration is the same as for the Webpack plugin.

Webpack

webpack.config.js

const FlareWebpackPluginSourcemap = require("@flareapp/flare-webpack-plugin-sourcemap");

module.exports = {
    // ...
    plugins: [ new FlareWebpackPluginSourcemap({ key: "your-project-key" }) ],
    devtool: "hidden-source-map",
};

Webpack plugin options

You can pass some options to the plugin, in the same object as the key:

Manually uploading sourcemaps

We don't have any UI in the Flare dashboard for uploading your sourcemaps. You can, however, upload the sourcemap manually or with a custom script that runs after building your assets.

Send a POST request to https://flareapp.io/api/sourcemaps with the following JSON payload:

{
    "key": "your-project-key",
    "version_id": "versionId",
    "relative_filename": "/js/app.js",
    "sourcemap": "base64 string of gzipped sourcemap (this sounds more complicated than it is)"
}

Here's how you could generate it using the built-in Zlib library for Node.js, but the commandline gzip tool should work just as well:

const zlib = require('zlib');

const base64GzipSourcemap = zlib.deflateRawSync(sourcemap.content).toString('base64');