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

New Issue

tcsenpai · 2025-04-09T15:00:18Z

tcsenpai commented

2025-04-09 15:00:18 +00:00

Originally created by @G4EVA-dev on 12/23/2024

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

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

Observed Errors

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

Failed Resource Loading:

Error Message:

Failed to load resource: net::ERR_FAILED

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 ()

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

CORS Misconfiguration: The API server (api.githubtrends.io) does not include the Access-Control-Allow-Origin header, blocking cross-origin requests.
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.
Frontend Error: The JavaScript runtime error suggests insufficient null-checking for the response data.

Suggested Fixes

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.
Backend Debugging:
- Investigate and resolve the 500 error by reviewing logs and exception handling for the endpoint GET /wrapped/myID?year=2024.

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

*Originally created by @G4EVA-dev on 12/23/2024* #### 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`: ```javascript 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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/github-trends#31