Clipboard API se strică în TypeScript: 4 cazuri nedocumentate care îți vor da dureri de cap

Păi ce poate merge prost cu copierea textului în clipboard? Apasă un buton, cheamă navigator.clipboard.writeText() și gata. Dar nu, TypeScript și browser-ele au decis că ar fi prea plictisitor. Dezvoltatorul JTorchia a descoperit patru capcane pe care documentația le ignoră politicos. Împărtășim experiența ca să nu-i calci pe urme.

Patru cazuri care îți vor strica ziua

1. Context nesigur — Clipboard API funcționează doar prin HTTPS sau localhost. Dacă aplicația ta e pe HTTP, API-ul returnează tăcut undefined. Fără erori, doar liniște. Ca și cum ai încerca să suni pe cineva într-o zonă fără semnal.
2. Pierderea focusului — Dacă utilizatorul a dat click altundeva înainte ca writeText să se execute, browser-ul crede că încerci să furi date și blochează operația. E ca și cum ai vrea să trimiți un bilet în clasă, dar profesorul s-a întors și tu rămâi cu el.
3. Permisiuni revocate în iOS — Safari pe iOS poate revoca permisiunea pentru clipboard dacă utilizatorul nu a interacționat cu site-ul în ultimele 30 de secunde. Și afli doar printr-un rejected tăcut al promisiunii.
4. Timpirea în React — Dacă apelezi writeText într-un efect sau handler care nu e rezultatul direct al unei acțiuni a utilizatorului (de exemplu, un click), browser-ul poate bloca apelul. React face batch la actualizări, iar click-ul tău se poate pierde în coadă.

Cum să repari (spoiler: nu cu magie)

Pentru fiecare caz există o soluție: verifică existența navigator.clipboard, tratează erorile promisiunilor, folosește useRef pentru a stoca ultima acțiune a utilizatorului și nu apela niciodată Clipboard API în afara handler-elor de evenimente. Exemple de cod sunt în articolul original.

Comentariul studioului METABYTE: Și noi am călcat pe aceste greble într-un proiect pentru un startup fintech. Acum avem o listă de verificare „Clipboard API: check before deploy” și dormim mai liniștiți. Dacă și proiectul tău are nevoie de copiere fiabilă — scrie-ne, împărtășim rețeta.