Publishing with source maps

When you build a web app for production, your source code is compiled, bundled, and often minified. The browser runs the transformed output — not the code you wrote. Source maps are files that connect that compiled output back to your original source.

Replay QA runs against your deployed app. When source maps are available, every analysis Replay performs — from tracing a failure through the call stack to pinpointing the line that caused a bug — can reference your original code. Without them, Replay is working with minified identifiers and compiled output.

What source maps unlock in Replay QA

More precise root cause analysis. When Replay time-travels a failing test recording, it traces the execution chain back to the source. With source maps, that trace cites your actual component names, function names, and file paths — not a(), b(), or chunk-abc123.js.

Actionable root causes. Bug reports cite the file and line responsible for a failure. Source maps ensure those references point to the right place in your codebase, so a coding agent or developer can go straight to the fix.

Better React analysis. Replay QA's React analysis layer — render tracking, performance profiling, effect analysis, render cause tracing — works without source maps for React itself. Your application's source maps let it report real component names and file locations instead of compiled identifiers. See React support below.

Configuring your build

Publicly served source maps — simplest, works automatically

If your app serves source maps publicly alongside the JS files, Replay QA discovers and uses them automatically via the sourceMappingURL references embedded in each bundle. No upload step needed.

Configure your build tool to emit and serve source maps:

• Next.js
• Vite
• Webpack

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
}

module.exports = nextConfig

Deploy with these settings and Replay QA will pick up the source maps on its own.

React support

Replay's React analysis finds its instrumentation points by parsing the generated React code in your bundle, so it does not need React's own source maps or any extra build plugin. It supports React 18 and 19, including Next.js 13.5 through 16, across esbuild, webpack, Vite, Rollup, and Rolldown builds, minified or not. React 17 and older are not supported.

Your application's source maps are still what turn a() in chunk-abc123.js into a component name and a file path, so the settings above are all you need to configure.

Getting your coding agent to set this up

Paste the following prompt into your coding agent to have it configure source map emission for your project:

Configure this project to publish source maps so Replay QA can use them.

Check which bundler or framework is in use (Next.js, Vite, Webpack, etc.) and apply the appropriate setting to emit and publicly serve source maps:
- Next.js: set `productionBrowserSourceMaps: true` in next.config.js
- Vite: set `build.sourcemap: true` in vite.config.js
- Webpack: set `devtool: 'source-map'` in webpack.config.js

Replay QA discovers publicly served source maps automatically — no upload step is needed. React itself needs no extra setup.

Make the minimum changes needed — don't restructure the build config beyond what's required.