Project Debugging Issue

[tuckergol]

Theme Feature Debugging - FETCH ERROR EXAMPLE

I attempted to recreate a basic problem that I had surprisingly frequently encountered during the development of my Theme-Changing feature due to previous my lack of experience debugging: difficulty with managing endpoints and Fetch API (trouble establishing connection between backend and frontend).

1. Start backend using debugging.
   • Run main.py, debug endpoint in user.py for Theme changing.

I simulated the issue described above by doing the following: below is what the port should be for fetching the endpoint in the backend that allows my theme changing/settings changing feature to work.

Here is me changing it to an incorrect port, just 800 rather than 8008 in this case. This is to break the functionality of the feature and simulate/replicate similar issues I faced during the real development of my feature.

2. Set break point at the beginning of endpoint code.
   • Set breakpoint(s) inside of _Settings (which is for Theme-changing) to demonstrate backend connection + stops and observe data.

3. Start in frontend with split screen loading source for an API fetch.
   • Below shows split screen testing loading source for an API Fetch.

4. Set break point on fetch, inside .then, inside .fetch.
   • We put break points to help us pinpoint the issue.

5. Run frontend, screen capture break at fetch.
   • Below demonstrates the breakpoint at fetch in action following the input for the "Save Settings" button, which involved calling to the backend with the port (previously 8008, now 800 for testing/making error).

6. Press play on frontend, observe stop inside of backend.
7. Press step over on backend until you have obtained data from database.
   • Following pressing play on frontend, we return to backend.
   • Observing the stop/breakpoint in the backend for the endpoint in the backend following "Save Settings" button input on the frontend.
   • User Data of current active User can be seen on the left-hand side.

8. Press play button to end backend debugging session.
   • We press the blue play button near the top of the VSCode window in order to do this.

9. Return to frontend debug session.
10. Step in until you see data.

Using the breakpoint we put on fetch and the errors we get alongside both in the frontend console (bottom of screen capture) and on the site itself (red text above bottom half of split screen), we can pinpoint the problem more directly as being with fetch.

We resolve this problem by inspecting the breakpoint (fetch) while debugging more closely and concluding that the problem is due to an incorrect port to the backend, which should be 8008, not 800. Below is the same "Save Settings" button input action following adjusting the port back to 8008.

Result of attempting Theme Change following problem solving:

[jm1021]

Great frontend example!!! Missing step to debug all the way to the backend.

[ad1tyad3sa1]

Well-organized discussion, and written examples of frontend debugging that correlate with screenshots. Could include more related to backend endpoint, nonetheless exceptionally well done. 1.85/2