इन चीज़ों को डीबग करना
शुरुआत करने वालों को लगता है कि अनुभवी डेवलपर्स गलतियाँ नहीं करते।
सच्चाई इससे अलग है।
अनुभवी डेवलपर्स बस गलतियों को तेज़ी से ढूँढते और ठीक करते हैं।
हाल ही में मैंने React, Zustand, Express, Prisma, और PostgreSQL का उपयोग करके एक फुल-स्टैक प्रोजेक्ट मैनेजमेंट ऐप बनाया। मुझे दर्जनों छोटी-छोटी बग्स का सामना करना पड़ा। इन बग्स ने मुझे सिखाया कि आधुनिक फ्रंटएंड ऐप्स कैसे काम करते हैं।
यहाँ वे सबक दिए गए हैं जो मैंने सीखे:
React useEffect और Async आप useEffect में सीधे एक async फंक्शन पास नहीं कर सकते। React एक क्लीनअप फंक्शन या कुछ भी नहीं होने की अपेक्षा करता है। एक async फंक्शन एक Promise लौटाता है, जो इस नियम को तोड़ता है। इसके बजाय इफेक्ट के अंदर एक फंक्शन का उपयोग करें।
भूल गया फंक्शन एक बार मैंने useEffect के अंदर एक async फंक्शन लिखा लेकिन उसे कभी वास्तव में कॉल नहीं किया। कंपोनेंट माउंट तो हुआ, लेकिन कुछ भी नहीं हुआ। कभी-कभी बग्स बस फंक्शन कॉल न करने की वजह से होते हैं।
Axios डेटा स्ट्रक्चर Axios एक ऑब्जेक्ट लौटाता है। आपका डेटा response.data के अंदर होता है। यदि आप पूरे रिस्पॉन्स को अपने स्टेट में सेव करने की कोशिश करते हैं, तो आपका ऐप फेल हो जाएगा।
URL डुप्लीकेशन मेरे Axios इंस्टेंस में एक बेस URL था। मैंने अपने रिक्वेस्ट में फिर से API प्रीफ़िक्स जोड़ दिया। इससे /api/api/projects जैसे डबल पाथ बन गए। हमेशा अपने एब्स्ट्रैक्शन की जाँच करें।
नेविगेशन एरर्स Navigate कंपोनेंट केवल रेंडरिंग के दौरान काम करता है। यदि आप क्लिक करने के बाद यूजर को कहीं और ले जाना चाहते हैं, तो इसके बजाय useNavigate हुक का उपयोग करें।
बैकएंड कॉन्ट्रैक्ट्स मेरे बैकएंड ने accessToken नाम की एक प्रॉपर्टी भेजी। मेरा फ्रंटएंड token नाम की प्रॉपर्टी ढूँढ रहा था। क्योंकि नाम मेल नहीं खा रहे थे, मेरा auth state undefined ही रहा। फ्रंटएंड और बैकएंड को हमेशा एक ही नाम का उपयोग करना चाहिए।
टाइमिंग इश्यूज़ मेरे ऐप ने यूजर के लॉग इन करने से पहले ही नोटिफिकेशन फेच करने की कोशिश की। इससे 401 एरर आया। इसका समाधान नोटिफिकेशन की जाँच करना नहीं था, बल्कि रिक्वेस्ट भेजने से पहले ऑथेंटिकेशन की जाँच करना था।
सबसे बड़ा सबक मेरे वर्कफ़्लो के बारे में था। अंदाज़ा लगाना बंद करें।
इसके बजाय इस प्रक्रिया का उपयोग करें:
- ब्राउज़र कंसोल चेक करें।
- नेटवर्क टैब चेक करें।
- API रिस्पॉन्स का निरीक्षण करें।
- बैकएंड कॉन्ट्रैक्ट को सत्यापित करें।
- अपने स्टेट का निरीक्षण करें।
- डेटाबेस से UI तक डेटा के प्रवाह का अनुसरण करें।
सॉफ्टवेयर का मतलब तेज़ी से टाइप करना नहीं है। इसका मतलब यह समझना है कि डेटा कैसे मूव करता है। ट्यूटोरियल आपको आसान रास्ता दिखाते हैं। प्रोजेक्ट्स आपको असली रास्ता सिखाते हैं।
कुछ असली बनाएँ। बग्स आपको किसी भी ट्यूटोरियल से ज़्यादा सिखाएंगे।
स्रोत: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5