This exposes additional rrweb session replay options in the settings menu

[JacobSussan]

Changes include:

• Add canvas recording support
• Add a none mask level option
• Add console log capture support

rrweb already supports these capabilities; this PR makes them configurable through the settings UI.

---

^{Need help on this PR? Tag @codesmith with what you need. Autofix is disabled.}

[vercel]

@JacobSussan is attempting to deploy a commit to the Umami Software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR exposes three new rrweb session-replay capabilities — canvas recording, a lax mask level, and console log capture — as configurable options in the website settings UI and recorder script. The previous issues raised about defaulting recordCanvas to true, hardcoded labels, and plaintext password capture in none mode have all been addressed in this iteration.

• Canvas recording is off by default (recordCanvas ?? false in both the API endpoint and the settings form); when enabled, FPS and quality are configurable via sliders and validated server-side.
• lax mask level replaces the old none option; the getMaskConfig implementation deliberately omits maskInputOptions, so rrweb's default password masking is preserved.
• Console capture patches window.console methods for the configured level, serializes arguments with circular-reference protection and size limits, and emits custom rrweb events that are rendered in a new ReplayConsoleLogs panel during playback. One minor i18n gap remains: the {logs.length} entries count string in ReplayPlayback.tsx is hardcoded English rather than going through the t() layer like every other label in the file.

Confidence Score: 5/5

Safe to merge; all previously raised concerns have been resolved and the new features are properly opt-in with safe defaults.

Canvas recording defaults to off, the lax mask level keeps rrweb's built-in password masking intact, console capture restores original console methods on stop, and input validation is consistent across the Zod schema, recorder.ts, and the client-side script. The only remaining gap is a hardcoded 'entries' string that doesn't affect runtime correctness.

No files require special attention; the one i18n nit in ReplayPlayback.tsx is cosmetic.

Important Files Changed

Filename	Overview
src/recorder/index.js	Adds canvas recording, configurable mask level (lax), and console capture with proper circular-ref handling and restore-on-stop logic. lax mode correctly omits maskInputOptions, so rrweb's default password masking still applies.
src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayback.tsx	Adds ReplayConsoleLogs component that renders captured console events inline with the replay. Contains one hardcoded English string (entries) that bypasses the i18n layer.
src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx	Adds consoleLevel dropdown, recordCanvas toggle, and canvasFps/canvasQuality sliders. All new labels go through t(labels.xxx). useEffect dependency array is kept in sync with all new state fields.
src/app/api/websites/[websiteId]/recorder/route.ts	Adds consoleLevel, recordCanvas, canvasFps, canvasQuality to the recorder config endpoint. All new fields default to safe off-by-default values (recordCanvas ?? false, consoleLevel ?? 'none').
src/app/api/websites/[websiteId]/route.ts	Extends Zod schema with new fields; maps legacy none maskLevel to lax via z.preprocess. Validation ranges are consistent with the recorder clamp logic.
src/lib/recorder.ts	Adds new fields to RecorderConfig and handles none→lax normalization and clamping for canvas settings. Validation logic is consistent with the API schema.
src/lib/recorder.test.ts	Adds unit tests for none→lax normalization and recordCanvas passthrough. Coverage is light but covers the key migration path.
src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayer.tsx	Enables UNSAFE_replayCanvas on the player and registers the umami.console tag for timeline annotation. Harmless when no canvas frames are present.
src/components/messages.ts	Adds consoleLevel, recordCanvas, canvasFps, canvasQuality label keys pointing to the correct label.* namespace entries in en-US.json.
public/intl/messages/en-US.json	Adds four new label entries nested under the label key, matching the keys referenced in messages.ts.

Sequence Diagram

sequenceDiagram
    participant Browser as Browser (recorder/index.js)
    participant API as /api/websites/:id/recorder
    participant DB as Website Config (DB)
    participant Player as ReplayPlayer / ReplayPlayback

    Browser->>API: GET recorder config
    API->>DB: fetch website.config
    DB-->>API: "{ maskLevel, consoleLevel, recordCanvas, canvasFps, canvasQuality, ... }"
    API-->>Browser: config (with ?? defaults)

    Note over Browser: beginReplayCapture()
    Browser->>Browser: "record({ ...getMaskConfig(maskLevel), recordCanvas, sampling.canvas })"
    Browser->>Browser: startConsoleCapture(consoleLevel) → patch window.console methods

    loop Per console call
        Browser->>Browser: serialize args → record.addCustomEvent("umami.console", payload)
    end

    Browser->>API: POST /replays (flush events incl. custom console events)

    Note over Player: Viewing replay
    Player->>Player: ReplayPlayer renders rrweb events (UNSAFE_replayCanvas: true)
    Player->>Player: "ReplayConsoleLogs filters events by tag="umami.console""
    Player->>Player: Display log level + offset + message

Loading

_{Reviews (2): Last reviewed commit: "address review feedback" | Re-trigger Greptile}

[JacobSussan]

will change 'none' to 'lax', still block passwords, & default canvas recording to disabled.

[JacobSussan]

• switched from 'none' to 'lax' that still blocks passwords but nothing else
• defaulted canvas recording to disabled
• moved all English specific wording to en-US.json

Please let me know if there are any other issues you'd like me to address.

[mikecao]

@greptile review again