या गोष्टींचे डीबगिंग करणे

नवशिक्या लोकांना वाटते की अनुभवी डेव्हलपर्स चुका करत नाहीत.

सत्य वेगळे आहे.

अनुभवी डेव्हलपर्स फक्त चुका अधिक वेगाने शोधतात आणि त्या सुधारतात.

मी अलीकडेच React, Zustand, Express, Prisma आणि PostgreSQL वापरून एक फुल-स्टॅक प्रोजेक्ट मॅनेजमेंट ॲप तयार केले. मला डझनभर लहान-सहान बग्स (bugs) आले. या बग्समुळे मला आधुनिक फ्रंटएंड ॲप्स कसे काम करतात हे शिकायला मिळाले.

मी शिकलेले धडे खालीलप्रमाणे आहेत:

  • React useEffect आणि Async तुम्ही useEffect मध्ये थेट async फंक्शन पास करू शकत नाही. React ला एक 'cleanup function' किंवा काहीही नको असते. async फंक्शन एक Promise रिटर्न करते, ज्यामुळे हा नियम मोडला जातो. त्याऐवजी इफेक्टच्या आत एक फंक्शन वापरा.

  • विसरलेले फंक्शन मी एकदा useEffect मध्ये एक async फंक्शन लिहिले होते पण ते प्रत्यक्षात कधीच कॉल केले नाही. कंपोनंट माउंट झाला, पण काहीही झाले नाही. कधीकधी बग्स म्हणजे फक्त फंक्शन कॉल करायला विसरणे हे असते.

  • Axios डेटा स्ट्रक्चर Axios एक ऑब्जेक्ट रिटर्न करते. तुमचा डेटा response.data मध्ये असतो. जर तुम्ही संपूर्ण रिस्पॉन्स तुमच्या स्टेटमध्ये (state) सेव्ह करण्याचा प्रयत्न केला, तर तुमचे ॲप फेल होईल.

  • URL डुप्लिकेशन माझ्या Axios instance मध्ये एक base URL होता. मी माझ्या रिक्वेस्टमध्ये पुन्हा API प्रीफिक्स जोडला. यामुळे /api/api/projects सारखे डबल पाथ तयार झाले. तुमच्या ॲब्स्ट्रॅक्शन्सची (abstractions) नेहमी तपासणी करा.

  • नेव्हिगेशन एरर्स (Navigation Errors) Navigate कंपोनंट फक्त रेंडरिंग दरम्यान काम करतो. जर तुम्हाला क्लिक केल्यानंतर युजरला दुसऱ्या पेजवर नेऊन हवे असेल, तर त्याऐवजी useNavigate हुक वापरा.

  • बॅकएंड कॉन्ट्रॅक्ट्स (Backend Contracts) माझ्या बॅकएंडने accessToken नावाचा प्रॉपर्टी पाठवला होता. माझे फ्रंटएंड token नावाच्या प्रॉपर्टीचा शोध घेत होते. नावे जुळत नसल्यामुळे, माझा auth state undefined राहिला. फ्रंटएंड आणि बॅकएंडने नेहमी एकच नावे वापरली पाहिजेत.

  • टाइमिंग इश्यूज (Timing Issues) माझ्या ॲपने युजर लॉग इन करण्यापूर्वीच नोटिफिकेशन्स फेच (fetch) करण्याचा प्रयत्न केला. यामुळे 401 एरर आला. याचे निराकरण नोटिफिकेशन्स तपासणे हे नव्हते, तर रिक्वेस्ट करण्यापूर्वी ऑथेंटिकेशन (authentication) तपासणे हे होते.

सर्वात मोठा धडा माझ्या वर्कफ्लोबद्दल (workflow) होता. अंदाज लावणे थांबवा.

त्याऐवजी ही प्रक्रिया वापरा:

  • ब्राउझर कन्सोल तपासा.
  • Network टॅब तपासा.
  • API रिस्पॉन्स तपासा.
  • बॅकएंड कॉन्ट्रॅक्टची पडताळणी करा.
  • तुमची स्टेट तपासा.
  • डेटाबेसपासून UI पर्यंत डेटाचा प्रवाह फॉलो करा.

सॉफ्टवेअर म्हणजे फक्त वेगाने टायपिंग करणे नव्हे. ते डेटा कसा हलतो (moves) हे समजून घेणे आहे. ट्युटोरियल्स तुम्हाला सोपा मार्ग दाखवतात. प्रोजेक्ट्स तुम्हाला खरा मार्ग शिकवतात.

काहीतरी वास्तव तयार करा. बग्स तुम्हाला कोणत्याही ट्युटोरियलपेक्षा जास्त शिकवतील.

Source: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5