@brett_lamy/docstream 1.20.1 → 1.22.0

package/src/replay/ReplayPlayer.tsx

@@ -1,7 +1,8 @@
 /* The player behind `ReplayPreview`: an rrweb session replay in a browser frame. The headless `ReplayStage`
    plays the recording (rrweb loads lazily, on first render); this adds the chrome around it: a URL bar that
    follows the recording's navigations, play/pause, a scrubber with the recording's moments on a rail above
-   it, a speed control, fullscreen, and a drawn cursor whose clicks ripple. Until the player is ready a
+   it, a speed control, fullscreen, a drawn cursor whose clicks ripple, and DevTools: Console and Network buttons
+   in the top bar with what had been logged and requested by the playhead, which open a DevTools panel over the page. Until the player is ready a
    poster (a page-shaped skeleton by default) holds the frame's exact size, so nothing jumps.
 
    Plain React + plain CSS (`@layer docstream.replay` in styles.css, `[data-slot]` hooks). Keys (focus inside
@@ -15,6 +16,8 @@ import {
 import { useReducedMotion } from 'framer-motion'
 import { Lock, Maximize, Minimize, Pause, Play, RotateCcw } from 'lucide-react'
 import { ReplayStage } from './ReplayStage'
+import { DevtoolsButtons, DevtoolsPanel, type ReplayDevtoolsTab } from './ReplayDevtools'
+import { getReplayDevtools, replayDevtoolsAt } from './devtools'
 import { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers'
 import type { ReplayMarker, ReplayMarkerKind, ReplayPointerTrack } from './markers'
 import type { ReplayStageHandle } from './stage-types'
@@ -59,6 +62,12 @@ export interface ReplayPlayerOptions {
   markers?: boolean | ReplayMarker[]
   /** Which recorded marker kinds to show (default all). */
   markerKinds?: ReplayMarkerKind[]
