@tirs/rewind

DOM-replay capture for the Tirs SDK — recording for devices that cannot screen-record.

Mobile browsers have no getDisplayMedia. There is no permission to ask for and no flag to set: the API does not exist, so a customer who opens a care link on their phone has nothing to record with. This package records the page itself instead, with rrweb, and produces a bundle the Tirs viewer replays like a video.

What it does

• Records only where screen capture is impossible. Desktop keeps recording real video — this never competes with it.
• Records across tabs. Every tab of the session runs a recorder, and the one the customer is actually looking at holds the "camera": switching tabs hands it over, so the replay follows them the way a screen recording would. A reload is just a hand-over to a new document, so it costs one cut rather than the recording.
• Persists as it goes. Segments are gzipped into IndexedDB every 30 seconds, so a crash, an eviction or a navigation costs at most the segment in flight.
• Redacts by default: inputs are masked and anything marked class="rr-block" is skipped.
• Caps recordings at 2 minutes — shorter than video, because this runs on phones.

How to use

Off by default. It is the tenant's call: DOM capture is a materially different privacy and performance posture than log capture, and it should be switched on deliberately.

Script tag

Nothing to install. The runtime fetches this package's CDN artifact on its own, from the same version directory capture.js came from, and only on devices that will use it:

<script src="https://cdn.try-trs.com/v1/capture.js"
        data-tirs-key="YOUR-KEY"
        data-tirs-rewind="true"></script>

Bundler

npm i @tirs/rewind

import { init } from '@tirs/core';
import { care } from '@tirs/care';
import { rewind } from '@tirs/rewind';

init({ key: 'YOUR-KEY', rewind: true, plugins: [care(), rewind()] });

The implementation sits behind a dynamic import(), so your bundler splits rrweb into its own chunk. Nothing is fetched until a care session actually exists in the tab.

Making replays look right

A DOM replay re-fetches whatever could not be embedded at capture time. Three things account for nearly every replay that looks wrong:

• Fonts. Serve font files with Access-Control-Allow-Origin. Without it the browser will not let us embed them, and the replay falls back to system fonts.
• Auth-gated assets. Stylesheets and images behind a login replay blank. Anything the reviewer's browser cannot fetch, it cannot show.
• Deliberate exclusions. Add class="rr-block" to regions that must never be captured.

Every bundle carries a fidelity manifest listing what the replay depends on fetching live, so when something does look wrong it is possible to see why rather than guess.

Size

~25 KB gzipped, almost all of it rrweb — larger than the entire capture runtime. That is why it is a separate package and a separate CDN artifact: a tenant who never enables it, and every desktop visitor of a tenant who does, pays nothing for it.

Licence

MIT