Skip to content

Feature: Improve teacher feedback for fetch failures and empty classrooms #606

Description

@NewtonLC

Description

PR #603 fixed a crash that occurred when the student data server was offline. The fix returns [] on any fetch failure, which prevents the crash — but leaves the teacher with a blank dashboard and no explanation. This issue tracks two follow-on UX improvements that build on that fix.


Problem 1 — The teacher can't tell if the fetch failed

fetchStudentData() currently returns [] for three distinct situations:

Case Cause Relevant long-term?
Missing env var MOCK_USER_DATA_URL not set No — dev/config only
Bad HTTP response Server returned 4xx/5xx Yes
Network error Server unreachable Yes

The calling code in pages/dashboard/[id].js receives [] in all cases and passes it straight to DashTabs as data. There's no way to distinguish a failed fetch from an empty class.

Proposed fix:

Return a structured result from fetchStudentData() instead of a bare array:

// Success
return { error: null, data: await response.json() };

// Runtime failures (surface to teacher)
return { error: 'FETCH_FAILED', status: response.status, data: null };
return { error: 'NETWORK_ERROR', data: null };

// Config issue (dev only — keep silent, log only)
console.warn('MOCK_USER_DATA_URL is not defined.');
return { error: 'MISSING_URL', data: null };

[id].js would pass the error code as a prop. For runtime failures, the dashboard UI would render an error message: "We couldn't load your students. Please try refreshing, or contact support at support@freecodecamp.org if the problem persists." The MISSING_URL case should remain a silent console log, as it's dev-facing.


Problem 2 — Empty classrooms show nothing

When a class has no students yet, DashTabs renders a blank page:

Image

Proposed fix:

In getServerSideProps in [id].js, include fccUserIds in the classroom query. If it's empty, the dashboard should not render an empty table. Instead, it should:

  • Tell the teacher there are no students in the class yet
  • Display the classroom's join link with a copy button
  • Instruct the teacher to share the link with their students

Files likely affected

  • util/student/fetchStudentData.js
  • pages/dashboard/[id].js
  • The component(s) rendered by DashTabs that display student data
  • prisma query in pages/dashboard/[id].js (add fccUserIds to the select)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions