Proof-of-concept for making React components "safe" or "optional" by catching errors during rendering.

safe-component.jsx

// Paste this into https://preactjs.com/repl to see it working

// This function takes any component, and returns a higher-order (wrapper)
// component. This wrapper attempts to render the wrapped component, catching
// any errors.
const safeComponent = (Component) => function WrappedComponent () {
  // Handle both class components and stateless functional components
  const wrappedRender = Component.prototype.render || Component

  try {
    // Attempt to render the wrapped component
    return wrappedRender.apply(this, arguments)
  } catch (e) {
    // Wrapped component render failed; render an error message
    return <div style="color: red">{e.message}</div>
  }
}

class NewsPromo extends Component {
  render({ number, throwError }) {
    if (throwError) {
      throw new Error(`NewsPromo #${number} blew up!`)
    }
  
    return <div>I am promo #{number}</div>
  }
}

const StatelessNewsPromo = ({ number, throwError }) => {
  if (throwError) {
    throw new Error(`NewsPromo #${number} blew up!`)
  }
  
  return <div>I am promo #{number}</div>
}

export default class NewsTopStories extends Component {
  render() {
    const SafeNewsPromo = safeComponent(NewsPromo)

    // To show that it works with stateless functional components too
    // const SafeNewsPromo = safeComponent(StatelessNewsPromo)
    
    return (
      <div>
        <SafeNewsPromo number="1" />
        <SafeNewsPromo number="2" />
        <SafeNewsPromo number="3" throwError />
        <SafeNewsPromo number="4" />
      </div>
    );
  }
}