Bug Report: CORS Policy and Server Errors in GitHub Wrapped Web App

[G4EVA-dev]

Description

Accessing the GitHub Wrapped web app resulted in multiple errors related to the API endpoints, including CORS issues, a 500 internal server error, and JavaScript runtime exceptions. These issues prevent the application from functioning as expected for certain users.

Steps to Reproduce

1. Navigate to the GitHub Wrapped web app: https://www.githubwrapped.io/.
2. Attempt to interact with the "wrapped" feature using the my ID myID.
3. Observe errors in the browser's developer console.

Observed Errors

1. CORS Policy Issue:

   • Error Message:

     Access to XMLHttpRequest at 'https://api.githubtrends.io/wrapped/valid/myID' from origin 'https://www.githubwrapped.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
     

   • Affected URLs:
     • https://api.githubtrends.io/wrapped/valid/myID

2. Failed Resource Loading:

   • Error Message:

     Failed to load resource: net::ERR_FAILED
     

3. 500 Internal Server Error:

   • Error Message:

     https://api.githubtrends.io/wrapped/myID?year=2024:1 Failed to load resource: the server responded with a status of 500 ()
     

4. JavaScript Runtime Error:

   • Error Message:

     SelectUser.js:69 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'includes')
     at f (SelectUser.js:69:19)
     

   • File and Line Number: SelectUser.js:69

Expected Behavior

The app should successfully fetch data from the API and display the user's wrapped information without errors.

Environment

• Browser: Chrome
• Operating System: macOS/Windows/Linux
• URL: https://www.githubwrapped.io/

Possible Causes

1. CORS Misconfiguration: The API server (api.githubtrends.io) does not include the Access-Control-Allow-Origin header, blocking cross-origin requests.
2. Backend Issue: The server responded with a 500 error for the endpoint https://api.githubtrends.io/wrapped/myID?year=2024, indicating a potential bug in the backend logic.
3. Frontend Error: The JavaScript runtime error suggests insufficient null-checking for the response data.

Suggested Fixes

1. CORS Configuration:

   • Update the API server to include the Access-Control-Allow-Origin header with a value of * or the specific origin https://www.githubwrapped.io.

2. Backend Debugging:

   • Investigate and resolve the 500 error by reviewing logs and exception handling for the endpoint GET /wrapped/myID?year=2024.

3. Frontend Code Update:

   • Add null-checking in SelectUser.js:

     if (data && data.includes) {
         // Handle includes logic
     } else {
         console.error("Data is null or undefined.");
     }

Additional Context

• Chrome logs mention a shift towards stricter cookie policies which might also affect API calls in the future.
• Users are currently unable to proceed due to these errors, making the feature unusable.

---

Priority: High
Labels: Bug, Backend, Frontend, CORS