Bug #17
open
Mobile: 'Game Not Found' error when selecting game from scoreboard
Added by William Lang about 2 months ago.
Updated about 2 months ago.
Description
Description¶
When selecting a game from the scoreboard on a mobile device, the application displays a "Game Not Found" error. The same action works correctly on desktop browsers.
Steps to Reproduce¶
- Open the website on a mobile device (iOS/Android)
- Navigate to the scoreboard
- Tap on any game to view details
- Observe the "Game Not Found" error
Expected Behavior¶
The game detail page should load and display the selected game's information, just like it does on desktop browsers.
Actual Behavior¶
The application displays a "Game Not Found" error message.
Additional Information¶
- The issue persists even when using "Desktop Site" mode on mobile browsers
- Desktop browsers work correctly for the same games
- This suggests a mobile-specific routing or request handling issue rather than a responsive design problem
Possible Causes¶
- Mobile touch event handling may be passing incorrect game ID
- URL routing may differ between mobile and desktop
- Mobile browser user agent detection causing different code paths
- React Router navigation behaving differently on mobile
Environment¶
- Platform: Mobile (iOS/Android)
- Browser: Multiple (Safari, Chrome mobile)
- Works on: Desktop browsers
- Fails on: Mobile browsers (even with "Desktop Site" enabled)
Investigation Complete¶
Root Cause Identified¶
The issue was in the Game component's error handling (app/frontend/pages/Game.jsx). When the API returns a 404 error with {error: "Game not found"}, the frontend's fetch logic didn't check for HTTP errors or API-level error responses. It would blindly set the error object as the game state, which doesn't have the expected structure (away_team, home_team, etc.), causing the "Game not found" message to display.
Why Mobile-Specific?¶
The mobile-specific nature of the bug likely stems from:
- Touch event handling differences
- Possible URL encoding/decoding issues on mobile browsers
- Race conditions in React Router navigation on mobile
Fix Implemented¶
File: app/frontend/pages/Game.jsx
- Added HTTP status check:
if (!res.ok) throw new Error(...)
- Added API error check:
if (data.error) setGame(null)
- Added comprehensive console logging to track:
- Game ID being loaded
- HTTP response status
- Parsed JSON data
- Any errors encountered
File: app/frontend/pages/Scoreboard.jsx
- Added logging to card click handler
- Added logging to Summary button click handler
- Both log the game_id and full game object for debugging
Testing Instructions¶
- Open browser console on mobile device
- Navigate to scoreboard
- Tap on any game
- Check console logs:
- Should see: "Scoreboard: Card clicked for game: [ID]"
- Should see: "Game component: Loading game with ID: [ID]"
- Should see: "Game component: Received response, status: 200" (or error)
Next Steps¶
- Deploy changes to production
- Test on actual mobile devices (iOS Safari, Android Chrome)
- Monitor console logs if issue persists
- May need additional investigation if the game_id itself is undefined/null on mobile
- Status changed from Backlog to In Progress
Also available in: Atom
PDF