Design a Self-healing React Component
Problem statement
Design a mobile-first React component that detects layout bugs, falls back safely, and uses an AI feedback loop for diagnosis, patch validation, rollout, and human override.
Asked In
Key Challenges
- ·Notice mobile layout bugs such as overflow, clipped buttons, or overlapping text
- ·Collect useful debugging information without sending private user data
- ·Show a safe fallback UI so the user can still complete the main action
- ·Let an AI agent suggest a fix, run checks, and create a patch or PR
- ·Decide which fixes AI can ship automatically and which need a human review
2-Minute Answer — High-Level TL;DR
Read this before your interview
HLD Interview Focus
I would explain this in four parts. First, the React component should watch its own mobile layout using simple signals: is there horizontal scroll, is an important button hidden, did text overlap, did layout shift too much, or did hydration fail. Second, if the component detects a serious problem, it should not wait for AI. It should immediately switch to a safe fallback, for example a stacked mobile layout or a simpler version with the main action still visible. Third, the app sends a redacted bug report to an AI agent: viewport size, build id, component name, DOM measurements, and maybe a safe screenshot. The agent suggests a CSS or component fix, but the fix must pass visual tests, accessibility tests, and a small canary rollout. Fourth, I would define control rules: AI may auto-ship tiny low-risk style fixes behind a feature flag, but a human must approve anything touching login, payment, forms, user data, accessibility semantics, or business-critical flows.
My Approach: Building the Solution
How to think about this problem
I'll start from a Buy button clipped at 375px — ErrorBoundary will not help — then design observers, prebuilt fallbacks, redacted diagnostics, and an out-of-band AI fix loop with human gates.
Why This Approach?
Most candidates say 'wrap it in an ErrorBoundary and ask an LLM to rewrite JSX'. That answer fails twice: layout bugs throw no exception, and shipping model-generated UI into a live session is unsafe. Strong answers detect layout health, fall back to known-safe variants immediately, and keep AI inside a tested release pipeline.
Think of it like a car dashboard. The component first turns on a warning light, then switches to a safe driving mode, and only then asks the mechanic AI to suggest the real repair.
Requirements: What Makes a Great Solution?
Clarify scope before designing anything
Requirements Exploration Questions
Ask your interviewer these questions to refine requirements
What does self-healing mean?
- ·Only detect the bug
- ·Switch to a fallback UI
- ·Ask AI to create a fix
- ·Auto-roll out only very safe fixes
Which bugs are we trying to catch?
- ·Page scrolls sideways
- ·CTA button is hidden
- ·Text overlaps
- ·Sticky footer covers content
- ·Mobile layout breaks after hydration
Where should this work?
- ·Mobile web
- ·PWA
- ·webview
- ·specific breakpoints like 320px, 375px, and 430px
What information can we safely collect?
- ·Viewport size
- ·element sizes
- ·layout shift
- ·component name
- ·build id
- ·redacted screenshot
What should AI be allowed to do?
- ·Suggest CSS changes
- ·open a PR
- ·change a design token
- ·turn on a feature flag for a small canary
Where do we need human approval?
- ·Login
- ·checkout
- ·forms
- ·user data
- ·accessibility roles
- ·large component changes
Functional Requirements
Must Have — MVP
- ✓A layout health hook that watches mobile rendering problems
- ✓Simple bug detection for overflow, clipped elements, overlap, and layout shift
- ✓A fallback UI that keeps the main action usable
- ✓A redacted diagnostic report for the AI agent
- ✓An AI loop that suggests a fix and validates it before rollout
- ✓A human override, rollback button, and kill switch
Advanced (If Time Permits)
- +Visual screenshot comparison across common mobile sizes
- +Canary rollout with automatic rollback
- +AI that understands design tokens
- +Privacy-safe session replay sampling
- +AI-created PR with before/after proof
Non-Functional Requirements
Performance Targets
- ·Observer overhead under 2ms per sampled layout check
- ·No more than 1% of sessions collect enriched diagnostics
- ·Fallback applied within one animation frame after critical detection
- ·No measurable LCP regression from instrumentation
Reliability & Consistency
- ·No infinite fallback/retry loops
- ·AI fixes are idempotent and gated by feature flags
- ·Auto-rollback if layout error rate or conversion drops
- ·Telemetry survives reloads and network loss through a small outbox
Accessibility & Input Support
- ·Keyboard-first flows with visible focus and predictable tab order
- ·Screen-reader announcements for async changes using aria-live where appropriate
- ·Reduced-motion alternatives for animated transitions
- ·Pointer, touch, and keyboard parity for every core action
Security & Privacy
- ·Redact text inputs, tokens, emails, names, and payment data before sending diagnostics
- ·Do not send full DOM when sensitive components are present
- ·Treat AI-generated code as untrusted until tests and policy checks pass
- ·Audit every AI-suggested production change with prompt, context, diff, approver, and rollout id
Observability
- ·Track Core Web Vitals plus domain-specific interaction latency
- ·Measure API error rate, retry rate, stale-cache usage, and client exceptions
- ·Emit structured events for critical user journeys and abandoned flows
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Full RADIO-framework walkthrough with architecture diagrams
- Data model, API design, and rendering strategy trade-offs
- Performance, accessibility, and offline sections plus a model answer
Already a member? Log in to open the workspace.