React

by Kikketer

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

React

class SafetyNet extends React.Component {
	constructor() {
  	super()
    this.state = { jsError: null }
  }
  
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { jsError: true }
  }
  
  render() {
  	const componentTypes = ['a', 'b']
  	if(!this.state.jsError) {
  	// FoundComponent is created based on props: https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime
	  	return (
      <div>
      {componentTypes.map(t => {
      	const FoundComponent = getComponentByType(t)
        return <FoundComponent />
      })}
      </div>)
    } else {
  	  return <ErrorComponent />
    }
  }
}

function getComponentByType(type) {
	switch(type) {
  	case 'a':
    	return ComponentA
    case 'b':
    	return ComponentB
    default:
    	return ErrorComponent
  }
}

class ComponentA extends React.Component {
	render() {
  	JSON.parse('abcde')
	  return (<div>Component A</div>)
  }
}

class ComponentB extends React.Component {
	render() {
	  return (<div>Component B</div>)
  }
}

class ErrorComponent extends React.Component {
	render() {
  	return <div>Error Found</div>
  }
}

ReactDOM.render(<SafetyNet />, document.querySelector("#app"))