Frontend Error Boundary ve Recovery: Tek Hata Tüm Uygulamayı Düşürmesin

Problemi doğru sınırlandırın

Beklenmeyen render ve veri hatalarında tüm web uygulamasını beyaz ekrana çevirmeden sınırlandırılmış hata yüzeyi, yeniden deneme ve telemetry tasarlayın.

Bu rehberin odak noktası istemci hatasını kullanıcı görevinin tamamını kaybettirmeden izole etmek. Örnek senaryo gerçek bir müşteri vakası değil, karar mantığını görünür kılmak için hazırlanmış varsayımsal bir çalışma örneğidir: Dashboard'daki tek grafik bozuk veri alınca React ağacı çökmüş ve tüm sayfa kullanılamaz hale geliyor.

Mobil ve web uygulamalarında gerçek kullanıcı koşulları laboratuvardan daha dağınıktır: zayıf ağ, eski cihaz, birden fazla sekme, arka plan kısıtları ve erişilebilirlik gereksinimleri aynı akışı etkileyebilir.

Karar çerçevesi

Bu durumda temel karar şudur: Error boundary'yi kullanıcı görev sınırlarına yerleştirin; hata bileşenini gözlem kimliği ve güvenli retry seçeneğiyle birlikte gösterin. Bu kararın değeri, ekip tarafından aynı şekilde yorumlanabilmesi ve testle kanıtlanabilmesidir. Belirsiz ifadeler yerine gözlenebilir davranış, sorumlu sistem ve hata halinde beklenen sonuç yazılmalıdır. Uygulama ayrıntısı: Boundary hiyerarşisini sayfa, görev ve dekoratif bileşen önemine göre kurun; kritik form state'ini hata bileşeninin dışında güvenli yerde tutun.

Test matrisini yalnızca ideal bağlantı ve tek cihazla sınırlamamak, durum bilgisini kullanıcıya görünür kılmak ve geri dönüş senaryolarını ölçmek ürün kalitesini belirgin biçimde yükseltir.

Dört uygulama ve kabul kontrolü

Birinci kontrol “Bileşen hatasını kasıtlı üretin” olmalıdır. Bunun için önce mevcut durumdan örnek kayıt veya trafik seçin, beklenen sonucu önceden yazın ve değişiklikten sonra aynı örnekleri yeniden çalıştırın. Kontrolün sahibi ile kanıtın saklanacağı yer belli değilse, test tamamlandı denmemelidir.

İkinci kontrol “Kardeş alanların çalışmaya devam ettiğini doğrulayın” maddesidir. Bu kontrol yalnızca başarılı senaryoda değil; boş veri, gecikme, tekrar, yetkisiz kullanıcı veya bağlantı sorunu gibi sınır koşullarında da denenmelidir. Böylece sistemin yalnızca demo sırasında değil gerçek operasyon baskısı altında nasıl davrandığı anlaşılır.

Üçüncü kontrol “Retry'nin sonsuz render döngüsü oluşturmadığını test edin” olarak tanımlanmıştır. Uygulama ekibi teknik logları izlerken operasyon ekibi aynı olayın kullanıcı veya iş sonucu üzerindeki etkisini görebilmelidir. İki görünüm arasında ilişki kurulması, sorunun kaynağını daha hızlı ayırmaya yardımcı olur.

Yayın öncesinde istemci hatasını kullanıcı görevinin tamamını kaybettirmeden izole etmek bağlamında trace id'yi destek görünümüne taşıyın için hazırlığı somutlaştırmalısınız. Bu kontrol hangi test verisiyle yapılacak, beklenen davranış nasıl ölçülecek, arızalı sonucun kullanıcıya görüntüsü ne olacak, ve bulunursa veri nasıl düzeltilecek—tüm bunlar yazılı olmalıdır. Sorumlu kişi, kanıt deposu ve geri alma adımları belirlenmek üzere bir form doldurmalısınız.

Riskleri yayın öncesinde görünür kılın

Yayından sonra ilk 24 saat kritiktir. Normal durumda beklediğiniz sinyalleri (işlem sayısı, hata oranı, yanıt süresi) önceden yazın; hangi değerler alarm üreteceği ve kim baktığını belirleyin. retry loop ile tarayıcıyı kilitlemek gerçekleşirse geri alma kararını kimin vereceği ve kaç dakika içinde uygulanacağı belli olmalıdır. Ardından trace id'yi destek görünümüne taşıyın yeniden çalıştırarak değişikliğin hala güvenli olduğunu kanıtlayın. Kanıt planı: Sentetik hata enjekte ederek hangi UI alanının düştüğünü, kullanıcının kaydettiği taslağın korunduğunu ve logun trace ID içerdiğini doğrulayın.

Kabul kriterini operasyonla bağlayın

