How to record

Everything in Replay starts with a recording. A recording captures your application's runtime so you can inspect it after the fact — add console logs, inspect variables, step through code — without having to reproduce the bug again.

There are two ways to make a recording.

Both record at the browser runtime level, so the recording is an exact capture of what executed.

Replay Browser + CLI

The Replay CLI installs the Replay Browser, launches it on a URL you choose, and uploads recordings to your Replay account.

Terminal
npm i -g replayio

Terminal
replayio record https://your-app.com

Playwright

For automated test suites, configure Playwright to run tests in Replay Browser and upload a recording of each test. When a test fails in CI you get a recording of what happened on that machine instead of having to reproduce it locally.

Terminal
npm i -D @replayio/playwright
npx replayio install

playwright.config.ts
import { defineConfig } from '@playwright/test'
import { devices as replayDevices, replayReporter } from '@replayio/playwright'

export default defineConfig({
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ['line'],
  ],
  projects: [
    {
      name: 'replay-chromium',
      use: { ...replayDevices['Replay Chromium'] },
    },
  ],
})

Chrome extension

The Replay Debugger Chrome extension records from inside your regular Chrome by capturing the page's inputs and re-executing your code against them. It is convenient when you cannot switch browsers, but the re-execution can differ from the original session in timing-sensitive code. Prefer the CLI when you can.

Once you have a recording

Once a recording is uploaded, you can investigate it in several ways:

FAQ