Production'da sadece bazı kullanıcılarda oluşan bir frontend hatasını nasıl tespit edip çözersiniz?

Önce hatayı yeniden üretebilmek için bağlam toplarım, sonra kök nedeni bulup bir regresyon testi ile düzeltirim. Adımlar:

1. Veri topla

• Hata izleme (Sentry, Datadog RUM vb.): Stack trace, tarayıcı/OS/cihaz, release sürümü, kullanıcı aksiyonları (breadcrumb), etkilenen kullanıcı sayısı.
• Source map'leri hata izleme aracına yükleyin (ama herkese açık sunmayın); minified stack trace okunamaz.
• Session replay varsa kullanıcının ne yaptığını izleyin (kişisel verileri maskeleyerek).

2. Örüntü ara

• Sadece belirli bir tarayıcı/sürüm mü? (ör. eski Safari'de olmayan bir API: structuredClone, Array.prototype.at)
• Belirli bir locale/saat dilimi mi? (Tarih parse etme, Türkçe i harfi, ondalık virgül)
• Yavaş ağ/kesintili bağlantı mı? (race condition, timeout)
• Belirli bir veri durumu mu? (boş isim, çok uzun liste, null alan)
• Tarayıcı eklentisi, reklam engelleyici veya kurumsal proxy mi?
• Deploy sonrası mı başladı? Eski chunk'ları isteyen açık sekmeler: "ChunkLoadError".

3. Yeniden üret

DevTools ile cihaz, ağ (Slow 4G, offline), CPU throttling, locale ve saat dilimi emülasyonu; gerekirse BrowserStack gibi gerçek cihaz servisleri.

4. Düzelt ve koru

• Kök nedeni düzeltin, sadece try/catch ile susturmayın.
• Hatayı üreten durumu birim veya E2E testine ekleyin.
• Kademeli yayın (feature flag, canary) ile düzeltmeyi doğrulayın, hata oranını izleyin.
• Postmortem: neden daha önce yakalanmadı? (eksik browserslist hedefi, polyfill, test senaryosu)

Örnek

"Sadece iPhone kullanıcılarında ödeme butonu çalışmıyor" -> Sentry'de Safari 15'te TypeError: x.at is not a function -> Array.prototype.at Safari 15.4 öncesinde yok -> browserslist hedefini güncelle veya polyfill ekle, ilgili tarayıcı için E2E projesi ekle.