Aiden Huynh, Period 1 - Debugging Event

[aidenhuynh]

How to Run with Debugger

Frontend

1. Run locally using bundler, use whatever port bundle exec jekyll serve -P 4001

2. Open up post/markdown page locally

3. Open inspect and navigate to js code

4. Add breakpoints by clicking on the line numbers on the left.

5. When running code, press the arrow to step through each breakpoint. In our case, the code will be run when attempting to login.

Backend

1. Navigate to Main.java
2. In VSCode, press on the arrow next to the run button and click "Debug Java"

Demonstration on teacher_portfolio

First, we run our frontend locally with bundle exec jekyll serve -P 4001 and navigate to http://localhost:4001/teacher_portfolio/java/login (You can choose any port, but preferably not 4000 to see a CORS error later)

Then, inspect element and find the "login" js code in Sources

Setting three breakpoints on the .fetch, .then, and .catch allows us to see possible points of error from our frontend.

The following errors occur in different cases when trying to sign in:

1. ERR_CONNECTION_REFUSED occurs from not running the backend, and is fixed by doing so

2. This CORS error occurs from not allowing the correct origins on MvcConfig.java

This error is fixed by making sure the origin is allowed, and in this case, we had to change the port to match our localhost.

@Override
    public void addCorsMappings(@NonNull CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("https://nighthawkcoders.github.io", "http://localhost:4001"); // Changed port to 4001 from 4000
    }

3. The 401 error occurs from an authorization issue, which in this case was from incorrect login credentials

This is fixed by making sure to use the correct login information from Person.java, as we testing with a random password, instead of the actual password initialized within the file.

Successful Run

The expected outcome of properly avoiding all of these errors is being redirected to the data page (http://localhost:4001/teacher_portfolio/java/data). Yay!

Demonstration on Team Project

I will be running our website's dashboard page for the frontend, and showing the backend interaction for fetching user information based on the inputted UID.

Screenshot of breakpoints

I have set breakpoints on the main .fetch, two of the .then's, and a .catch

Catch output for funsies

I forgot to change the allowed origins so I got a CORS error when stepping through to the following .catch

.catch(error => {
            console.error('There was a problem with the fetch operation:', error);
});

After editing the MvcConfig.java and SecurityConfig.java files to allow the port I was using, the issue was fixed.

Screenshot of data output

Data is returned from the fetch in the following code block:

.then(data => {
            console.log(JSON.stringify(data)); // Log the data
            populateAssignmentContainer(data); // Show the data on the frontend
})

Console output

Frontend update with data