title: Should I wrap all React render code with try{} catch(err){}?
body: <p>Sometimes React fails silently when running <code>render</code> code. It's then hard to find out where it broke.</p>
  
  <p>I wonder, if I should just put all the code for <code>render</code> function inside <code>try {} catch(err) {alert(err)}</code>?</p>
  
  <p>Is it a good practice or should I catch and debug errors in a different way?</p>
  
  <p>One of the cases it shows no errors is when I send some props variables to a component which are actually undefined and it tries to get properties of that undefined variable, like this:</p>
  
  <pre><code>&lt;FormField form={this.props.form} /&gt;
  </code></pre>
  
  <p>Then, inside <code>FormField</code> component <code>render</code> function there is this code:</p>
  
  <pre><code>var value = this.props.form[this.props.id]
  </code></pre>
  
  <p>Now, if form prop is undefined, the code in FormField component doesn't show any error, but when I use try/catch, it shows this:</p>
  
  <p><a href="https://i.stack.imgur.com/RcCgK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcCgK.png" alt="Error caught with try/catch"></a></p>
  
  <p>Probably I should use try/catch to debug the errors then fix and add checks, then remove try/catch for production?</p>