ਇਨ੍ਹਾਂ ਚੀਜ਼ਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨਾ

ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲੇ ਸੋਚਦੇ ਹਨ ਕਿ ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰਾਂ ਤੋਂ ਗਲਤੀਆਂ ਨਹੀਂ ਹੁੰਦੀਆਂ।

ਸੱਚਾਈ ਵੱਖਰੀ ਹੈ।

ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰ ਬੱਸ ਗਲਤੀਆਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਲੱਭਦੇ ਅਤੇ ਸੁਧਾਰਦੇ ਹਨ।

ਮੈਂ ਹਾਲ ਹੀ ਵਿੱਚ React, Zustand, Express, Prisma, ਅਤੇ PostgreSQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਫੁੱਲ-ਸਟੈਕ ਪ੍ਰੋਜੈਕਟ ਮੈਨੇਜਮੈਂਟ ਐਪ ਬਣਾਈ। ਮੈਨੂੰ ਦਰਜਨਾਂ ਛੋਟੀਆਂ ਬੱਗ (bugs) ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਿਆ। ਇਹਨਾਂ ਬੱਗਾਂ ਨੇ ਮੈਨੂੰ ਸਿਖਾਇਆ ਕਿ ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਐਪਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ।

ਇੱਥੇ ਉਹ ਸਬਕ ਹਨ ਜੋ ਮੈਂ ਸਿੱਖੇ:

  • React useEffect ਅਤੇ Async ਤੁਸੀਂ useEffect ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇੱਕ async ਫੰਕਸ਼ਨ ਨਹੀਂ pass ਕਰ ਸਕਦੇ। React ਇੱਕ cleanup ਫੰਕਸ਼ਨ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ ਜਾਂ ਕੁਝ ਵੀ ਨਹੀਂ। ਇੱਕ async ਫੰਕਸ਼ਨ ਇੱਕ Promise ਰਿਟਰਨ ਕਰਦਾ ਹੈ, ਜੋ ਇਸ ਨਿਯਮ ਨੂੰ ਤੋੜਦਾ ਹੈ। ਇਸ ਦੀ ਬਜਾਏ effect ਦੇ ਅੰਦਰ ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।

  • ਭੁੱਲਿਆ ਹੋਇਆ ਫੰਕਸ਼ਨ ਮੈਂ ਇੱਕ ਵਾਰ useEffect ਦੇ ਅੰਦਰ ਇੱਕ async ਫੰਕਸ਼ਨ ਲਿਖਿਆ ਸੀ ਪਰ ਉਸਨੂੰ ਕਦੇ ਕਾਲ (call) ਹੀ ਨਹੀਂ ਕੀਤਾ। ਕੰਪੋਨੈਂਟ ਮਾਊਂਟ (mount) ਹੋ ਗਿਆ, ਪਰ ਕੁਝ ਵੀ ਨਹੀਂ ਹੋਇਆ। ਕਦੇ-ਕਦੇ ਬੱਗ ਸਿਰਫ਼ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਦੀ ਘਾਟ ਹੁੰਦੇ ਹਨ।

  • Axios ਡਾਟਾ ਸਟ੍ਰਕਚਰ Axios ਇੱਕ ਆਬਜੈਕਟ ਰਿਟਰਨ ਕਰਦਾ ਹੈ। ਤੁਹਾਡਾ ਡਾਟਾ response.data ਦੇ ਅੰਦਰ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਪੂਰਾ ਰਿਸਪਾਂਸ ਆਪਣੇ ਸਟੇਟ (state) ਵਿੱਚ ਸੇਵ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੀ ਐਪ ਫੇਲ ਹੋ ਜਾਵੇਗੀ।

  • URL ਡੁਪਲੀਕੇਸ਼ਨ ਮੇਰੇ Axios instance ਵਿੱਚ ਇੱਕ base URL ਸੀ। ਮੈਂ ਆਪਣੀਆਂ ਰਿਕੁਐਸਟਾਂ ਵਿੱਚ API ਪ੍ਰੀਫਿਕਸ (prefix) ਨੂੰ ਦੁਬਾਰਾ ਜੋੜ ਦਿੱਤਾ। ਇਸ ਨਾਲ /api/api/projects ਵਰਗੇ ਡਬਲ ਪਾਥ ਬਣ ਗਏ। ਹਮੇਸ਼ਾ ਆਪਣੇ ਐਬਸਟਰੈਕਸ਼ਨ (abstractions) ਦੀ ਜਾਂਚ ਕਰੋ।

  • ਨੈਵੀਗੇਸ਼ਨ ਗਲਤੀਆਂ Navigate ਕੰਪੋਨੈਂਟ ਸਿਰਫ਼ ਰੈਂਡਰਿੰਗ (rendering) ਦੌਰਾਨ ਕੰਮ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ ਯੂਜ਼ਰ ਨੂੰ ਮੂਵ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸ ਦੀ ਬਜਾਏ useNavigate ਹੁੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ।

  • ਬੈਕਐਂਡ ਕੰਟਰੈਕਟਸ ਮੇਰੇ ਬੈਕਐਂਡ ਨੇ accessToken ਨਾਮ ਦੀ ਇੱਕ ਪ੍ਰਾਪਰਟੀ ਭੇਜੀ। ਮੇਰੇ ਫਰੰਟਐਂਡ ਨੇ token ਨਾਮ ਦੀ ਪ੍ਰਾਪਰਟੀ ਲੱਭੀ। ਕਿਉਂਕਿ ਨਾਮ ਮੇਲ ਨਹੀਂ ਖਾਂਦੇ ਸਨ, ਮੇਰਾ auth ਸਟੇਟ undefined ਰਿਹਾ। ਫਰੰਟਐਂਡ ਅਤੇ ਬੈਕਐਂਡ ਨੂੰ ਹਮੇਸ਼ਾ ਇੱਕੋ ਨਾਮ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

  • ਟਾਈਮਿੰਗ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਮੇਰੀ ਐਪ ਨੇ ਯੂਜ਼ਰ ਦੇ ਲੌਗਇਨ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਨੋਟੀਫਿਕੇਸ਼ਨ ਫੈਚ (fetch) ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ। ਇਸ ਨਾਲ 401 ਐਰਰ ਆਇਆ। ਇਸ ਦਾ ਹੱਲ ਨੋਟੀਫਿਕੇਸ਼ਨਾਂ ਦੀ ਜਾਂਚ ਕਰਨਾ ਨਹੀਂ ਸੀ, ਸਗੋਂ ਰਿਕੁਐਸ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਅਥੈਂਟੀਕੇਸ਼ਨ (authentication) ਦੀ ਜਾਂਚ ਕਰਨਾ ਸੀ।

