প্রদর্শিত স্ক্রিনশটগুলি নিবন্ধের সিমুলেশন সমস্যা বিভাগ থেকে, গোপনীয়তা উদ্বেগের কারণে মূল কোডের সমস্যা নয়। প্রদর্শিত স্ক্রিনশটগুলি নিবন্ধের সিমুলেশন সমস্যা বিভাগ থেকে, গোপনীয়তা উদ্বেগের কারণে মূল কোডের সমস্যা নয়। ️ টেবিল টেবিল সেটআপ সমস্যা: পৃষ্ঠা ইনপুট উপর ফ্রিজ ব্যর্থ ডেভিডিং প্রচেষ্টা The Breakthrough: Pause Script Execution (পূর্বের সংবাদ) রুট কারণ: একটি লুপ যা কখনো শেষ হয় না ফ্রিজের সিমুলেশন (Try It Yourself) যা শিখেছি বোনাস চিন্তা: ডাবগিং মেমরি লিকস Tags The Setup এই বাগ আবির্ভূত হয় a প্রকল্প React + TypeScript + Redux + RxJS ফর্মটি একটি একক সংখ্যক ক্ষেত্র ছিল যখন এটি আপডেট করা হয়, তখন এটি একটি (ব্যবহার করা হয়েছে ) পুনরায় গণনা করা সিনিয়র টেক্সট quantity Redux selector reselect Total cost সবকিছুই ঠিকঠাক দেখতে পেরেছিলো। পাশে Buy তবে বদলে যাওয়া পৃষ্ঠাটি অদ্ভুত কিছু সৃষ্টি করেছিল: পৃষ্ঠাটি যখন প্রবেশ করে তখন অবিলম্বে ফ্রিজ হয়ে যায়। . Sell 1 সমস্যা: পৃষ্ঠা ইনপুট উপর ফ্রিজ যখন পরিমাণ ক্ষেত্রে টাইপ করুন: 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% এটি একটি সাধারণ "দ্রুত" রেন্ডার ছিল না। . সম্পূর্ণ হেঁটে ক্রোম অবশেষে "পৃষ্ঠা অপ্রত্যাশিত" ডায়ালগ প্রদর্শন করেছিল এবং আমাকে ট্যাবটি হত্যা করতে হয়েছিল। ব্যর্থ ডেভিডিং প্রচেষ্টা সাধারণ ডাবগিং পদ্ধতিগুলি সাহায্য করে না: 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 কখনোই ছাপেনি কিছু debugger; ধীরে ধীরে বা কখনো চালানো React DevTools প্রোফাইল অ্যাপ্লিকেশনের সাথে Froze Chrome Performance প্রোফাইল রেকর্ড শেষ করতে পারেননি উপাদান অপসারণ এখনও ঠান্ডা, এমনকি শুধুমাত্র ইনপুট বিষয়টি ছিল একটি চিরতরে চলে যায়, কিন্তু কোথায়? loop or recursive render The Breakthrough: Pause Script Execution (পূর্বের সংবাদ) তখন আমি বুঝতে পেরেছিলাম: যদি জাভাস্ক্রিপ্ট হুইপটি ক্রমেই বাড়তে থাকে, . JavaScript is still running তাই খুললাম অতঃপর লুকিয়ে রাখা জিহ্বা ব্যবহার করুন: Chrome DevTools → Sources tab Pause Script Execution (⏸️) দুর্ভাগ্যবশত, আমি অফিসিয়াল Chrome DevTools ডকুমেন্টেও এই বৈশিষ্ট্যের একটি ব্যাখ্যা দেখতে পাইনি: https://developer.chrome.com/docs/devtools/javascript/breakpoint দুর্ভাগ্যবশত, আমি অফিসিয়াল Chrome DevTools ডকুমেন্টেও এই বৈশিষ্ট্যের একটি ব্যাখ্যা দেখতে পাইনি: https://developer.chrome.com/docs/devtools/javascript/breakpoint https://developer.chrome.com/docs/devtools/javascript/breakpoint পদক্ষেপ : 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! রুট কারণ: একটি লুপ যা কখনো শেষ হয় না স্থগিত স্ট্যাকটি 8+ ফাংশনগুলির একটি চেইন প্রকাশ করে, শুরু থেকে আউটপুট এবং A এর ভেতরে শেষ ব্যবহার করে a . onChange utility function Redux Reselect selector এখানে দোষী: let a = 0; const size = props.size; // expected number, got string while (a < size) { // do something } বেরিয়ে আসে অন্তর্ভুক্ত মূল্য থেকে সরাসরি আসে: a যেমন . props.size string "5" জিএস বাধ্যতামূলক অশ্লীলতার কারণে, নির্দিষ্ট শর্তাবলী অনুযায়ী লুপের তুলনাটি বের হতে ব্যর্থ হয়েছিল, যা একটি অনন্ত লুপের কারণে এবং পুরো টিয়ারটি ফ্রিজ করে। এটি সংশোধন করা সহজ ছিল যেমন ব্যবহার করার আগে মানটি সংখ্যাতে রূপান্তর করা: const size = Number(props.size); অবিলম্বে, পৃষ্ঠা ফ্রিজ নিখোঁজ । ফ্রিজের সিমুলেশন (Try It Yourself) আপনি এই সঠিক বাগ পুনরায় তৈরি করতে পারেন এবং এই codesandbox এ যান দ্বারা ডাবগিং ট্র্যাক নিজেই চেষ্টা করতে পারেন অথবা নিচের কোডটি একটি নতুন কিন্তু প্রথমে আপনার কাজ সংরক্ষণ করুন কারণ এই আপনার ব্রাউজার ট্যাব লিঙ্ক Create React App, উইল লিঙ্ক 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> ); } পুনর্ব্যবহারের ধাপ এই কোডটি উপরের codesandbox বা স্থানীয়ভাবে খুলুন। যেকোনো সংখ্যার ভিত্তিতে প্রবেশ করুন। ট্যাব ফ্রিজ কঠিন দেখুন। খুলুন Chrome DevTools → সূত্র ট্যাব → ️ অবসর স্ক্রিপ্ট সম্পাদনা। কল স্ট্যাকের হ্যান্ডলিং এর ভেতরে অবিচ্ছিন্ন লুপটি পর্যবেক্ষণ করুন। যা শিখেছি যখন কিছুই কাজ করে না: pause script execution হল সিলভার বুলেট। অনির্দিষ্ট লুপ নির্বাচনকারী, কমান্ডার, বা ইউটিলিটি ফাইলের ভিতরে লুকিয়ে থাকতে পারে ইউআই থেকে দূরে। কম্পিউটারিংয়ের আগে সবসময় ব্যবহারকারীর ইনপুট পরিষ্কার করুন এবং টাইপ চেক করুন। যদিও লুপগুলি তীব্র সরঞ্জাম: এক ভুল অবস্থা এবং আপনার অ্যাপ্লিকেশন একটি সিপিইউ টোস্টার হয়ে যায়। বোনাস চিন্তা: ডাবগিং মেমরি লিকস একই প্রযুক্তি ধীরগতি অনুসরণ করতে সাহায্য করতে পারে যেসব ক্ষেত্রে জিএস হুপি ধীরে ধীরে বৃদ্ধি পায়। memory leaks শূন্য সময়ের মধ্যে স্ক্রিপ্ট সম্পাদনা স্থগিত করা যেতে পারে যে কোন পটভূমি প্রক্রিয়া বা সাবস্ক্রিপশনগুলি এখনও অপ্রয়োজনীয়ভাবে চলছে। কিন্তু এটি অন্য নিবন্ধের জন্য একটি পরীক্ষা 😉।
