Agent Skills fixes its React error boundary, which crashed even with healthy children
Addy Osmani's Agent Skills teaches your coding agent a React error boundary, inside its shipping and launch skill. That sample threw on every render, even when every component inside it was healthy. A fix merged on October 10 makes the boundary render its fallback screen.
The boundary read its state before setting any
class ErrorBoundary extends React.Component {
componentDidCatch(error, info) { reportError(…) }
render() {
if (this.state.hasError) {
return <ErrorFallback onRetry={…} />;
}
return this.props.children;
}
}
The render method checks this.state.hasError, but the class never gives state a starting value. So state is null, and the boundary crashes with a type error on its first render, before any child has done anything wrong.
It could report an error but never switch to the fallback
The sample had componentDidCatch, which sends the error to a tracking service. It had no getDerivedStateFromError, the lifecycle method that flips hasError to true. Without it, a crashing child gets reported, and the fallback screen stays hidden.
Six added lines set a starting state and add the missing lifecycle
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) { reportError(…) }
render() { … unchanged … }
}
The fix gives state a starting value of hasError false, and adds a static getDerivedStateFromError that returns hasError true when a child throws. The error report, with its component stack, user and page, stays as it was, and so does the retry button.
With React 19.2, all three checks pass
With React 19.2, a healthy child now renders with zero error reports. A failing child shows the fallback and reports the original error. And pressing retry once the child recovers brings it back without a second report.
Strict TypeScript still flags the sample's props
Strict TypeScript still flags the sample’s props
The class still extends an untyped React Component, so strict TypeScript flags this.props.children. Typing the props is left for a follow-up. The three checks ran in jsdom, a simulated browser DOM, so a real browser engine hasn't run them.
Check any error boundary your agent copied from the shipping skill
The fix is on the main branch of the agent-skills plugin for Claude Code and Codex, newer than the October 3 release. If your agent built an error boundary from the shipping and launch skill, compare it with pull request 637.
