Feature/mv3 canvas worker cleanup rebased

[hamaron]

Summary by CodeRabbit

• New Features

  • Added configurable image bitmap processing options for canvas recording with both inline and worker-based processors

• Improvements

  • Enhanced canvas snapshot capture with improved WebGL context handling
  • Better canvas traversal including shadow DOM support
  • Robust error handling with graceful fallback mechanisms

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces a pluggable image bitmap processing system for rrweb, replacing worker-based canvas image processing with a modular inline and worker processor pattern. The system includes new processor factories, integration with the record pipeline via optional configuration, and supporting updates to test timeouts and type definitions for cross-origin iframe handling.

Changes

Cohort / File(s)	Summary
API Exports packages/rrweb/src/index.ts	Re-exports three new public APIs: createInlineImageBitmapProcessor, createWorkerImageBitmapProcessor, and createWorkerMessageHandler from the image-bitmap-data-url-processor module.
Image Bitmap Processor Implementation packages/rrweb/src/record/workers/image-bitmap-data-url-processor.ts	New module implementing inline and worker-based image bitmap processors: createInlineImageBitmapProcessor() for direct bitmap-to-data-URL conversion with caching and change detection; createWorkerImageBitmapProcessor(worker, options?) for delegating to a WebWorker with fallback and error handling; createWorkerMessageHandler() for processing worker responses.
Worker Interface Updates packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts	Updates worker interfaces with new postMessage overloads and event listener members; delegates message handling to the centralized processor-based workflow instead of in-file logic.
Canvas Manager Refactoring packages/rrweb/src/record/observers/canvas/canvas-manager.ts	Replaces worker-based image bitmap processing with pluggable inline processor; adds WebGL context warm-up helper (warmUpWebGLContext); adds optional imageBitmapProcessor constructor option; refines canvas collection and DOM traversal to include shadow roots; integrates processor into snapshot flow with WebGPU fallback and error handling.
Record Pipeline Integration packages/rrweb/src/record/index.ts	Adds imageBitmapProcessor to record function options and propagates it to CanvasManager instantiation.
Type Definitions packages/rrweb/src/types.ts, packages/types/src/index.ts	Adds imageBitmapProcessor?: ImageBitmapDataURLProcessor to recordOptions<T>; exports new ImageBitmapDataURLProcessor type alias; extends ICrossOriginIframeMirror interface with four new methods (getIds, getRemoteId, getRemoteIds, reset); extends ImageBitmapDataURLWorkerResponse with optional reason?: string field.
Test Configuration & Timeouts packages/rrweb/test/record.test.ts, packages/rrweb/test/replay/hover.test.ts, packages/rrweb/vitest.config.ts	Increases test and hook timeouts (30,000 to 120,000 ms range); adds await keywords to asynchronous page.evaluate calls in record tests; removes explicit devtools: true option from hover test Puppeteer launcher.

Sequence Diagram

sequenceDiagram
    participant Recorder as Record Function
    participant CanvasManager
    participant Processor as Image Processor
    participant Worker as (Optional) Worker

    rect rgb(200, 220, 255)
    Note over Recorder,CanvasManager: NEW: Pluggable Processor Pattern
    Recorder->>CanvasManager: Initialize with imageBitmapProcessor option
    CanvasManager->>CanvasManager: Set default inline processor if not provided
    end

    rect rgb(200, 220, 255)
    Note over CanvasManager,Processor: Canvas Snapshot Processing
    CanvasManager->>CanvasManager: Collect canvases (including shadow roots)
    CanvasManager->>CanvasManager: Warm up WebGL context if needed
    CanvasManager->>CanvasManager: Create ImageBitmap from canvas
    CanvasManager->>Processor: Process bitmap to data URL
    end

    alt Inline Processor
        Processor->>Processor: Convert to OffscreenCanvas
        Processor->>Processor: Draw bitmap, check for changes
        Processor-->>CanvasManager: Return base64 data URL
    else Worker Processor
        Processor->>Worker: Post bitmap with request ID
        Worker->>Worker: Process via worker message handler
        Worker-->>Processor: Post response with data URL
        Processor-->>CanvasManager: Return base64 data URL
    end

    rect rgb(200, 220, 255)
    Note over CanvasManager: Emit Mutation
    CanvasManager->>CanvasManager: Create mutation with data URL
    CanvasManager->>CanvasManager: Emit canvas redraw event
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Canvas manager refactoring (canvas-manager.ts): High-density logic with WebGL context warm-up, processor integration, DOM traversal enhancements, error handling, and mutation emission flow requires careful verification.
• New processor module (image-bitmap-data-url-processor.ts): Three new exported functions implementing inline/worker processors with caching, state management, and fallback logic need thorough validation.
• Worker delegation changes (image-bitmap-data-url-worker.ts): Interface updates and migration to processor-based workflow require verification that message passing semantics remain correct.
• Type system extensions (packages/types/src/index.ts): Four new methods on ICrossOriginIframeMirror and processor type additions should be verified for consistency with usage patterns.
• Architectural pattern shift: Transition from direct worker implementation to pluggable processor pattern; the system's error handling paths and processor selection logic warrant attention.

Poem

🐰 A bitmap hop through inline streams,
Processors dream of WebGL beams,
Where workers once did labor long,
Now plugins make the canvas song!
With warmth and fallback, error care,
Our images float light as air! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/mv3-canvas-worker-cleanup_rebased

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8824d8f and 9af71e8.

⛔ Files ignored due to path filters (1)

• packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (10)

• packages/rrweb/src/index.ts (1 hunks)
• packages/rrweb/src/record/index.ts (2 hunks)
• packages/rrweb/src/record/observers/canvas/canvas-manager.ts (6 hunks)
• packages/rrweb/src/record/workers/image-bitmap-data-url-processor.ts (1 hunks)
• packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts (1 hunks)
• packages/rrweb/src/types.ts (2 hunks)
• packages/rrweb/test/record.test.ts (4 hunks)
• packages/rrweb/test/replay/hover.test.ts (1 hunks)
• packages/rrweb/vitest.config.ts (1 hunks)
• packages/types/src/index.ts (3 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}