Challenge: Producton Hardening Audit
Given a small React 19 app that runs, but it is not production-ready. The goal is to audit and harden it by adding clear configuration boundaries, resilient error containment, performance budgets with monitoring, and deployment-minded loading behavior.
We'll cover the following...
Problem statement
The app is a simple two-route dashboard with a Home view, a lazily loaded Reports view, and a small risky widget that can be toggled into a failure state, plus a basic config module used by the UI. Right now, the app has four production risks:
It exposes a secret in client code.
A flaky widget can crash the whole screen with no recovery path.
Navigation to a heavy route feels slow because the chunk is loaded only after a click.
There is no performance visibility or budget enforcement to catch regressions.
Fix these issues with a structured hardening pass.
Success criteria
By the end of the lesson, we can:
No secrets are imported into client code (client config is public-only).
The app has stable error boundaries with a retry that resets the failure cause.
The heavy route is code-split and preloaded on intent (hover/focus) with a Suspense fallback.
We capture basic performance marks and enforce a small performance budget.
A simple “production readiness” panel reports pass/fail for each hardening area.
Technical requirements: Implement the following features step by step:
Task 1: Lock down configuration boundaries
Remove any secret exports from client config. Create a server seam that issues a capability token without returning secrets.
Task 2: Add a resettable error boundary
Wrap the risky widget in a feature boundary that renders a local fallback and supports retry by resetting the cause.
Task 3: Add code-splitting + intent preloading
Lazy-load a “Reports” route, add a Suspense fallback, and preload the chunk on hover/focus.
Task 4: Add performance marks and a basic budget check
Record
app_start,route_commit, andreports_readymarks. Fail the budget if “reports_ready -route_commit” exceeds the allowed threshold.
Project structure
Below is the hierarchy of the project files and folders: