npm package: @grafana/faro-esbuild-plugin
Description: Upload a source map to the Faro source map API from an esbuild build pipeline
Author: Grafana Labs
Latest version: 0.5.0

# Faro source map upload plugin - esbuild

This plugin uploads source maps to the Faro collector to enable de-obfuscation of stack traces in the Grafana Cloud Frontend Observability UI.

> [!NOTE]
> The Faro JavaScript bundler plugins work with client-side rendered applications. Server-side rendering isn't yet supported.

## Installation

To install the Faro JavaScript Bundler Plugins for esbuild, use the package manager of your choice.

To install the esbuild plugin with `npm`, run:

```bash
npm install --save-dev @grafana/faro-esbuild-plugin
```

To install the esbuild plugin with `yarn`, run:

```bash
yarn add --dev @grafana/faro-esbuild-plugin
```

## Usage

Details of how to use the plugins with your bundler reside in the Frontend Observability plugin under the "Settings" -> "Source Maps" tab after clicking into your instrumented app.

That tab includes the necessary configuration for the Faro JavaScript bundler plugins, including the `appName`, `appId`, and `endpoint` values that you need for the plugins to work with your app. The details provided below are general instructions for how to use the plugins with your bundler.

### esbuild

To use the esbuild plugin, add the following to your build script:

```javascript
import * as esbuild from 'esbuild';
import faroEsbuildPlugin from '@grafana/faro-esbuild-plugin';

await esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    faroEsbuildPlugin({
      appName: "$your-app-name",
      // this URL is different from the Faro Collector URL - find this value in the Frontend Observability plugin under "Settings" -> "Source Maps" -> "Configure source map uploads"
      endpoint: "$your-faro-sourcemap-api-url",
      apiKey: "$your-api-key",
      appId: "$your-app-id",
      stackId: "$your-stack-id",
      gzipContents: true,
    }),
  ],
});
```

### Configuration Options

The following options are available for the Faro JavaScript bundler plugins:

- `appName: string` *required*: The name of your application. This should match the `appName` value you are using in your Faro Web SDK configuration.
- `endpoint: string` *required*: The URL of your Faro Collector endpoint. This value is in the Frontend Observability plugin under "Settings" -> "Source Maps" -> "Configure source map uploads".
- `apiKey: string` *required*: The API key for your Faro Collector. This value gets generated on grafana.com by creating a new scope (details provided in the plugin and in the "Obtaining API key" section of this document).
- `appId: string` *required*: The ID of your application. This should match the `appId` value you are using in your Faro Web SDK configuration.
- `stackId: string` *required*: The ID of the stack, found in Frontend Observability under **Settings** -> **Source Maps** -> **Configure source map uploads**
- `outputPath: string` *optional*: Override the output directory path where source maps are located, by default uses esbuild's `outdir` or `outfile` directory
- `outputFiles: string[] | RegExp` *optional*: An array of source map files to upload or a regex pattern to match files, by default Faro uploads all source maps
- `bundleId: string` *optional*: The ID of the bundle/build, by default auto-generated, or specify an ID to filter by bundle ID in Frontend Observability
- `keepSourcemaps: boolean` *optional*: Whether to keep the source maps in your generated bundle after uploading, default `false`
- `gzipContents: boolean` *optional*: Whether to archive and compress the source maps before uploading, default `true`
- `verbose: boolean` *optional*: Whether to log verbose output during the upload process, default `false`
- `skipUpload: boolean` *optional*: Whether to skip uploading source maps and only export the bundleId to an environment file, default `false`
- `maxUploadSize: number` *optional*: Maximum upload size in bytes, default is 30MB. The Faro API has a 30MB limit for individual file uploads by default. In special circumstances, this limit may be changed by contacting Grafana Cloud support.
- `recursive: boolean` *optional*: Whether to recursively search subdirectories for source maps, default `false`
- `proxy: string` *optional*: Proxy URL to use for source map uploads. Supports both HTTP and HTTPS proxies. If your proxy requires authentication, include credentials in the URL format: `http://username:password@proxy.example.com:8080`. Example: `http://proxy.example.com:8080` or `https://user:pass@proxy.example.com:8080`
- `prefixPath: string` *optional*: Prefix to prepend to the `file` property in source maps. This is useful when files in the browser appear in a hierarchy different than how the bundler is aware of. For example, if a CDN is used, stack traces might have file paths starting with `cdn/index.js`, but the source map's `file` property only shows `index.js`. By adding the `cdn/` prefix, the source map decoder can correctly match stack traces to source maps. Examples: `"cdn/"`, `"robo/assets/"`, etc.
- `prefixPathBasenameOnly: boolean` *optional*: When `true`, strips any directory path from the source map `file` property before prepending `prefixPath`, keeping only the filename. Useful when assets are deployed flat to a CDN with no subdirectory structure. For example, if the source map's `file` is `assets/index.js` and `prefixPath` is `https://cdn.example.com/assets/`, enabling this option produces `https://cdn.example.com/assets/index.js` instead of `https://cdn.example.com/assets/assets/index.js`. Only applies when `prefixPath` is set. Default `false`.

After initial configuration, the Faro JavaScript bundler plugins automatically uploads your source maps to Grafana Cloud when you build your application. You can verify that the source maps upload successfully by in the "Settings" -> "Source Maps" tab in the Frontend Observability plugin. From there you are able to see the source maps that you have uploaded.

After you have completed all the required steps, you have finished - the Faro Collector begins processing your source maps and associating them with your telemetry data. The portions of your stack traces with source maps uploaded to the Faro Collector are automatically de-obfuscated and displayed in the Frontend Observability plugin when viewing your error data.