Dördüncü kontrol “Trace ID'yi destek görünümüne taşıyın” maddesidir. Bu son adım çoğu projede atlanır; oysa yayın öncesi kabul listesinin bir parçası olduğunda değişikliğin ne zaman gerçekten tamamlandığı netleşir. Kontrol sonuçları tarih, sürüm ve sorumlu ile kaydedilmelidir.

Birincil kaynaklarla teknik çerçeveyi doğrulayın

Risk analizi üç görünür başlıkta tutulabilir. Birincisi “Tüm sayfayı tek boundary ile sarmak”. Bu risk için erken uyarı sinyali, etkilenebilecek kayıt veya kullanıcı kapsamı ve geri alma adımı yazılmalıdır. İkincisi “Hassas stack trace'i kullanıcıya göstermek”; bunu yalnızca log hatası olarak değil veri veya müşteri etkisi olarak da ölçün. Üçüncüsü “Retry loop ile tarayıcıyı kilitlemek”; bu risk gerçekleşmese bile test senaryosunda kasıtlı olarak tetiklenerek kontrolün işe yaradığı kanıtlanabilir.

• OpenTelemetry Documentation
• web.dev — Web Vitals

Yayın, gözlem ve geri dönüş planı

Kabul tablosu proje yönetim aracı yerine geçmez; ekiplerin aynı 'bitti' tanımını kullanmasını sağlar. Her kontrol için örnek veri, beklenen sonuç, gözlem noktası ve sorumlu belirlemek; sonradan yaşanan tartışmayı yayın öncesi karara dönüştürür. Eğer bir kontrol otomatikleştirilebiliyorsa regresyon testine eklenmesi, manuel kalıyorsa tekrar çalıştırılabilecek kısa bir runbook'a bağlanması yararlıdır. Kapsam sınırı: Programlama hatalarını normal iş kuralı hatası gibi boundary ile gizlemeyin; validasyon ve beklenen API hataları ayrı kullanıcı akışında ele alınmalıdır.

Teknik çerçeveyi kontrol ederken bu rehberde OpenTelemetry Documentation, web.dev — Web Vitals birincil dokümantasyonları referans alınmıştır. Bu kaynaklar kullanılan kavramların ve platform davranışlarının resmi açıklamalarını sağlar; ancak sizin veri modeliniz, sözleşmeleriniz, trafik profiliniz ve güvenlik gereksiniminiz için nihai tasarım kararı değildir. Uygulama öncesinde kullanılan ürün/sürüm dokümantasyonu yeniden kontrol edilmelidir.

Yayın planında üç kapı kullanın: önce yapısal doğrulama, sonra sınırlı gerçek kullanım, son olarak genişletme. İlk kapıda şema, yetki, hata ve veri bütünlüğü test edilir. İkinci kapıda gerçek trafik veya temsil edici kullanıcı grubu üzerinden performans ve davranış izlenir. Üçüncü kapıya yalnızca belirlenen hata bütçesi ve iş metriği sınırları içinde kalındığında geçilir. Bu sıra, değişikliği yavaşlatmak için değil geri bildirim maliyetini düşürmek için vardır.

Sık sorulan sorular

Frontend Error Boundary ve Recovery için ilk adım nedir?

Önce problemi teknik çözüm adıyla değil iş etkisiyle sınırlayın. Bu rehberdeki senaryoda başlangıç noktası istemci hatasını kullanıcı görevinin tamamını kaybettirmeden izole etmek. Ardından mevcut davranışı ölçün ve ilk kabul kriterini bileşen hatasını kasıtlı üretin şeklinde somutlaştırın.

Bu çalışma tek seferde canlıya alınmalı mı?

Genellikle hayır. En güvenli yaklaşım, değişikliği küçük bir kapsamda doğrulayıp gözlem sinyallerini izlemektir. Özellikle “Tüm sayfayı tek boundary ile sarmak” riski gerçekleştiğinde geri dönüş veya telafi adımının önceden tanımlı olması gerekir.

Mobil ve Web Uygulamaları projesinde başarı nasıl kabul edilir?

Başarı yalnızca ekranın veya endpoint'in çalışması değildir. Kardeş alanların çalışmaya devam ettiğini doğrulayın ve retry'nin sonsuz render döngüsü oluşturmadığını test edin birlikte doğrulanmalı; hata, tekrar ve yetki gibi sınır durumları için de ölçülebilir kanıt üretilmelidir.

Bu içerikteki senaryo ve kabul örnekleri açıklama amacıyla hazırlanmış varsayımsal örneklerdir; müşteri sonucu, fiyat, sertifikasyon veya performans garantisi değildir. Platform davranışları uygulama tarihinde güncel birincil dokümantasyondan yeniden doğrulanmalıdır.