Skip to content

Queue pages fail to render on volunteer dashboard

Bug Summary

None of the queue pages render on the volunteer dashboard on develop.

Current Behavior

Clicking on any queue page on the volunteer dashboard leads to a blank page.

Diagnosis: This is due to an issue in the translation files.

Expected Behavior

Queue pages load normally.

Impact

Who is affected and how severely?

  • 🚨 Critical - System broken, users cannot complete core tasks
  • ⚠️ High - Major feature broken, workaround exists but difficult
  • 📌 Medium - Minor feature broken, workaround exists and easy
  • ℹ️ Low - Cosmetic issue, no functional impact

Affected Users: volunteer Affected Modules: All Queues

Reproduction Steps

  1. Navigate to any volunteer-accessible queue page from the volunteer dashboard (on the develop branch)

Reproduction Rate: [x] Always [ ] Sometimes [ ] Rarely

Environment

Does the bug occur on:

  • Local development
  • Staging environment
  • Production environment

Test-Driven Bug Verification

Bug Reproduction Test Cases

Test ID Test Description Steps to Reproduce Expected Result Actual Result Status
TC-BUG-001 Queue pages should render without React object errors 1. Login as volunteer
2. Navigate to any queue page (Vitals Queue, Consultation Queue, etc.)
3. Observe page load		 Page loads successfully with patient list Blank page with console error: "Objects are not valid as a React child" ❌ Fail (before fix) / ✅ Pass (after fix)
TC-BUG-002 PatientCard component renders patient details 1. Open any queue page
2. Wait for patient data to load
3. Check that patient cards display correctly		 Patient cards show name, book number, doctor info, etc. React error prevents rendering ❌ Fail (before fix) / ✅ Pass (after fix)

Regression Test Cases

Scenario 1: Bug is Fixed

Given the user is logged in as a volunteer
  And the user navigates to a queue page
  And the queue data loads successfully
 When the PatientCard components render
 Then the patient cards display all required information
  And no "Objects are not valid as a React child" errors appear in console

Scenario 2: No Regression in Related Flow

Given the user is on a queue page
 When the user filters by doctor, specialization, or gender
 Then the filter options render correctly
  And the filtered results display properly
  And no React rendering errors occur```

Unit Test Requirements (for fix)

  • Test case that reproduces bug scenario
  • Test for edge case that was missed (translation keys returning objects)
  • Test for proper error handling (console error monitoring)
  • Test for correct translation key types

Components/Functions to Add Tests For:

File Function/Component Test to Add
tests/TranslationValidation.test.tsx PatientCard, QueueDisplay Console error monitoring for React object rendering errors
tests/TranslationStructure.test.tsx Translation files Direct validation that critical translation keys are strings, not objects

Root Cause Analysis

What caused this bug?

  • Logic error in translation file structure
  • Missing null/undefined check
  • Incorrect API response handling
  • Race condition
  • State management issue
  • Event handler not cleaned up
  • Incorrect TypeScript type
  • CSS/Styling issue
  • Browser compatibility
  • Other: _____

Technical Details: The translation key common.doctor was defined as an object in the translation files:

"doctor": {
  "_": "| Doctor:",
  "actions": "Doctor Actions",
  "manageQueue": "Manage your consultation queue and view medicine availability"
}

However, components were using this key directly in JSX:

<PatientCard>
  {t('common.doctor')}  // Returns object, cannot be rendered by React
</PatientCard>

React's rendering engine (react-dom) throws an error when attempting to render objects as children:

Objects are not valid as a React child (found: object with keys {_, actions, manageQueue})

This affected all queue pages because:

  1. PatientCard component renders t('common.doctor') at line 97
  2. PatientCard is used by QueueDisplay component
  3. QueueDisplay is used by all queue pages (Vitals Queue, Consultation Queue, Prescriptions Queue, etc.) The error occurred in the following components:
  • PatientCard.tsx (lines 97, 99, 101, 110) - uses common.doctor, common.symbol40, common.symbol41, common.joined
  • QueueDisplay.tsx (lines 246, 405) - uses common.doctor, common.searchPatients

Fix Verification Checklist

  • Bug reproduction steps now produce expected behavior
  • All test cases in TC-BUG-* now pass
  • No console errors related to this issue
  • Fix works on all affected browsers
  • Fix works on all affected viewport sizes
  • No regressions in related functionality
  • Unit tests added to prevent recurrence
  • Error boundaries handle similar cases gracefully

Additional Context

Screenshots / Screen Recordings

Before (Bug) After (Fix)
Screenshot_from_2026-03-19_12-10-11 Screenshot_2026-03-19_at_12.11.47_PM

Console Errors

react-dom_client.js?v=8a978aca:3543 Uncaught Error: Objects are not valid as a React child (found: object with keys {_, actions, manageQueue}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectTypeImpl (react-dom_client.js?v=8a978aca:3543:10)
    at throwOnInvalidObjectType (react-dom_client.js?v=8a978aca:3547:105)
    at reconcileChildFibersImpl (react-dom_client.js?v=8a978aca:3860:6)
    at react-dom_client.js?v=8a978aca:3872:28
    at reconcileChildren (react-dom_client.js?v=8a978aca:5389:50)
    at beginWork (react-dom_client.js?v=8a978aca:6203:1615)
    at runWithFiberInDEV (react-dom_client.js?v=8a978aca:854:66)
    at performUnitOfWork (react-dom_client.js?v=8a978aca:8432:94)
    at workLoopSync (react-dom_client.js?v=8a978aca:8328:37)
    at renderRootSync (react-dom_client.js?v=8a978aca:8312:6)

QueueDisplay.tsx:239 An error occurred in the <span> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Edited by Ahlad Pataparla