వీటిని డీబగ్ చేయడం

అనుభవజ్ఞులైన డెవలపర్లు తప్పులు చేయరని బిగినర్స్ అనుకుంటారు.

నిజం వేరు.

అనుభవజ్ఞులైన డెవలపర్లు తప్పులను వేగంగా గుర్తించి సరిదిద్దగలరు.

నేను ఇటీవల React, Zustand, Express, Prisma, మరియు PostgreSQL ఉపయోగించి ఒక ఫుల్-స్టాక్ ప్రాజెక్ట్ మేనేజ్‌మెంట్ యాప్‌ను రూపొందించాను. నేను డజన్ల కొద్దీ చిన్న చిన్న బగ్స్‌ను ఎదుర్కొన్నాను. ఈ బగ్స్ ఆధునిక ఫ్రంటెండ్ యాప్‌లు ఎలా పనిచేస్తాయో నాకు నేర్పించాయి.

నేను నేర్చుకున్న పాఠాలు ఇక్కడ ఉన్నాయి:

  • React useEffect మరియు Async మీరు useEffect లోకి నేరుగా async ఫంక్షన్‌ను పంపలేరు. React ఒక క్లీనప్ ఫంక్షన్‌ను లేదా ఏమీ లేకుండా ఉండాలని ఆశిస్తుంది. ఒక async ఫంక్షన్ Promiseను రిటర్న్ చేస్తుంది, ఇది ఈ నియమాన్ని ఉల్లంఘిస్తుంది. దానికి బదులుగా ఎఫెక్ట్ లోపల ఒక ఫంక్షన్‌ను ఉపయోగించండి.

  • మర్చిపోయిన ఫంక్షన్ (The Forgotten Function) ఒకసారి నేను useEffect లోపల ఒక async ఫంక్షన్‌ను రాశాను కానీ దానిని పిలవలేదు (call చేయలేదు). కాంపోనెంట్ మౌంట్ అయ్యింది, కానీ ఏమీ జరగలేదు. కొన్నిసార్లు బగ్స్ అంటే కేవలం ఫంక్షన్ కాల్స్ మర్చిపోవడం వల్ల మాత్రమే వస్తాయి.

  • Axios డేటా స్ట్రక్చర్ (Axios Data Structure) Axios ఒక ఆబ్జెక్ట్‌ను రిటర్న్ చేస్తుంది. మీ డేటా response.data లో ఉంటుంది. మీరు మొత్తం రెస్పాన్స్‌ను మీ స్టేట్‌లోకి సేవ్ చేయడానికి ప్రయత్నిస్తే, మీ యాప్ ఫెయిల్ అవుతుంది.

  • URL డూప్లికేషన్ (URL Duplication) నా Axios ఇన్‌స్టన్స్‌కు ఒక బేస్ URL ఉంది. నేను నా రిక్వెస్ట్‌లలో మళ్ళీ API ప్రిఫిక్స్‌ను జోడించాను. దీనివల్ల /api/api/projects వంటి డబుల్ పాత్‌లు ఏర్పడ్డాయి. ఎల్లప్పుడూ మీ అబ్‌స్ట్రాక్షన్‌లను తనిఖీ చేయండి.

  • నావిగేషన్ ఎర్రర్స్ (Navigation Errors) Navigate కాంపోనెంట్ కేవలం రెండరింగ్ సమయంలో మాత్రమే పనిచేస్తుంది. ఒక క్లిక్ తర్వాత యూజర్‌ను వేరే పేజీకి పంపాలనుకుంటే, దానికి బదులుగా useNavigate హుక్‌ను ఉపయోగించండి.

  • బ్యాకెండ్ కాంట్రాక్ట్స్ (Backend Contracts) నా బ్యాకెండ్ accessToken అనే ప్రాపర్టీని పంపింది. నా ఫ్రంటెండ్ token అనే ప్రాపర్టీ కోసం వెతికింది. పేర్లు సరిపోలకపోవడం వల్ల, నా ఆథ్ (auth) స్టేట్ undefined గానే ఉంది. ఫ్రంటెండ్ మరియు బ్యాకెండ్ ఎల్లప్పుడూ ఒకే పేర్లను ఉపయోగించాలి.

  • టైమింగ్ సమస్యలు (Timing Issues) యూజర్ లాగిన్ అవ్వకముందే నా యాప్ నోటిఫికేషన్‌లను పొందడానికి ప్రయత్నించింది. దీనివల్ల 401 ఎర్రర్ వచ్చింది. దీనికి పరిష్కారం నోటిఫికేషన్‌లను తనిఖీ చేయడం కాదు, రిక్వెస్ట్ చేసే ముందు అథెంటికేషన్‌ను తనిఖీ చేయడం.

నేను నేర్చుకున్న అతిపెద్ద పాఠం నా వర్క్‌ఫ్లో గురించి. ఊహించడం ఆపండి.

దానికి బదులుగా ఈ ప్రక్రియను ఉపయోగించండి:

  • బ్రౌజర్ కన్సోల్‌ను తనిఖీ చేయండి.
  • నెట్‌వర్క్ ట్యాబ్‌ను తనిఖీ చేయండి.
  • API రెస్పాన్స్‌ను పరిశీలించండి.
  • బ్యాకెండ్ కాంట్రాక్ట్‌ను ధృవీకరించండి.
  • మీ స్టేట్‌ను పరిశీలించండి.
  • డేటాబేస్ నుండి UI వరకు డేటా ఎలా వెళ్తుందో అనుసరించండి.

సాఫ్ట్‌వేర్ అంటే వేగంగా టైప్ చేయడం కాదు. డేటా ఎలా కదులుతుందో అర్థం చేసుకోవడం. ట్యుటోరియల్స్ మీకు సులభమైన మార్గాన్ని చూపిస్తాయి. ప్రాజెక్ట్‌లు మీకు నిజమైన మార్గాన్ని నేర్పిస్తాయి.

ఏదైనా నిజమైన ప్రాజెక్ట్‌ను నిర్మించండి. ఏ ట్యుటోరియల్ కంటే కూడా బగ్స్ మీకు ఎక్కువ నేర్పిస్తాయి.

మూలం: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5