রেস কন্ডিশন কেন বাগ ট্র্যাকারে নয়, স্পেকেই রাখি
অন্য টিমের শিপ করা কোডে যে বাগগুলো ঠিক করতে আমাদের ডাকা হয়, তার বেশিরভাগই লজিক এরর নয়। লজিক ঠিকই আছে। যেটা নেই, তা হলো কেউ লিখে রাখেনি এমন একটা প্রশ্নের উত্তর: এটা যদি দুইবার চলে, উল্টো ক্রমে চলে, বা একেবারেই না চলে, তাহলে কী হবে?
একটা ফর্ম লেখার আগে যে পাঁচটা প্রশ্ন করি
যেকোনো ফর্ম, যেকোনো fetch, যেকোনো স্টেট যা রিকোয়েস্ট চলাকালীন বদলাতে পারে — কোনো একটা লাইন ইমপ্লিমেন্ট করার আগেই একই পাঁচটা প্রশ্ন করা হয়:
- ইউজার দুইবার সাবমিট করলে কী হবে? একটা ডাবল ক্লিক, ধীর নেটওয়ার্কে বাটন সাড়া না দেওয়ায় আবার ক্লিক — দ্বিতীয় সাবমিশন ব্লক না করলে দুটো রেকর্ড তৈরি হয়, অথবা আরও খারাপ, আসলে সফল হওয়া একটা রিকোয়েস্টের জন্য এরর টোস্ট দেখায়।
- রেসপন্স উল্টো ক্রমে এলে কী হবে? দ্রুত দুটো সার্চ কোয়েরি টাইপ করলে প্রথম রিকোয়েস্ট দ্বিতীয়টার পরে রেজলভ হতে পারে। সিকোয়েন্স গার্ড ছাড়া, UI আপনি ইতিমধ্যে ছেড়ে দেওয়া কোয়েরির ফলাফল দেখায়।
- রিকোয়েস্ট চলাকালীন কম্পোনেন্ট আনমাউন্ট হলে কী হবে? রুট বদলানো, মডাল বন্ধ হওয়া, অন্য ট্যাবে যাওয়া — fetch থামতে জানে না, আর আনমাউন্ট হওয়া কম্পোনেন্টে
setStateকল হয় জোরে ওয়ার্নিং দেয় নয়তো চুপচাপ অন্য কোথাও স্টেট নষ্ট করে। - লিস্ট খালি হলে, বা ঠিক একটা আইটেম থাকলে কী হবে? শূন্য আর এক — এই দুই কেসই যেকোনো ইনপুটের চেয়ে বেশি carousel, dropdown ও pagination কন্ট্রোল ভাঙে।
- নেটওয়ার্ক মাঝপথে ফেইল করলে কী হবে? শুধু "রিকোয়েস্ট ফেইল" নয় — মাঝপথে। মাল্টি-স্টেপ ফর্ম যেটা সার্ভারে ধাপ ১ আর ২ সেভ করে ফেলেছে কিন্তু ধাপ ৩-এ ফেইল করেছে, তার জন্য দরকার একটা নির্দিষ্ট রিকভারি পথ, সবকিছু মুছে ফেলা একটা জেনেরিক এরর স্ক্রিন নয়।
কোডে এটা যেমন দেখতে
এই প্রজেক্টে, কস্ট ক্যালকুলেটরের সাবমিশন ফ্লো সরাসরি ১ ও ৩ নম্বর প্রশ্নের উত্তর: প্রতিটা সাবমিটে একটা AbortController তৈরি হয়, একটা ref-এ রাখা হয়, আর কম্পোনেন্ট আনমাউন্ট হলে রিকোয়েস্ট শেষ হওয়ার আগেই একটা cleanup effect সেটা abort করে দেয়। reducer-এর SUBMIT_START অ্যাকশন কোনো কাজ করে না যদি একটা সাবমিশন ইতিমধ্যে চলমান থাকে — তাই ডাবল-ক্লিক কেসটা নেটওয়ার্ক পর্যন্ত পৌঁছায়ই না।
টেস্টিমোনিয়াল carousel সরাসরি ৪ নম্বর প্রশ্নের উত্তর দেয়: একটা পেজ থাকুক বা ছয়টা, দুই ক্ষেত্রেই এটা ঠিকভাবে রেন্ডার হয়, আর prev/next কন্ট্রোল যখন পেজ করার মতো কিছু নেই তখন কেবল রেন্ডারই হয় না — ডিজেবল-কিন্তু-দৃশ্যমান একটা অবস্থায় আটকে থাকে না।
এসবের কোনোটাই অস্বাভাবিক কিছু নয়। পার্থক্যটা হলো "এজকেসটা সামলাও"-কে কোড রিভিউ কমেন্ট হিসেবে দেখা বনাম প্রথম কমিট থেকেই স্টেটের গঠন ঠিক করে দেওয়া একটা ডিজাইন কন্সট্রেইন্ট হিসেবে দেখা। দ্বিতীয় পদ্ধতিটা প্রথম দিনে ধীর, কিন্তু এরপরের প্রতিটা দিনে দ্রুত।