+  /** Console and Network buttons (in the top bar, or beside the controls without the browser chrome) that open a
+   *  DevTools panel cut at the playhead. `true` (default) shows them when the recording has console messages or
+   *  requests; `false` hides them. */
+  devtools?: boolean
+  /** Open the DevTools panel on this tab at mount. */
+  defaultDevtoolsTab?: ReplayDevtoolsTab
   /** Draw the recorded pointer and click ripples (default true). */
   cursor?: boolean
   /** `width` (default): the page scales to the frame's width and sets its height. `contain`: fill the frame's
@@ -89,7 +98,7 @@ const MARKER_NOUN: Record<ReplayMarkerKind, string> = {
 export function ReplayPlayer({
   events, url, title = 'Session replay', chrome = 'browser', trafficLights = true, controls = true,
   autoplay = false, loop = false, initialTime = 0, speeds = DEFAULT_PLAYER_SPEEDS, markers = true, markerKinds,
-  cursor = true, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
+  cursor = true, devtools = true, defaultDevtoolsTab, fit = 'width', poster, lazy = true, playerRef, onTimeUpdate, onPlayingChange, onMarkerPress,
   className, style,
 }: ReplayPlayerOptions & { events: ReplayEvent[] }) {
   const rootRef = useRef<HTMLDivElement>(null)
@@ -103,6 +112,10 @@ export function ReplayPlayer({
     return markerKinds ? list.filter((m) => markerKinds.includes(m.kind)) : list
   }, [markers, recorded, markerKinds])
 
+  const tools = useMemo(() => getReplayDevtools(events), [events])
+  const showTools = devtools && (tools.console.length > 0 || tools.network.length > 0)
+  const [panel, setPanel] = useState<ReplayDevtoolsTab | null>(defaultDevtoolsTab ?? null)
+
   const [visible, setVisible] = useState(!lazy)
   const [ready, setReady] = useState(false)
   const [posterGone, setPosterGone] = useState(false)
@@ -195,6 +208,10 @@ export function ReplayPlayer({
     return current
   }, [url, meta.href, recorded, time])
 
+  const toolsState = useMemo(() => replayDevtoolsAt(tools, time), [tools, time])
+  const openTools = (tab: ReplayDevtoolsTab) => setPanel((p) => (p === tab ? null : tab))
+  const toolButtons = showTools ? <DevtoolsButtons state={toolsState} open={panel} onOpen={openTools} /> : null
+
   const w = meta.width || 1280
   const h = meta.height || 800
   const contain = fit === 'contain' || fullscreen
@@ -221,7 +238,7 @@ export function ReplayPlayer({
       }}
       style={style}
     >
-      {chrome === 'browser' ? <BrowserBar href={href} trafficLights={trafficLights} loading={!ready && meta.playable} /> : null}
+      {chrome === 'browser' ? <BrowserBar href={href} trafficLights={trafficLights} loading={!ready && meta.playable} actions={toolButtons} /> : null}
 
       <div data-slot="replay-preview-stage" style={{ '--replay-ar': `${w} / ${h}` } as CSSProperties}>
         {visible && meta.playable ? (
@@ -249,8 +266,19 @@ export function ReplayPlayer({
           </div>
         ) : null}
 
+        {showTools && panel ? (
+          <DevtoolsPanel
+            state={toolsState}
+            at={time}
+            tab={panel}
+            onTab={setPanel}
+            onClose={() => { setPanel(null); rootRef.current?.focus({ preventScroll: true }) }}
+            onSeek={(ms) => handle.seek(ms)}
+          />
+        ) : null}
+
         {controls ? (
-          <div data-slot="replay-preview-center" data-show={(ready && !playing) || undefined}>
+          <div data-slot="replay-preview-center" data-show={(ready && !playing && !(showTools && panel)) || undefined}>
             <button
               type="button"
               tabIndex={-1}
@@ -280,6 +308,7 @@ export function ReplayPlayer({
             onSeek={(ms) => handle.seek(ms)}
             onMarker={jumpTo}
           />
+          {chrome !== 'browser' ? toolButtons : null}
           <button type="button" data-slot="replay-preview-speed" aria-label={`Playback speed ${speed}×`} onClick={() => cycleSpeed(1)}>
             {`${speed}×`}
           </button>
@@ -301,7 +330,7 @@ export function splitReplayAddress(href: string): { host: string; path: string }
   return cut < 0 ? { host: shown, path: '' } : { host: shown.slice(0, cut), path: shown.slice(cut) }
 }
 
-export function BrowserBar({ href, trafficLights, loading }: { href: string; trafficLights: boolean; loading: boolean }) {
+export function BrowserBar({ href, trafficLights, loading, actions }: { href: string; trafficLights: boolean; loading: boolean; actions?: ReactNode }) {
   const { host, path } = splitReplayAddress(href)
   // Once the recording is past the site root, where it is (path, query, hash) is what matters:
   // it leads and keeps its room, and the host dims and gives way first.
@@ -322,7 +351,8 @@ export function BrowserBar({ href, trafficLights, loading }: { href: string; tra
           {path ? <span data-part="path">{path}</span> : null}
         </span>
       </div>
-      {trafficLights ? <span aria-hidden="true" data-slot="replay-preview-lights-spacer" /> : null}
+      {actions ? <div data-slot="replay-preview-actions">{actions}</div>
+        : trafficLights ? <span aria-hidden="true" data-slot="replay-preview-lights-spacer" /> : null}
     </div>
   )
 }

package/src/replay/demo/index.ts

@@ -1,14 +1,19 @@
 import type { ReplayEvent } from '../types';
 
-/* A small synthetic rrweb recording (58 events, ~9 s, 1280×800) for ReplayPreview's stories, docs and the loop-qa
+/* A small synthetic rrweb recording (67 events, ~9 s, 1280×800) for ReplayPreview's stories, docs and the loop-qa
    block: a shopper on a mock "Northwind" storefront adds two products, opens the cart, types an email and a
    promo code, and "Place order" fails — a custom `network` event (POST /api/checkout 500) and an `error` event
-   mark the moment. Recorded with rrweb 2.0.0-alpha.20 against a local page (no external assets), timestamps
+   mark the moment. Console messages (rrweb/console@1) and the page's other requests (rrweb/network@1, with
+   headers and bodies) were added by hand so the player's DevTools have something to show; none of them fail, so the
+   timeline markers are unchanged. Recorded with rrweb 2.0.0-alpha.20 against a local page (no external assets), timestamps
    rebased to 2026-09-24 14:32:08 UTC so every render is identical. */
 export const replayDemoEvents: ReplayEvent[] = [
   {"type":4,"data":{"href":"https://shop.northwind.test/collections/trail","width":1280,"height":800},"timestamp":1790260328000},
   {"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":2,"tagName":"meta","attributes":{"charset":"utf-8"},"childNodes":[],"id":5},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"Northwind Outfitters","id":7}],"id":6},{"type":3,"textContent":"\n","id":8},{"type":2,"tagName":"style","attributes":{"_cssText":"* { box-sizing: border-box; }body { margin: 0px; font: 14px / 1.45 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Inter, sans-serif; color: rgb(28, 25, 23); background: rgb(250, 250, 249); }header { display: flex; align-items: center; gap: 28px; height: 64px; padding: 0px 40px; background: rgb(255, 255, 255); border-bottom: 1px solid rgb(231, 229, 228); }.logo { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }.logo b { color: rgb(13, 148, 136); }nav a { color: rgb(87, 83, 78); text-decoration: none; margin-right: 20px; }.sp { flex: 1 1 0%; }.cart { position: relative; border: 1px solid rgb(214, 211, 209); background: rgb(255, 255, 255); border-radius: 999px; padding: 7px 14px; font: inherit; cursor: pointer; }.badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: rgb(13, 148, 136); color: rgb(255, 255, 255); font-size: 11px; display: grid; place-items: center; padding: 0px 5px; }.hero { padding: 36px 40px 12px; }.hero h1 { margin: 0px; font-size: 30px; letter-spacing: -0.03em; }.hero p { margin: 6px 0px 0px; color: rgb(120, 113, 108); }.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 40px; }.card { background: rgb(255, 255, 255); border: 1px solid rgb(231, 229, 228); border-radius: 14px; overflow: hidden; transition: box-shadow 0.2s; }.card:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px; }.img { height: 150px; }.i1 { background: linear-gradient(135deg, rgb(153, 246, 228), rgb(13, 148, 136)); }.i2 { background: linear-gradient(135deg, rgb(253, 230, 138), rgb(217, 119, 6)); }.i3 { background: linear-gradient(135deg, rgb(199, 210, 254), rgb(79, 70, 229)); }.i4 { background: linear-gradient(135deg, rgb(254, 205, 211), rgb(225, 29, 72)); }.body { padding: 12px 14px 14px; }.name { font-weight: 600; }.price { color: rgb(120, 113, 108); margin: 2px 0px 10px; }.add { width: 100%; border: 0px; border-radius: 9px; background: rgb(28, 25, 23); color: rgb(255, 255, 255); padding: 9px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 600; cursor: pointer; }.drawer { position: fixed; top: 0px; right: 0px; bottom: 0px; width: 380px; background: rgb(255, 255, 255); border-left: 1px solid rgb(231, 229, 228); box-shadow: rgba(0, 0, 0, 0.12) -12px 0px 40px; padding: 24px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }.drawer.open { transform: none; }.drawer h2 { margin: 0px 0px 16px; font-size: 18px; }.line { display: flex; justify-content: space-between; padding: 10px 0px; border-bottom: 1px solid rgb(245, 245, 244); }label { display: block; font-size: 12px; color: rgb(120, 113, 108); margin: 14px 0px 4px; }input { width: 100%; border: 1px solid rgb(214, 211, 209); border-radius: 9px; padding: 9px 11px; font: inherit; }.pay { margin-top: 18px; width: 100%; border: 0px; border-radius: 10px; background: rgb(13, 148, 136); color: rgb(255, 255, 255); padding: 11px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 600; cursor: pointer; }.err { display: none; margin-top: 14px; border-radius: 10px; background: rgb(254, 242, 242); border: 1px solid rgb(254, 202, 202); color: rgb(185, 28, 28); padding: 10px 12px; font-size: 13px; }.err.show { display: block; }"},"childNodes":[{"type":3,"textContent":"","id":10}],"id":9},{"type":2,"tagName":"script","attributes":{"type":"text/javascript"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":12}],"id":11}],"id":4},{"type":2,"tagName":"body","attributes":{},"childNodes":[{"type":3,"textContent":"\n","id":14},{"type":2,"tagName":"header","attributes":{},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"logo"},"childNodes":[{"type":3,"textContent":"north","id":17},{"type":2,"tagName":"b","attributes":{},"childNodes":[{"type":3,"textContent":"wind","id":19}],"id":18}],"id":16},{"type":2,"tagName":"nav","attributes":{},"childNodes":[{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"New","id":22}],"id":21},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Trail","id":24}],"id":23},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Road","id":26}],"id":25},{"type":2,"tagName":"a","attributes":{"href":"file:///tmp/rr/page.html#"},"childNodes":[{"type":3,"textContent":"Sale","id":28}],"id":27}],"id":20},{"type":2,"tagName":"div","attributes":{"class":"sp"},"childNodes":[],"id":29},{"type":2,"tagName":"button","attributes":{"class":"cart","id":"cart"},"childNodes":[{"type":3,"textContent":"Cart ","id":31},{"type":2,"tagName":"span","attributes":{"class":"badge","id":"count"},"childNodes":[{"type":3,"textContent":"0","id":33}],"id":32}],"id":30}],"id":15},{"type":3,"textContent":"\n","id":34},{"type":2,"tagName":"section","attributes":{"class":"hero"},"childNodes":[{"type":2,"tagName":"h1","attributes":{},"childNodes":[{"type":3,"textContent":"Fall trail collection","id":37}],"id":36},{"type":2,"tagName":"p","attributes":{},"childNodes":[{"type":3,"textContent":"Built for mud, rain and long miles.","id":39}],"id":38}],"id":35},{"type":3,"textContent":"\n","id":40},{"type":2,"tagName":"section","attributes":{"class":"grid"},"childNodes":[{"type":3,"textContent":"\n","id":42},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i1"},"childNodes":[],"id":44},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Trail Runner 2","id":47}],"id":46},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$148","id":49}],"id":48},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Trail Runner 2","data-c":"148"},"childNodes":[{"type":3,"textContent":"Add to cart","id":51}],"id":50}],"id":45}],"id":43},{"type":3,"textContent":"\n","id":52},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i2"},"childNodes":[],"id":54},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Summit Shell","id":57}],"id":56},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$229","id":59}],"id":58},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Summit Shell","data-c":"229"},"childNodes":[{"type":3,"textContent":"Add to cart","id":61}],"id":60}],"id":55}],"id":53},{"type":3,"textContent":"\n","id":62},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i3"},"childNodes":[],"id":64},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Ridge Pack 28L","id":67}],"id":66},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$119","id":69}],"id":68},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Ridge Pack 28L","data-c":"119"},"childNodes":[{"type":3,"textContent":"Add to cart","id":71}],"id":70}],"id":65}],"id":63},{"type":3,"textContent":"\n","id":72},{"type":2,"tagName":"div","attributes":{"class":"card"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"img i4"},"childNodes":[],"id":74},{"type":2,"tagName":"div","attributes":{"class":"body"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"name"},"childNodes":[{"type":3,"textContent":"Merino Crew","id":77}],"id":76},{"type":2,"tagName":"div","attributes":{"class":"price"},"childNodes":[{"type":3,"textContent":"$68","id":79}],"id":78},{"type":2,"tagName":"button","attributes":{"class":"add","data-p":"Merino Crew","data-c":"68"},"childNodes":[{"type":3,"textContent":"Add to cart","id":81}],"id":80}],"id":75}],"id":73},{"type":3,"textContent":"\n","id":82}],"id":41},{"type":3,"textContent":"\n","id":83},{"type":2,"tagName":"aside","attributes":{"class":"drawer","id":"drawer"},"childNodes":[{"type":2,"tagName":"h2","attributes":{},"childNodes":[{"type":3,"textContent":"Your cart","id":86}],"id":85},{"type":2,"tagName":"div","attributes":{"id":"lines"},"childNodes":[],"id":87},{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[{"type":2,"tagName":"b","attributes":{},"childNodes":[{"type":3,"textContent":"Total","id":90}],"id":89},{"type":2,"tagName":"b","attributes":{"id":"total"},"childNodes":[{"type":3,"textContent":"$0","id":92}],"id":91}],"id":88},{"type":3,"textContent":"\n","id":93},{"type":2,"tagName":"label","attributes":{},"childNodes":[{"type":3,"textContent":"Email","id":95}],"id":94},{"type":2,"tagName":"input","attributes":{"id":"email","placeholder":"you@example.com"},"childNodes":[],"id":96},{"type":2,"tagName":"label","attributes":{},"childNodes":[{"type":3,"textContent":"Promo code","id":98}],"id":97},{"type":2,"tagName":"input","attributes":{"id":"promo","placeholder":"Optional"},"childNodes":[],"id":99},{"type":3,"textContent":"\n","id":100},{"type":2,"tagName":"button","attributes":{"class":"pay","id":"pay"},"childNodes":[{"type":3,"textContent":"Place order","id":102}],"id":101},{"type":2,"tagName":"div","attributes":{"class":"err","id":"err"},"childNodes":[{"type":3,"textContent":"Something went wrong. Please try again.","id":104}],"id":103}],"id":84},{"type":3,"textContent":"\n","id":105},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":107}],"id":106},{"type":3,"textContent":"\n","id":108}],"id":13}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1790260328004},
   {"type":3,"data":{"source":1,"positions":[{"x":640,"y":300,"id":41,"timeOffset":0}]},"timestamp":1790260328010},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/collections/trail","method":"GET","initiatorType":"navigation","status":200,"startTime":0,"endTime":186,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/html; charset=utf-8","cache-control":"max-age=31536000"}},{"url":"https://shop.northwind.test/assets/app-4f2a.js","method":"GET","initiatorType":"script","status":200,"startTime":120,"endTime":214,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/javascript","cache-control":"max-age=31536000"}},{"url":"https://shop.northwind.test/assets/app-4f2a.css","method":"GET","initiatorType":"link","status":200,"startTime":122,"endTime":183,"requestHeaders":{"accept":"*/*"},"responseHeaders":{"content-type":"text/css","cache-control":"max-age=31536000"}}]}},"timestamp":1790260328190},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"log","trace":[],"payload":["\"[northwind] storefront ready\"","\"build 4.12.0\""]}},"timestamp":1790260328240},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/products?collection=trail","method":"GET","initiatorType":"fetch","status":200,"startTime":300,"endTime":442,"requestHeaders":{"accept":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"responseBody":"{\"products\": [{\"sku\": \"TR2\", \"name\": \"Trail Runner 2\", \"price\": 148}, {\"sku\": \"SS1\", \"name\": \"Summit Shell\", \"price\": 229}, {\"sku\": \"RP28\", \"name\": \"Ridge Pack 28L\", \"price\": 119}, {\"sku\": \"MC1\", \"name\": \"Merino Crew\", \"price\": 68}]}"}]}},"timestamp":1790260328420},
   {"type":3,"data":{"source":1,"positions":[{"x":608,"y":302,"id":54,"timeOffset":-99},{"x":357,"y":319,"id":54,"timeOffset":-35}]},"timestamp":1790260328511},
   {"type":3,"data":{"source":1,"positions":[{"x":223,"y":330,"id":44,"timeOffset":0}]},"timestamp":1790260329021},
   {"type":3,"data":{"source":1,"positions":[{"x":410,"y":330,"id":54,"timeOffset":-438},{"x":454,"y":341,"id":54,"timeOffset":-109},{"x":247,"y":433,"id":50,"timeOffset":-46}]},"timestamp":1790260329522},
@@ -17,6 +22,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":50,"x":182.5,"y":436.5299987792969},"timestamp":1790260329770},
   {"type":3,"data":{"source":2,"type":2,"id":50,"x":182,"y":436,"pointerType":0},"timestamp":1790260329770},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":32,"id":33},{"parentId":91,"id":92}],"adds":[{"parentId":32,"nextId":null,"node":{"type":3,"textContent":"1","id":109}},{"parentId":87,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":110}},{"parentId":110,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":111}},{"parentId":111,"nextId":null,"node":{"type":3,"textContent":"$148","id":112}},{"parentId":91,"nextId":null,"node":{"type":3,"textContent":"$148","id":113}},{"parentId":110,"nextId":111,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":114}},{"parentId":114,"nextId":null,"node":{"type":3,"textContent":"Trail Runner 2","id":115}}]},"timestamp":1790260329771},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/cart","method":"POST","initiatorType":"fetch","status":200,"startTime":2000,"endTime":2168,"requestHeaders":{"accept":"application/json","content-type":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"requestBody":"{\"sku\": \"TR2\", \"qty\": 1}","responseBody":"{\"items\": 1, \"total\": 148}"}]}},"timestamp":1790260329939},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"info","trace":[],"payload":["\"cart: added\"","\"Trail Runner 2\""]}},"timestamp":1790260329941},
   {"type":3,"data":{"source":1,"positions":[{"x":182,"y":436,"id":50,"timeOffset":-253}]},"timestamp":1790260330023},
   {"type":5,"data":{"tag":"checkpoint","payload":{"label":"Added Trail Runner 2"}},"timestamp":1790260330279},
   {"type":3,"data":{"source":1,"positions":[{"x":223,"y":438,"id":50,"timeOffset":-243},{"x":512,"y":454,"id":60,"timeOffset":-181}]},"timestamp":1790260330524},
