Isolate failing product widgets
Isolate render failures per product widget, keep healthy siblings interactive, and retry only the selected widget.Description
Requirements
Export ProductWidgetBoundary from src/App.tsx.
Replace only the throwing widget with a labelled local fallback.
Continue rendering nonthrowing widgets in caller order after a sibling fails.
Reset only the selected boundary when its Retry control is activated.
Invoke onError with the failing widget ID and captured error once per failure.
Expose visible status and interactive controls with native semantics, accessible names, and keyboard operation appropriate to the workflow.
Do not mutate props, nested caller-owned values, or arrays supplied to the component.
One failure
Recommendations throws while Price succeeds
Price remains visible and Recommendations shows Retry
Replace only the throwing widget with a labelled local fallback.
Retry
The failed widget's renderer is fixed
Retry remounts only that widget
Continue rendering nonthrowing widgets in caller order after a sibling fails.
Constraints
Use React state and effects only where the observable component contract requires themUse injected adapters instead of accessing network, storage, timers, or browser globals directlyKeep one authoritative state transition for each user or adapter event
Hints
Hint 1
Start with the isolates-widget-error behavior and make its observable result deterministic.
Hint 2
Model keeps-healthy-siblings independently before combining it with the remaining states.
Hint 3
Verify the boundary described by reports-widget-context without changing caller-owned input.