# React a webové aplikace (https://docs.vitrinka.ai/cs/qa/recorder/web)



## Instalace [#install]

```bash
bun add @vitrinka/web rrweb
```

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

## Připojte ho [#mount]

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

```tsx
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í [#link]

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 [#move]

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 [#key]

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`.

```js
// 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á [#captured]

* **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.

<Callout type="warn">
  Zdroj dostupný pod Elastic License 2.0: můžete ho číst, používat, měnit i šířit — nesmíte ho nabízet třetím stranám jako spravovanou službu.
</Callout>