Upload a source map to the Faro source map API from a Webpack build pipeline
npm install @grafana/faro-webpack-pluginThis 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.
To install the Faro JavaScript bundler plugins for Webpack, use the package manager of your choice.
``bash`
npm install --save-dev @grafana/faro-webpack-plugin
To install the Webpack plugin with yarn, run:
`bash`
yarn add --dev @grafana/faro-webpack-plugin
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.
To use the Webpack plugin, add the following to your webpack.config.js:
`javascript
// other imports
import FaroSourceMapUploaderPlugin from "@grafana/faro-webpack-plugin";
module.exports = {
// other configs
plugins: [
// other plugins
new FaroSourceMapUploaderPlugin({
appName: "$your-app-name",
endpoint: "$your-faro-collector-url",
apiKey: "$your-api-key",
appId: "$your-app-id",
stackId: "$your-stack-id",
gzipContents: true,
}),
],
};
`
#### Using a Proxy
If you need to route source map uploads through a proxy server, you can use the proxy option:
`javascript`
new FaroSourceMapUploaderPlugin({
appName: "$your-app-name",
endpoint: "$your-faro-collector-url",
apiKey: "$your-api-key",
appId: "$your-app-id",
stackId: "$your-stack-id",
proxy: "http://proxy.example.com:8080",
gzipContents: true,
}),
If your proxy requires authentication, include credentials in the URL:
`javascript`
new FaroSourceMapUploaderPlugin({
// ... other options
proxy: "http://username:password@proxy.example.com:8080",
}),
The following options are available for the Faro JavaScript bundler plugins:
- appName: string required: The name of your application, it should match the appName value used in your Faro Web SDK configurationendpoint: string
- required: The URL of your Faro Collector endpoint, found in Frontend Observability under Settings and Web SDK ConfigapiKey: string
- required: The API key for your Faro Collector, you can generate a new scope on [grafana.com], refer to the Obtaining API key sectionappId: string
- required: The ID of your application, it should match the appId value used in your Faro Web SDK configurationstackId: string
- required: The ID of the stack, found in Frontend Observability under Settings -> Source Maps -> Configure source map uploadsoutputPath: string
- optional: Override the output directory path where source maps are located, by default uses Webpack's output.pathoutputFiles: string[] | RegExp
- optional: An array of source map files to upload or a regex pattern to match files, by default Faro uploads all source mapsbundleId: string
- optional: The ID of the bundle/build, by default auto-generated, or specify an ID to filter by bundle ID in Frontend ObservabilitykeepSourcemaps: boolean
- optional: Whether to keep the source maps in your generated bundle after uploading, default false
- optional: Whether to archive and compress the source maps before uploading, default true
- optional: Whether to log verbose output during the upload process, default false
- optional: Whether to skip uploading source maps and only export the bundleId to an environment file, default false
- 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
- 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
- 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. If both prefixPath and nextjs are provided, they will be combined as ${prefixPath}/_next/. Examples: "cdn/", "robo/assets/", "_next/"
- optional: Whether to prepend _next/ to source map file properties for Next.js compatibility. This should only be needed if your NextJS application has both client and server side code. If your application is only client side, this should not be needed. Default false. If both prefixPath and nextjs are provided, they will be combined as ${prefixPath}/_next/`
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.