YeongsuKimm / yeongsuk

MIT License
0 stars 0 forks source link

Debugging CPT Demonstration #16

Open YeongsuKimm opened 4 months ago

YeongsuKimm commented 4 months ago

ISSUE: Our initiate function for the project wasn't creating the correct number of objects in the database.

image image

As seen above, two videos were intended to be uploaded to the database, however, only one was. To fix this issue, I put breakpoints on the following lines to verify whether the issue was the creation of the object or the addition of the object to the database.

image image image

As seen above, the expected two objects were created. However, since the database didn't update with the two objects, the problem is present in the database creating part of the code. Looking at the create function in the backend, I saw that the video was setting its video ID based on the row of the database.

image

Therefore, seeing this, I remembered how the initiate function set its own video ID, which may have conflicted with the create function.

image

I removed the following highlighted lines, which fixed the issue. The reason this was because the previous code conflicted with the create code in the model.

image

The reason for the unnecessary lines was that, previously, the initiate function was the only way of uploading data onto the database, so we set the id based on a variable that was incremented with every object. However, with the addition of the upload function in our project, we forgot to reintegrate the initiate function as the create function already takes care of the problem.

  1. Start backend using Debugging I first started the backend with the python debugging running.

    image
  2. Set break point at the beginning of endpoint code The purpose of this breakpoint is to ensure that the CRUD operations are successfully called from the frontend.

    image
  3. Start in frontend with split screen loading source for an API fetch using GET. To check the success of the fetch operations, I opened the frontend to verify the success of these requests by verifying the success message (200). Additionally, I looked for the source code in the frontend to see the fetch requests.

    image
  4. Set break point on fetch, inside .then, inside .fetch The purpose of this step is to set the breakpoints and verify, by looking at the variables, whether the frontend-backend communication is successful or not.

    image
  5. Run frontend, screen capture break at fetch while examining Body This shows how the frontend code at least gets to the fetch part of the code.

    image
  6. Press play on frontend, observe stop inside of backend As I progress in the frontend, the backend stopped, ensuring that the get request was successfully being communicated to the backend.

    image

    ==>Pressed play ==>

    image
  7. Press step over on backend until you have obtained data from database, screen capture Python Object This step shows how the frontend-backend communication is successful in retrieving and posting data.

    image
  8. Press play button to end backend debugging session.

  9. Return to frontend debug session

  10. Step in until you see data, screen capture capturing break point and Data.

    image image

    This demonstrates the successful GET request to the backend, as seen with the data received.

Additional Debugging

will-w-cheng commented 3 months ago

I think the additional debugging with the relocalization was a cool addition. The stop/breakpoint looks good but I think you need to preface a little bit of what exactly data you are passing through the backend to the frontend.

rayanesouuuu1234 commented 3 months ago

I think you did a great job with this. The breakpoints look correct as well, maybe you need to be clear on the exact data you're passing.

sfremy commented 3 months ago

Additional debugging with CORS was helpful to fix my own issues.

jm1021 commented 3 months ago

Debug session for you and William is very much the same. This makes me concerned if you both have distinct features for CPT.