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 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.

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) { reportError(…) }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback onRetry={…} />;
    }
    return this.props.children;
  }
}

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.

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.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) { reportError(…) }
  render() { … unchanged … }
}

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.

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.

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.