@@ -26,6 +33,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":70,"x":792.5,"y":436.5299987792969},"timestamp":1790260330663},
   {"type":3,"data":{"source":2,"type":2,"id":70,"x":792,"y":436,"pointerType":0},"timestamp":1790260330663},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":32,"id":109},{"parentId":87,"id":110},{"parentId":91,"id":113}],"adds":[{"parentId":32,"nextId":null,"node":{"type":3,"textContent":"2","id":116}},{"parentId":87,"nextId":null,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":117}},{"parentId":117,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":118}},{"parentId":118,"nextId":null,"node":{"type":3,"textContent":"$119","id":119}},{"parentId":91,"nextId":null,"node":{"type":3,"textContent":"$267","id":120}},{"parentId":87,"nextId":117,"node":{"type":2,"tagName":"div","attributes":{"class":"line"},"childNodes":[],"id":121}},{"parentId":121,"nextId":null,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":122}},{"parentId":121,"nextId":122,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":123}},{"parentId":123,"nextId":null,"node":{"type":3,"textContent":"Trail Runner 2","id":124}},{"parentId":122,"nextId":null,"node":{"type":3,"textContent":"$148","id":125}},{"parentId":117,"nextId":118,"node":{"type":2,"tagName":"span","attributes":{},"childNodes":[],"id":126}},{"parentId":126,"nextId":null,"node":{"type":3,"textContent":"Ridge Pack 28L","id":127}}]},"timestamp":1790260330664},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/cart","method":"POST","initiatorType":"fetch","status":200,"startTime":2900,"endTime":3052,"requestHeaders":{"accept":"application/json","content-type":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"requestBody":"{\"sku\": \"RP28\", \"qty\": 1}","responseBody":"{\"items\": 2, \"total\": 267}"}]}},"timestamp":1790260330816},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"info","trace":[],"payload":["\"cart: added\"","\"Ridge Pack 28L\""]}},"timestamp":1790260330818},
   {"type":3,"data":{"source":1,"positions":[{"x":792,"y":436,"id":70,"timeOffset":-363}]},"timestamp":1790260331025},
   {"type":3,"data":{"source":1,"positions":[{"x":815,"y":414,"id":65,"timeOffset":-249},{"x":1003,"y":234,"id":74,"timeOffset":-183},{"x":1191,"y":54,"id":15,"timeOffset":-116}]},"timestamp":1790260331526},
   {"type":3,"data":{"source":2,"type":1,"id":30,"x":1211.1400146484375,"y":31.489999771118164},"timestamp":1790260331688},
