Pikselleri değil, kelimeleri kaydeden mobil oturum kaydı

Ekran görüntüsü neden yanlış bir başlangıç noktasıydı

React Native’deki ekran görüntüsü tabanlı kaydediciler saniyede iki veya daha fazla görüntü yakalayıp yükler. Diğer sağlayıcıların yayımladığı rakamlara göre bu, düşük uçta dakikada 50 KB ile 500 KB, yüksek uçta ise dakikada yaklaşık 0,5 MB demektir. Bu maliyet faturanıza yansımadan önce kullanıcının pilinden ve mobil verisinden çıkar. Üstelik AnyReplay’in var oluş nedeni olan işe de kapıyı kapatır: Almanca bir ödeme ekranının görüntüsü Türkçe bir ekrana dönüştürülemez. Piksellerin içinde kelime yoktur.

Var oluş nedeni bir oturumu inceleyen kişinin okuduğu dilde göstermek olan bir araç, kelimeleri daha kayıt aşamasında çöpe atamaz. Bu yüzden mobil SDK hiçbir zaman ekran görüntüsü almaz.

Kaydedici aslında neyi yakalıyor

SDK her adımda React’in ekrana yerleştirdiği öğe ağacını — React DevTools’un okuduğu ağacın aynısını — dolaşır ve her host öğe için ne olduğunu ve ne yazdığını not eder: metniyle bir Text, etiketiyle bir Pressable, placeholder’ıyla bir TextInput. Ardından her öğenin ekranda nerede durduğunu ölçer; bunun için React Native’in New Architecture’ı gerekir. React ekranda ne olduğunu, ölçüm ise nerede olduğunu bilir; ikisi birlikte ekranı yeniden oynatmaya yetecek kadar iyi tarif eder.

Sonuç bir fotoğraf değil, bir wireframe: doğru yerlerde duran, içinde doğru metin bulunan ve ağaç değiştikçe güncellenen kutular. Bu, neyin yakalandığı konusunda dürüsttür ve bir oturumu başka bir dilde izlenebilir kılan da tam olarak budur: her metin, oynatıcıya ulaştığında hâlâ metindir.

• Bir ekranın ilk karesi birkaç kilobayttır.
• Sonraki her kare yalnızca değişeni taşır — çoğu zaman birkaç sayı.
• Boşta bekleyen bir ekran hiçbir şey göndermez.
• Dokunuş parmak kalktığında kaydedilir; kaydırma ya da kaydırarak geçiş dokunuş sanılmaz, kaydırma konumları da kaydedilir.
• Gezinme NavigationContainer üzerinden izlenir; böylece ekranlar zaman çizelgesinde adlarıyla görünür.

İki satır uygulama kodu, yeniden derleme yok

Native modül olmadığı için pod install, Gradle değişikliği ya da yeniden derleme de yok — SDK 52 ve sonrasında Expo Go’da çalışır. İkinci satır uygulamanızı <AnyReplay> ile sarar: React Native’de dokunuşları dinleyebileceğiniz bir document nesnesi olmadığından kaydedici React’in ağacını ve dokunuşları buradan bulur; geri kalan her şeyi kendisi halleder.

npm install @anyreplay/react-native

// App.tsx
import { AnyReplay, init, trackNavigation } from '@anyreplay/react-native';

init({
  projectKey: 'ar_pk_live_your_project_key',
  ingestUrl: 'https://in.anyreplay.com',
  // Your bundle id (iOS) or package name (Android). Required once the project lists allowed domains or apps.
  // appId: 'com.example.app',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Fields are masked: what people type replays as asterisks. Secure
  // fields, passwords, one-time codes and card fields are masked either
  // way. Uncomment the first line to record what people type, or the
  // second to mask every field in a way nothing can weaken.
  // maskAllInputs: false,
  // maskAllTyping: true
});

export default function Root() {
  return (
    <AnyReplay>
      <NavigationContainer ref={(ref) => { if (ref) trackNavigation(ref); }}>
        <App />
      </NavigationContainer>
    </AnyReplay>
  );
}

