React a webové aplikace

Instalace

bun add @vitrinka/web rrweb

react, react-dom a rrweb jsou peer závislosti.

Připojte ho

Aplikaci jednou obalte a pilulku položte tam, kde má plavat. Nic se nezaznamenává, dokud tester session z pilulky nespustí.

import { VitrinkaRecorderRoot, VitrinkaRecorderPill } from '@vitrinka/web/recorder';

<VitrinkaRecorderRoot url={process.env.NEXT_PUBLIC_VITRINKA_URL}>
  {children}
  <VitrinkaRecorderPill />
</VitrinkaRecorderRoot>

Rekordér se připojí jen když je nastavené url. V produkci ho nechte prázdné a root vykreslí jen své děti.

Propojte zařízení

Testeři nikdy nepíšou token. Link recorder ukáže krátký kód, tlačítko Open vitrinka a — na desktopu — QR kód:

1. Na tom samém zařízení klepněte na Open vitrinka; na počítači naskenujte QR telefonem, který je do vitrinky přihlášený.
2. Kód schvalte — když patříte do více workspaců, vyberte který.
3. Rekordér dostane token, který umí jen vytvářet a doplňovat session v tom jednom workspacu. Nepřečte boardy, úkoly ani cizí session, vyprší 30 dní po posledním použití a je vidět a odvolatelný v Nastavení → tokeny.

Stejná stránka je v uživatelském menu jako Link a device pro ruční zadání kódu.

Propojený rekordér nahrává jen na stránce, jejíž hostitel odpovídá některému doménovému pravidlu projektu ve workspacu — tomu samému, které vybírá projekt session. Pravidlo s produkčním prostředím — production, prod, prd nebo live, na velikosti písmen nezáleží — ho odmítne, dokud se pro něj pravidlo výslovně nezapne: u domény v Nastavení → Projekty → Routing zapněte in-app recorder, nebo na pravidle nastavte "inAppRecorder": true (PUT nastavení nahrazuje celý seznam domains, pošlete zpět všechna pravidla). Rozšíření prohlížeče a nativních aplikací se to netýká a recorder key si drží vlastní seznam origins.

Odmítnutá stránka dostane 403, které jmenuje pravidlo ke změně; nové propojení nepomůže. O nové propojení žádá jen 401 — token byl odvolán, vypršel nebo patří jinému workspacu.

Odsuňte ho z cesty

Nahrávač zůstává malý: 28px tečka, dokud nikdo nenahrává, pak tečka s časem, která se při najetí, fokusu nebo klepnutí rozbalí do ovládání a po odchodu se zase složí. Když je něco špatně, třeba výpadek spojení, ukáže se řádek sám.

Přetáhněte ho do libovolného rohu nebo doprostřed nahoru či dolů — rychlé švihnutí dopadne tam, kam míří. Za levý nebo pravý okraj ho zasunete do tenkého jazýčku; klepnutím na jazýček se vrátí. Šipky na zaměřeném nahrávači a Move to v jeho menu dělají totéž bez tažení. Místo si pamatuje pro každý web. Na telefonu se okno poznámky i propojení otevírá od spodního okraje, nad klávesnicí.

Buildy bez člověka

CI a end-to-end sady kód schválit nemohou. Admin v Nastavení → tokeny vydá recorder key — připnutý k projektu a omezený na přesné origins, které vyjmenujete (* odmítne; jsou zároveň CORS allow-list) — a build ho nastaví jako NEXT_PUBLIC_VITRINKA_KEY.

// next.config.js
const { withVitrinkaRecorder } = require('@vitrinka/web/next');
module.exports = withVitrinkaRecorder(nextConfig);

withVitrinkaRecorder odmítne produkční build, který nese recorder key, pokud VITRINKA_RECORDER_LANE nejmenuje povolenou dráhu (preview nebo development) — klíč se tak nikdy nedostane k uživatelům.

Co se zaznamenává

• Přehrání — rrweb DOM stream s maskovanými vstupy; přehrání je keyframe session, screenshoty se nepořizují. Po skončení session ho vitrinka přehraje ve svém capture sidecaru a vykreslí snímek u každého kliknutí, navigace, poznámky a anotace, takže nástěnka session vypadá jako u session z rozšíření. Obrázky a fonty, které stránka načetla ze svého serveru, se pro snímky nestahují, takže zůstanou prázdné.
• Kliknutí — krátký selektor prvku, jeho obdélník a redigovaný útržek textu.
• Navigace — každá změna trasy.
• Konzole — chyby a neodchycené rejections.
• Síť — fetch a XMLHttpRequest, s hlavičkami, URL a těly přes stejná redakční pravidla jako u Expo rekordéru; vlastní uploady rekordéru se přeskakují.
• Poznámky a anotace — co tester napíše a označí, na prvku nebo v natažené oblasti.

Úplný kontrakt je PROTOCOL.md v repozitáři vitrinka-kit.