Replay.io

Evaluates an expression at breakpoint hits for a given path and line number. Returns up to 20 hits with their expression evaluation results. Use beginPoint/endPoint to narrow the range. Use column to target a specific statement on the line. Find source paths with ListSources or SearchSources first.

Analyze network requests in the recording. Start with mode 'summary' (default) for high-level stats: total count, failed/slow counts, status code distribution, and top domains. Use 'requests' to browse a paginated table of all requests (filterable by urlFilter, startTime, endTime). Use 'detail' with requestIndex (from the 'requests' table) or requestId for full request/response headers, body content, event timeline, and backend function analysis. RECOMMENDED workflow: summary → requests → detail. Call RecordingOverview first for broader context about the recording.

Show all steps taken by Playwright in the recording. Start with mode 'summary' for a test overview with pass/fail status and duration. Use 'steps' with testIndex to see the step list for a specific test (get indices from 'summary'). Use 'step-detail' with stepNumber for inspector protocol commands of a single step (get step numbers from 'steps'). Use 'test-source' with testIndex to read the test source code. For failed tests, use failedOnly=true in 'steps' mode to focus on failures. Call RecordingOverview first for broader context.

Profiles dependency graph entry execution between two points in a recording. Enumerates all dependency graph entries including React fiber renders and effect calls, computes the execution associated with each by progress counter differences, traces each entry back to its source via the dependency chain, and groups results by source ordered by execution amount.

Profiles the native C++ replay engine using stack sampling between two execution points. Runs the replay engine from the begin point to the end point while collecting periodic stack samples, then analyzes the samples to produce a flat profile of where time is spent in native code.

Profiles JS statement execution between two points in a recording. Fetches all breakpoint hits between the points, breaks them down by function, resolves function names, and computes a flat profile and call tree showing statement hits per function and its callees.

Get the structure of the React component tree at a point in time. Start with mode='summary' for an overview of component counts and top-level structure. Use mode='tree' to see a paginated, depth-limited hierarchy with collapse markers. Use mode='subtree' with 'component' to focus on a specific component's ancestors and descendants. Use 'nameFilter' to search for components by name. Use 'hideFilter' to remove noise (e.g. Provider, Consumer). For render-level analysis (timing, waste, causes), use ReactRenders instead.

Describe any exceptions thrown which caused React to unmount. This finds React error boundary crashes and render-phase exceptions. For non-React uncaught exceptions, use UncaughtException instead. RecordingOverview includes an error summary — call that first for context.

Analyze React renders in a recording. Start with mode 'summary' for a recording-wide overview of commits and render time. Use 'waste-rank' to find components with the most wasted renders. Use 'commits' to browse render commits chronologically. Use 'commit' with commitIndex for single commit detail (get indices from 'commits'). Use 'component' with componentName to see a component across all commits (get names from 'waste-rank'). Use 'fiber' with fiberId to see all renders for a specific fiber instance (add includeProps=true for prop values at each render). Use 'trigger-detail' with commitIndex to trace the dependency chain (click, network, dispatch) that triggered a commit. Use 'commit-fibers' and 'fiber-cause' for fiber-level causation analysis. Call RecordingOverview first for broader context.

Read up to 50 lines of code centered around the given line and see what statements executed.

Provides a comprehensive overview of a recording: test results, errors, environment info, network activity, React render performance, and suggested next investigation steps. Call this first to understand what happened in a recording before diving into specific tools. NOTE: The first call on a cold recording may take 3-4 minutes while initial data is computed. Set a longer timeout for this tool. Subsequent calls will be fast.

Analyze Redux actions in a recording. Currently covers Redux/RTK dispatches via source-level instrumentation. Start with mode 'summary' to see action type frequency and correlation stats. Use 'actions' to browse dispatches chronologically (filterable by actionType substring). Use 'action-detail' with actionIndex for full correlation data: timing breakdown, selector stats, component render timings, and dispatch origin location. Use 'impact' with actionIndex for a render impact report with optimization recommendations. Use 'state-shape' to see a lightweight key/type listing of the state tree (~200–400 tokens). RECOMMENDED: use state-shape FIRST to understand the state structure, then drill in. Use 'action-state' with actionIndex to see actual state values at a dispatch point. STRONGLY RECOMMENDED: use the 'path' param (e.g. path='auth.user') to drill into specific subtrees instead of dumping the entire state tree. Call RecordingOverview first for broader context about the recording.

Lists all screenshot timestamps in the recording, or fetches a screenshot at a given timestamp. Call without timestamp to list all available timestamps. Call with timestamp to get a screenshot URL with mouse position, movements, and time since last click. Set base64=true for raw image data. RecordingOverview suggests a key screenshot timestamp — call that first.

Search the sources in the recording and see which statements executed. Note: Playwright test runner code runs in Node outside the browser recording and won't appear here. Use PlaywrightSteps(mode: test-source) for Playwright test source.

Analyze TanStack Query (React Query) cache events in a recording. Start with mode 'summary' for an overview of all queries with lifecycle stats. Use 'query-events' with queryHash to see the event timeline for a specific query. Use 'query-timeline' for a chronological view across ALL queries. Use 'query-state' with queryHash + eventIndex to inspect cached data at a specific event point. Observer-internal events are filtered by default; use eventType filter to include them. Call RecordingOverview first for broader context about the recording.

Describe any uncaught exceptions (runtime errors not caught by try/catch). For React-specific exceptions that unmounted the app, use ReactException instead. RecordingOverview includes an error summary — call that first for context.

Show all user interactions (clicks and key presses) in the recording. Start with mode 'summary' (default) for interaction counts by type, time range, top keys pressed, and activity timeline. Use 'interactions' to browse a paginated chronological list with point references for DescribePoint, Evaluate, or GetStack. Use type filter ('click' or 'keypress') to narrow by interaction kind. Useful for understanding the sequence of user actions that led to a bug.

Analyze Zustand stores in a recording. Start with mode 'summary' to see all stores and their setState call counts. Use 'store-events' with a storeId to browse setState calls chronologically. Use 'store-state' with storeId and eventIndex to inspect the state at a specific setState call (shows the updater identity, incoming changes, merged result, and previous state). Call RecordingOverview first for broader context about the recording.