ان چیزوں کی ڈیبگنگ

ان چیزوں کی ڈیبگنگ

ابتدائی سیکھنے والے سمجھتے ہیں کہ تجربہ کار ڈویلپرز غلطیاں نہیں کرتے۔

حقیقت مختلف ہے۔

تجربہ کار ڈویلپرز صرف غلطیوں کو زیادہ تیزی سے ڈھونڈتے اور ٹھیک کرتے ہیں۔

میں نے حال ہی میں React، Zustand، Express، Prisma اور PostgreSQL کا استعمال کرتے ہوئے ایک فل اسٹیک پروجیکٹ مینجمنٹ ایپ بنائی۔ مجھے درجنوں چھوٹی چھوٹی بگز کا سامنا کرنا پڑا۔ ان بگز نے مجھے سکھایا کہ جدید فرنٹ اینڈ ایپس کیسے کام کرتی ہیں۔

یہ وہ اسباق ہیں جو میں نے سیکھے:

• React useEffect اور Async آپ useEffect میں براہ راست ایک async فنکشن پاس نہیں کر سکتے۔ React ایک کلین اپ (cleanup) فنکشن یا کچھ بھی نہیں (nothing) کی توقع رکھتا ہے۔ ایک async فنکشن ایک Promise واپس کرتا ہے، جو اس اصول کی خلاف ورزی کرتا ہے۔ اس کے بجائے ایفیکٹ کے اندر ایک فنکشن استعمال کریں۔

• بھولا ہوا فنکشن میں نے ایک بار useEffect کے اندر ایک async فنکشن لکھا لیکن اسے کبھی کال (call) نہیں کیا۔ کمپوننٹ ماؤنٹ (mount) تو ہوا، لیکن کچھ نہیں ہوا۔ کبھی کبھی بگز محض فنکشن کالز کے نہ ہونے کی وجہ سے ہوتے ہیں۔

• Axios ڈیٹا اسٹرکچر Axios ایک آبجیکٹ (object) واپس کرتا ہے۔ آپ کا ڈیٹا response.data کے اندر ہوتا ہے۔ اگر آپ پورے ریسپانس (response) کو اپنے اسٹیٹ (state) میں محفوظ کرنے کی کوشش کریں گے، تو آپ کی ایپ کام نہیں کرے گی۔

• URL کا دوہرا ہونا میرے Axios instance میں ایک base URL تھا۔ میں نے اپنی درخواستوں (requests) میں دوبارہ API پری فکس (prefix) شامل کر دیا۔ اس سے /api/api/projects جیسے دوہرے راستے بن گئے۔ ہمیشہ اپنے ایبسٹریکشنز (abstractions) کو چیک کریں۔

• نیویگیشن کی غلطیاں Navigate کمپوننٹ صرف rendering کے دوران کام کرتا ہے۔ اگر آپ کلک کے بعد صارف کو منتقل کرنا چاہتے ہیں، تو اس کے بجائے useNavigate ہوک (hook) استعمال کریں۔

• بیک اینڈ کنٹریکٹس میرے بیک اینڈ نے accessToken نامی پراپرٹی بھیجی۔ میرے فرنٹ اینڈ نے token نامی پراپرٹی تلاش کی۔ چونکہ نام میچ نہیں کر رہے تھے، اس لیے میرا auth اسٹیٹ undefined رہا۔ فرنٹ اینڈ اور بیک اینڈ کو ہمیشہ ایک ہی نام استعمال کرنے چاہئیں۔

• ٹائمنگ کے مسائل میری ایپ نے صارف کے لاگ ان ہونے سے پہلے ہی نوٹیفیکیشنز حاصل کرنے کی کوشش کی۔ اس کی وجہ سے 401 ایرر آیا۔ اس کا حل نوٹیفیکیشنز کو چیک کرنا نہیں تھا، بلکہ درخواست بھیجنے سے پہلے authentication کو چیک کرنا تھا۔

سب سے بڑا سبق میرے ورک فلو (workflow) کے بارے میں تھا۔ اندازے لگانا چھوڑ دیں۔

اس کے بجائے اس عمل کو اپنائیں:

• براؤزر کنسول چیک کریں۔
• نیٹ ورک ٹیب چیک کریں۔
• API ریسپانس کا معائنہ کریں۔
• بیک اینڈ کنٹریکٹ کی تصدیق کریں۔
• اپنے اسٹیٹ کا معائنہ کریں۔
• ڈیٹا بیس سے لے کر UI تک ڈیٹا کے بہاؤ پر نظر رکھیں۔

سافٹ ویئر کا مطلب تیزی سے ٹائپ کرنا نہیں ہے۔ اس کا مطلب یہ سمجھنا ہے کہ ڈیٹا کیسے حرکت کرتا ہے۔ ٹیوٹوریلز آپ کو آسان راستہ دکھاتے ہیں۔ پروجیکٹس آپ کو اصل راستہ سکھاتے ہیں۔

کچھ حقیقی بنائیں۔ بگز آپ کو کسی بھی ٹیوٹوریل سے زیادہ سکھائیں گے۔

ماخذ: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5