@@ -50,6 +59,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":0,"id":99,"x":1090.5,"y":321.2099914550781},"timestamp":1790260333914},
   {"type":3,"data":{"source":2,"type":2,"id":99,"x":1090,"y":321,"pointerType":0},"timestamp":1790260333914},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":321,"id":99,"timeOffset":-441}]},"timestamp":1790260334354},
+  {"type":6,"data":{"plugin":"rrweb/console@1","payload":{"level":"warn","trace":["applyPromo (checkout.ts:71)","HTMLInputElement.onchange (checkout.ts:40)"],"payload":["\"[promo] `code` is deprecated; send `promoCode` instead\""]}},"timestamp":1790260334694},
+  {"type":6,"data":{"plugin":"rrweb/network@1","payload":{"requests":[{"url":"https://shop.northwind.test/api/promo/validate?code=FALL25","method":"GET","initiatorType":"fetch","status":200,"startTime":6800,"endTime":6918,"requestHeaders":{"accept":"application/json"},"responseHeaders":{"content-type":"application/json; charset=utf-8","cache-control":"no-store"},"responseBody":"{\"valid\": true, \"discount\": 0.15}"}]}},"timestamp":1790260334834},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":330,"id":99,"timeOffset":-193},{"x":1090,"y":401,"id":101,"timeOffset":-128}]},"timestamp":1790260334855},
   {"type":3,"data":{"source":2,"type":1,"id":101,"x":1090.5,"y":380.5},"timestamp":1790260334954},
   {"type":3,"data":{"source":5,"text":"FALL25","isChecked":false,"id":99},"timestamp":1790260334954},