ਸਭ ਤੋਂ ਵੱਡਾ ਸਬਕ ਮੇਰੇ ਵਰਕਫਲੋ (workflow) ਬਾਰੇ ਸੀ। ਅੰਦਾਜ਼ੇ ਲਗਾਉਣਾ ਬੰਦ ਕਰੋ।

ਇਸ ਦੀ ਬਜਾਏ ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਕਰੋ:

  • ਬ੍ਰਾਊਜ਼ਰ ਕੰਸੋਲ (console) ਚੈੱਕ ਕਰੋ।
  • ਨੈੱਟਵਰਕ ਟੈਬ (Network tab) ਚੈੱਕ ਕਰੋ।
  • API ਰਿਸਪਾਂਸ ਦੀ ਜਾਂਚ ਕਰੋ।
  • ਬੈਕਐਂਡ ਕੰਟਰੈਕਟ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ।
  • ਆਪਣੇ ਸਟੇਟ (state) ਦੀ ਜਾਂਚ ਕਰੋ।
  • ਡਾਟਾਬੇਸ ਤੋਂ UI ਤੱਕ ਡਾਟਾ ਦਾ ਪਿੱਛਾ ਕਰੋ।

ਸਾਫਟਵੇਅਰ ਤੇਜ਼ੀ ਨਾਲ ਟਾਈਪ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਹੈ। ਇਹ ਇਸ ਬਾਰੇ ਹੈ ਕਿ ਡਾਟਾ ਕਿਵੇਂ ਮੂਵ ਕਰਦਾ ਹੈ। ਟਿਊਟੋਰਿਅਲ ਤੁਹਾਨੂੰ ਸੌਖਾ ਰਸਤਾ ਦਿਖਾਉਂਦੇ ਹਨ। ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਅਸਲੀ ਰਸਤਾ ਸਿਖਾਉਂਦੇ ਹਨ।

ਕੁਝ ਅਸਲੀ ਬਣਾਓ। ਬੱਗ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਟਿਊਟੋਰਿਅਲ ਨਾਲੋਂ ਵੱਧ ਸਿਖਾਉਣਗੇ।

ਸਰੋਤ: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5