Gösterilen ekran görüntüleri, gizlilik endişeleri nedeniyle makalenin simüle edilmiş sorun bölümünden, orijinal kod sorunu değil. Gösterilen ekran görüntüleri, gizlilik endişeleri nedeniyle makalenin simüle edilmiş sorun bölümünden, orijinal kod sorunu değil. ️Yazıyı Oku kurulumu Anahtar Kelimeler: Page Freeze on Input Failed Debug Attempts Etiket Arşivi: pause script execution Önceki Önceki yazı: The Root Cause: A Loop That Never Ends Dondurma Simülasyonu (Try It Yourself) Ne öğrendim Bonus Düşünce: Debugging Memory Leaks Günler kurulumu Bu bug A'da ortaya çıktı Proje için. React + TypeScript + Redux + RxJS Form tek bir sayısal alanı vardı Güncelleştirildiğinde, bir (Kullanım Kullanımı ) yeniden hesaplamak için Senkronize bir metin. quantity Redux selector reselect Total cost herşey güzel gözüküyordu tarafı Buy Ama geçiş için tarafı garip bir şey yarattı: sayfa girdiğinde anında dondurulur . Sell 1 Anahtar Kelimeler: Page Freeze on Input Sayı alanına girerken: The UI froze completely The browser tab became unresponsive The in Chrome Performance Monitor. (Sometimes, the JS heap size also keeps increasing) CPU usage 100% Bu tipik bir “yavaş” render değildi. . complete hang Chrome sonunda “Page Unresponsive” diyalogunu gösterdi ve sekmesini öldürmek zorunda kaldım. Başarısız Debug Denemeleri Sıfırlama yöntemleri yardımcı olmadı: Attempt Result console.log Never printed anything debugger; Too slow or never triggered React DevTools Profiler Froze with the app Chrome Performance Profiler Couldn’t finish recording Removing components Still froze, even with just the input console.log Hiç birşey yazmadım debugger; Çok yavaş ya da hiç açılmamış React DevTools Profilleri App ile Dondurma Chrome Performans Profilleri Kayıtları bitirmek mümkün değil bileşenleri çıkarmak Dondurulmuş, sadece içeriği ile bile Konu bir olmalıydı running endlessly. But where? 🤔 loop or recursive render Etiket Arşivi: pause script execution Sonra bir farkına vardım: JavaScript kümesi büyümeye devam ederse, . JavaScript is still running ben açtım Ve gizli gemiyi kullanır: Chrome DevTools → Sources tab Pause Script Execution (⏸️) Ne yazık ki, resmi Chrome DevTools dosyalarında bile bu özelliğin açıklamasını göremedim: https://developer.chrome.com/docs/devtools/javascript/breakpoint Ne yazık ki, resmi Chrome DevTools dosyalarında bile bu özelliğin açıklamasını göremedim: https://developer.chrome.com/docs/devtools/javascript/breakpoint https://developer.chrome.com/docs/devtools/javascript/breakpoint Adımlar : Open Chrome DevTools first! You won’t be able to open them during the freeze. Reproduce the freeze (enter quantity). When the tab hangs, open . DevTools → Sources tab Click the icon (top-right). ⏸️ Pause Chrome freezes JS execution . at that exact line Scroll down on the right panel & check the panel to trace which functions are currently executing. Call Stack Scroll through the parent calls to reveal how the function chain started. You can even click on the parent calls to see their invoked line! Önceki Önceki yazı: The Root Cause: A Loop That Never Ends Durdurulan sızıntı, 8+ fonksiyonun bir zincirini ortaya çıkardı, içine girer ve içine girer a A tarafından kullanılan . onChange utility function Redux Reselect selector İşte o suçlu: let a = 0; const size = props.size; // expected number, got string while (a < size) { // do something } Dışarı çıkıyor came indirectly from the input value: a gibi . props.size string "5" JS zorunlu şaşkınlığı nedeniyle, döngü karşılaştırması belirli koşullar altında çıkamadı, sonsuz bir döngüye neden oldu ve tüm iplik dondu. Bunu düzeltmek, kullanmadan önce değeri bir sayıya dönüştürmek kadar basitti: const size = Number(props.size); Ardından, buzdolabı kayboldu. Dondurma Simülasyonu (Try It Yourself) Bu tam hatayı yeniden oluşturabilir ve bu codesandbox'a giderek kendiniz hata yapmayı deneyebilirsiniz. Ya da aşağıdaki kodu yeni bir Öncelikle bu işi yapın çünkü browserinizi açın Bağlantı Create React App, Will için Bağlantı import { useState } from "react"; export default function App() { const [quantity, setQuantity] = useState(""); const handleChange = (e) => { const value = e.target.value; setQuantity(value); const end = Date.now() + 145000; let a = 0; // ❌ Intentional infinite loop while (Date.now() < end) { // Busy-wait a++; } console.log("Done!"); // never reached }; return ( <div style={{ padding: 20 }}> <h2>🧊 Simulate a Page Freeze</h2> <input type="text" placeholder="Enter quantity" value={quantity} onChange={handleChange} /> <p>Type any number and watch Chrome suffer.</p> </div> ); } Üretmek için adımlar Bu kodu yukarıdaki codesandbox'ta veya yerel olarak açın. Girişteki herhangi bir numarayı girin. Watch the tab freeze solid. Chrome DevTools → Kaynaklar sekmesini açın → ️ Script çalışmasını durdurun. Call stack içinde HandChange içindeki sonsuz döngüyü gözlemleyin. Ne öğrendim Hiçbir şey işe yaramadığında: kesme senaryo çalışması gümüş kurşun. Sonsuz döngüler, seçiciler, azaltıcılar veya yarar dosyaları UI'den uzakta gizlenebilir. Hesaplamadan önce her zaman kullanıcının girişini temizleyin ve yazdırın. yuvalar keskin araçlardır: bir yanlış koşul ve uygulamanız bir CPU toaster olur . Bonus Düşünce: Debugging Memory Leaks Aynı teknik yavaş izlemeye yardımcı olabilir JS grubu yavaş yavaş arttığı durumlarda. memory leaks Script çalıştırılmasını boş zamanlarda durdurmak, hangi arka plan süreçlerinin veya aboneliklerin hala gereksiz şekilde çalıştığını gösterebilir. Ama bu başka bir makale için bir deney 😉