@@ -59,8 +70,8 @@ export const replayDemoEvents: ReplayEvent[] = [
   {"type":3,"data":{"source":2,"type":2,"id":101,"x":1090,"y":380,"pointerType":0},"timestamp":1790260334954},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[],"removes":[{"parentId":101,"id":102}],"adds":[{"parentId":101,"nextId":null,"node":{"type":3,"textContent":"Placing order…","id":128}}]},"timestamp":1790260334954},
   {"type":3,"data":{"source":1,"positions":[{"x":1090,"y":380,"id":101,"timeOffset":-402}]},"timestamp":1790260335356},
-  {"type":5,"data":{"tag":"network","payload":{"method":"POST","status":500,"url":"/api/checkout","label":"POST /api/checkout 500"}},"timestamp":1790260335855},
-  {"type":5,"data":{"tag":"error","payload":{"label":"TypeError","message":"Cannot read properties of undefined (reading 'total') at applyPromo (checkout.ts:88)"}},"timestamp":1790260335856},
+  {"type":5,"data":{"tag":"network","payload":{"method":"POST","status":500,"url":"/api/checkout","label":"POST /api/checkout 500","duration":412,"type":"fetch","requestHeaders":{"content-type":"application/json"},"requestBody":"{\"email\": \"sam@example.com\", \"promoCode\": null, \"code\": \"FALL25\", \"items\": [\"TR2\", \"RP28\"]}","responseHeaders":{"content-type":"application/json; charset=utf-8","x-request-id":"req_7Hq2c9"},"responseBody":"{\"error\": \"internal_error\", \"message\": \"Cannot read properties of undefined (reading 'total')\"}"}},"timestamp":1790260335855},
+  {"type":5,"data":{"tag":"error","payload":{"label":"TypeError","message":"Cannot read properties of undefined (reading 'total') at applyPromo (checkout.ts:88)","stack":["at applyPromo (checkout.ts:88:19)","at placeOrder (checkout.ts:132:5)","at HTMLButtonElement.onclick (checkout.ts:44:3)"]}},"timestamp":1790260335856},
   {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":103,"attributes":{"class":"err show"}}],"removes":[{"parentId":101,"id":128}],"adds":[{"parentId":101,"nextId":null,"node":{"type":3,"textContent":"Place order","id":129}}]},"timestamp":1790260335856},
   {"type":3,"data":{"source":1,"positions":[{"x":1085,"y":388,"id":101,"timeOffset":0}]},"timestamp":1790260336357},
   {"type":3,"data":{"source":1,"positions":[{"x":1050,"y":444,"id":103,"timeOffset":-441}]},"timestamp":1790260336859},

package/src/replay/devtools.ts

@@ -0,0 +1,251 @@
+/* What a browser's DevTools would have shown during a recording: its console messages and its network requests,
+   read from the event list with no rrweb import. Two kinds of event carry them:
+
+   - rrweb's plugins: `rrweb/console@1` (level, the logged values as JSON strings, a stack trace) and
+     `rrweb/network@1` (`{ requests: [...] }`, each with url, method, status, startTime/endTime, headers, bodies).
+   - Custom events (`record.addCustomEvent(tag, payload)`): tag `network` (or `request`, `fetch`, `xhr`,
+     `network.error`, `request.failed`, `fetch.failed`) with `{ method, url, status, … }`; tag `error` (or
+     `exception`, `console.error`, `uncaught`) with `{ label, message }`; tag `console` (or `log`, `warn`, `info`,
+     `debug`) with `{ level, message }`.
+
+   `replayDevtoolsAt` cuts both lists at a playhead: what had been logged, which requests had been sent and which
+   of those had answered by then. */
+import { ReplayEventType, type ReplayEvent } from './types'
+
+export type ReplayConsoleLevel = 'log' | 'info' | 'warn' | 'error' | 'debug'
+
+export interface ReplayConsoleEntry {
+  /** Stable id (`console-<n>`). */
+  id: string
+  /** Milliseconds from the start of the recording. */
+  time: number
+  level: ReplayConsoleLevel
+  /** The logged values as text, joined with spaces. */
+  message: string
+  /** Each logged value as text. */
+  args: string[]
+  /** Stack frames, when the recording kept them. */
+  trace?: string[]
+  /** `console` (rrweb's console plugin), `exception` (an error event) or `custom` (a custom console event). */
+  source: 'console' | 'exception' | 'custom'
+}
+
+export interface ReplayRequest {
+  /** Stable id (`request-<n>`). */
+  id: string
+  /** When the request was sent, in ms from the start of the recording. */
+  time: number
+  /** How long it took, when known: the response arrived at `time + duration`. */
+  duration?: number
+  method: string
+  url: string
+  /** The last path segment (and query), as DevTools' Name column shows it. */
+  name: string
+  /** HTTP status; 0 when the request failed without one. Missing when the recording doesn't say. */
+  status?: number
+  statusText?: string
+  /** `fetch`, `xhr`, `script`, `img`, … (the resource's initiator type). */
+  type: string
+  /** No response, a status of 0, or a status of 400 and up. */
+  failed: boolean
+  error?: string
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  requestBody?: string
+  responseBody?: string
+}
+
+export interface ReplayDevtools {
+  console: ReplayConsoleEntry[]
+  network: ReplayRequest[]
+}
+
+export interface ReplayDevtoolsState {
+  /** Messages logged at or before the playhead. */
+  console: ReplayConsoleEntry[]
+  /** Requests sent at or before the playhead, with `pending` true for those still waiting on a response. */
+  network: (ReplayRequest & { pending: boolean })[]
+  counts: {
+    requests: number
+    /** Requests that had failed by the playhead (a pending request hasn't failed yet). */
+    failed: number
+    errors: number
+    warnings: number
+    /** Messages and requests later in the recording. */
+    laterMessages: number
+    laterRequests: number
+  }
+}
+
+const ERROR_TAGS = new Set(['error', 'exception', 'console.error', 'uncaught'])
+const REQUEST_TAGS = new Set(['network', 'request', 'fetch', 'xhr', 'network.error', 'request.failed', 'fetch.failed'])
+const FAILED_TAGS = new Set(['network.error', 'request.failed', 'fetch.failed'])
+const CONSOLE_TAGS = new Set(['console', 'log', 'warn', 'warning', 'info', 'debug'])
+
+function record(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' ? (value as Record<string, unknown>) : {}
+}
+
+const str = (value: unknown): string | undefined =>
+  typeof value === 'string' ? value : typeof value === 'number' || typeof value === 'boolean' ? String(value) : undefined
+
+const num = (value: unknown): number | undefined => (typeof value === 'number' && Number.isFinite(value) ? value : undefined)
+
+/** A body or a logged value as text: strings as they are, anything else as compact JSON. */
+function asText(value: unknown): string | undefined {
+  if (value === undefined || value === null) return undefined
+  if (typeof value === 'string') return value
+  try { return JSON.stringify(value) } catch { return String(value) }
+}
+
+/** rrweb's console plugin stores each value JSON-stringified: a string comes back as itself, the rest as JSON. */
+function consoleArg(raw: unknown): string {
+  if (typeof raw !== 'string') return asText(raw) ?? String(raw)
+  try {
+    const value: unknown = JSON.parse(raw)
+    return typeof value === 'string' ? value : raw
+  } catch {
+    return raw
+  }
+}
+
+function headers(value: unknown): Record<string, string> | undefined {
+  if (!value || typeof value !== 'object') return undefined
+  const out: Record<string, string> = {}
+  if (Array.isArray(value)) {
+    for (const pair of value) if (Array.isArray(pair) && pair.length >= 2) out[String(pair[0])] = String(pair[1])
+  } else for (const [k, v] of Object.entries(value)) if (v !== undefined && v !== null) out[k] = String(v)
+  return Object.keys(out).length ? out : undefined
+}
+
+/** DevTools' Name column: the last path segment plus the query, or the host for a bare origin. */
+export function requestName(url: string): string {
+  const clean = url.replace(/#.*$/, '')
+  const [path, query] = clean.split('?', 2) as [string, string | undefined]
+  const segment = path.replace(/\/+$/, '').split('/').pop() || path.replace(/^\w+:\/\//, '') || '/'
+  return query !== undefined ? `${segment}?${query}` : segment
+}
+
+const levelOf = (value: unknown): ReplayConsoleLevel => {
+  const level = str(value)?.toLowerCase()
+  if (level === 'warn' || level === 'warning') return 'warn'
+  if (level === 'error' || level === 'assert') return 'error'
+  if (level === 'info') return 'info'
+  if (level === 'debug' || level === 'trace') return 'debug'
+  return 'log'
+}
+
+/** Every console message and network request in the recording, in time order. */
+export function getReplayDevtools(events: readonly ReplayEvent[]): ReplayDevtools {
+  const list = [...events].sort((a, b) => a.timestamp - b.timestamp)
+  const start = list[0]?.timestamp ?? 0
+  const consoleEntries: Omit<ReplayConsoleEntry, 'id'>[] = []
+  const requests: Omit<ReplayRequest, 'id'>[] = []
+
+  const addRequest = (raw: Record<string, unknown>, at: number, tagFailed = false, batchEnd?: number) => {
+    const url = str(raw.url) ?? str(raw.name) ?? ''
+    const status = num(raw.status) ?? num(raw.responseStatus) ?? num(raw.statusCode)
+    const startTime = num(raw.startTime)
+    const endTime = num(raw.endTime) ?? num(raw.responseEnd)
+    const duration = num(raw.duration) ?? (startTime !== undefined && endTime !== undefined ? Math.max(0, endTime - startTime) : undefined)
+    const error = str(raw.error) ?? (raw.error ? 'Failed' : undefined)
+    // The plugin emits requests once they have finished: the batch's last answer is the event's time, and each
+    // request was sent that far before it (its own duration, for a lone request).
+    const sent = Math.max(0, startTime !== undefined && batchEnd !== undefined ? at - (batchEnd - startTime) : at - (duration ?? 0))
+    requests.push({
+      time: sent,
+      duration,
+      method: (str(raw.method) ?? 'GET').toUpperCase(),
+      url,
+      name: requestName(url),
+      status,
+      statusText: str(raw.statusText),
+      type: (str(raw.initiatorType) ?? str(raw.type) ?? 'fetch').replace(/^navigation$/, 'document'),
+      failed: tagFailed || !!error || status === 0 || (status !== undefined && status >= 400),
+      error,
+      requestHeaders: headers(raw.requestHeaders),
+      responseHeaders: headers(raw.responseHeaders),
+      requestBody: asText(raw.requestBody ?? raw.body),
+      responseBody: asText(raw.responseBody ?? raw.response),
+    })
+  }
+
+  for (const event of list) {
+    const time = event.timestamp - start
+    const data = record(event.data)
+    if (event.type === ReplayEventType.Plugin) {
+      const payload = record(data.payload)
+      if (data.plugin === 'rrweb/console@1') {
+        const args = Array.isArray(payload.payload) ? payload.payload.map(consoleArg) : []
+        const trace = Array.isArray(payload.trace) ? payload.trace.map(String).filter(Boolean) : undefined
+        consoleEntries.push({ time, level: levelOf(payload.level), message: args.join(' '), args, trace: trace?.length ? trace : undefined, source: 'console' })
+      } else if (data.plugin === 'rrweb/network@1' && Array.isArray(payload.requests)) {
+        const batch = payload.requests.map(record)
+        let batchEnd: number | undefined
+        for (const r of batch) {
+          const end = num(r.endTime) ?? num(r.responseEnd)
+          if (end !== undefined) batchEnd = Math.max(batchEnd ?? end, end)
+        }
+        for (const r of batch) addRequest(r, time, false, batchEnd)
+      }
+    } else if (event.type === ReplayEventType.Custom) {
+      const tag = str(data.tag) ?? ''
+      const payload = record(data.payload)
+      if (REQUEST_TAGS.has(tag)) addRequest(payload, time, FAILED_TAGS.has(tag))
+      else if (ERROR_TAGS.has(tag)) {
+        const label = str(payload.label) ?? str(payload.name) ?? 'Error'
+        const detail = str(payload.message) ?? str(payload.detail)
+        const message = detail ? `Uncaught ${label}: ${detail}` : `Uncaught ${label}`
+        const trace = Array.isArray(payload.stack) ? payload.stack.map(String) : str(payload.stack)?.split('\n').map((l) => l.trim()).filter(Boolean)
+        consoleEntries.push({ time, level: 'error', message, args: [message], trace: trace?.length ? trace : undefined, source: 'exception' })
+      } else if (CONSOLE_TAGS.has(tag)) {
+        const args = Array.isArray(payload.args) ? payload.args.map((a) => asText(a) ?? '') : [str(payload.message) ?? str(payload.label) ?? asText(payload.detail) ?? '']
+        consoleEntries.push({ time, level: levelOf(payload.level ?? tag), message: args.join(' '), args, source: 'custom' })
+      }
+    }
+  }
+
+  requests.sort((a, b) => a.time - b.time)
+  return {
+    console: consoleEntries.map((e, i) => ({ ...e, id: `console-${i}` })),
+    network: requests.map((r, i) => ({ ...r, id: `request-${i}` })),
+  }
+}
+
+/** How many items of a time-sorted list are at or before `time`. */
+function countUpTo(list: readonly { time: number }[], time: number) {
+  let lo = 0
+  let hi = list.length
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1
+    if (list[mid]!.time <= time) lo = mid + 1
+    else hi = mid
+  }
+  return lo
+}
+
+/** The console and network as they stood at `time` (ms from the start). */
+export function replayDevtoolsAt(devtools: ReplayDevtools, time: number): ReplayDevtoolsState {
+  const logged = devtools.console.slice(0, countUpTo(devtools.console, time))
+  const network = devtools.network.slice(0, countUpTo(devtools.network, time)).map((r) => ({
+    ...r, pending: r.duration !== undefined && r.time + r.duration > time,
+  }))
+  let errors = 0
+  let warnings = 0
+  for (const e of logged) {
+    if (e.level === 'error') errors++
+    else if (e.level === 'warn') warnings++
+  }
+  return {
+    console: logged,
+    network,
+    counts: {
+      requests: network.length,
+      failed: network.filter((r) => r.failed && !r.pending).length,
+      errors,
+      warnings,
+      laterMessages: devtools.console.length - logged.length,
+      laterRequests: devtools.network.length - network.length,
+    },
+  }
+}

package/src/replay/index.ts

@@ -15,6 +15,9 @@ export { ReplayStage, preloadReplayStage } from './ReplayStage';
 export type { ReplayStageHandle, ReplayStageLayout, ReplayStageProps } from './stage-types';
 export { getReplayMarkers, getReplayMeta, getReplayPointerTrack, replayPointerAt } from './markers';
 export type { ReplayMarker, ReplayMarkerKind, ReplayMeta, ReplayPointerPoint, ReplayPointerTrack } from './markers';
+export { getReplayDevtools, replayDevtoolsAt, requestName } from './devtools';
+export type { ReplayConsoleEntry, ReplayConsoleLevel, ReplayDevtools, ReplayDevtoolsState, ReplayRequest } from './devtools';
+export type { ReplayDevtoolsTab } from './ReplayDevtools';
 export { ReplayEventType, ReplayIncrementalSource, ReplayMouseInteraction } from './types';
 export type { ReplayEvent } from './types';
 export { isReplayQaUrl, normalizeReplayEmbedUrl } from './url';