Project

General

Profile

Actions
Copy link

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.

Status:
In Progress
Priority:
Low
Assignee:
-
Start date:
01/05/2026
Due date:
% Done:

0%

Estimated time:

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

  1. Open the website on a mobile device (iOS/Android)
  2. Navigate to the scoreboard
  3. Tap on any game to view details
  4. 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)
Actions
Copy link
 #1

Updated by William Lang about 2 months ago

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

  1. Added HTTP status check: if (!res.ok) throw new Error(...)
  2. Added API error check: if (data.error) setGame(null)
  3. 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

  1. Added logging to card click handler
  2. Added logging to Summary button click handler
  3. Both log the game_id and full game object for debugging

Testing Instructions

  1. Open browser console on mobile device
  2. Navigate to scoreboard
  3. Tap on any game
  4. 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
Actions
Copy link
 #2

Updated by William Lang about 2 months ago

  • Status changed from Backlog to In Progress
Actions
Copy link

Also available in: Atom PDF