Seçenekler bir mobil ekibin ihtiyaç duyduğu her şeyi kapsar: sampleRate her ziyaretçi için bir kez belirlenir, böylece kaydedilen kişi kaydedilmeye devam eder; snapshotIntervalMs maliyeti belirleyen ana ayardır; requireConsent, siz consent(true) çağırana kadar hiçbir şey kaydetmez; AsyncStorage verildiğinde de SDK geri dönen kullanıcıyı tanır. API’nin tamamı on fonksiyon — init, stop, consent, identify, screen, track, trackError, trackNavigation, flush ve getSessionId — ve <AnyReplay> sarmalayıcısından oluşur. Projeniz izinli alan adları listeliyorsa uygulamanın bundle id’sini İzinli uygulamalar altına ekleyin ve aynı değeri appId olarak verin; her oturum da hangi platformun ve uygulama sürümünün kaydettiğini gösterir.

Cihazdan çıkmadan, cihazın üzerinde maskelenir

Maskeleme, hiçbir şey gönderilmeden önce cihazda uygulanır ve tarayıcıdakiyle tam olarak aynı çalışır. secureTextEntry taşıyan her şey, bileşen kendini nasıl adlandırırsa adlandırsın maskelenir; textContentType, autoComplete, keyboardType, placeholder ya da etiketiyle parola, tek kullanımlık kod veya ödeme alanı olduğu anlaşılan alanlar da maskelenir; Luhn denetimini geçen 13–19 haneli her değer de öyle; henüz yazılmakta olan bir kart numarasının altıncı hanesinden sonrası da. testID değeri ar-mask içeren her şey de siz öyle istediğiniz için maskelenir. Diğer alanlara yazılanlar da siz maskAllInputs: false demedikçe maskelenir. Maskelenmiş bir öğe kutusunu korur, kelimelerini kaybeder: inceleyen kişi bir şey yazıldığını ve nereye yazıldığını görür, ne yazıldığını asla görmez. Değer gönderilmeden önce değiştirilir — yüklenip sonra gizlenmez. Açıkça söylenmesi gereken bir sınır var: bu seçenek kapatıldığında, hiçbir prop taşımayan yalın bir <TextInput /> kendisi hakkında hiçbir şey söylemez ve kaydedilir; web’de hiçbir özniteliği olmayan bir <input> için de durum aynıdır. Her iki SDK’yı da gizlilik sayfası anlatıyor.

Henüz neleri yapmıyor

Sınırları kurulumdan önce bilmenizi tercih ederiz. Bir FlatList yalnızca render ettiği satırları bildirir; bu yüzden oynatmada geri kaydırdığınızda listenin tamamını değil, o anda var olan satırları görürsünüz. Uygulama paketinizle gelen görseller bir kez yüklenir ve çizilir; cihazdaki fotoğraflar hiç okunmaz, maskImages: true ise hiçbir görseli kaydetmez. Özel native bileşenler, yakalanacak okunabilir bir şey olmadığı için doğru yerde, metinsiz, bilinmeyen bir kutu olarak kaydedilir. Haritalar, web görünümleri ve videolar içerikleri yakalanmayan etiketli kutulardır; ekran klavyesi çizilmez. Henüz native bir iOS ya da Android SDK’sı yok.

Aynı panel, aynı oynatıcı, aynı sandbox

Mobil oturumlar aynı proje listesinde web oturumlarının yanında durur, aynı zaman çizelgesi ve etkileşim listesiyle aynı oynatıcıda oynatılır ve aynı çeviri hattından geçer. Markup olarak değil veri olarak kaydedildikleri için oynatma sandbox’ının endişe edeceği şey daha da azdır — çizilecek, başka birinin uygulamasına ait bir DOM zaten yoktur. Buradaki terimler için sözlüğe, kaydedicinin arkasındaki mühendislik için bloga göz atın.