title: How to make Create React App Production Error Boundary map to source code
body: <p>I am using an error boundary component to catch react errors and it works fine. </p>
  
  <p>My problem is that in the production app the logging is kind of useless since the component stack looks like this:</p>
  
  <pre><code>\n    in t\n    in t\n   in t\n    in t\n    in t\n    in div\n    in t\n    in u\n    in n\n    in t\n    in t
  </code></pre>
  
  <p>While in development environment the component stack is way more usable:</p>
  
  <pre><code>in ErrorPage (created by Route)\n    in Route (at Routes.js:60)\n    in Switch (at Routes.js:46)\n    in Router (created by BrowserRouter)\n    in BrowserRouter (at Routes.js:45)\n    in div (at Routes.js:43)\n    in ThemeProvider (at theme.js:1262)\n    in Theme (at Routes.js:42)\n    in Provider (at Routes.js:41)\n    in ErrorBoundary (at Routes.js:40)\n    in Routes (at index.js:12)
  </code></pre>
  
  <p>The same happens with the message. In production we get:</p>
  
  <pre><code>t.value (http://localhost:3333/static/js/main.5a3e606e.js:1:680858
  </code></pre>
  
  <p>While in dev:</p>
  
  <pre><code>Uncaught TypeError: Person is not a constructor
  at ErrorPage._this.click2 (ErrorPage.js:12)
  </code></pre>
  
  <p>Is there a way to make react errors map to the source code and <strong>make the logging actually usable in production?</strong></p>
  
  <p>UPDATE:
  I am using a library called <a href="http://js.jsnlog.com/" rel="noreferrer">http://js.jsnlog.com/</a> that handles the logs and actually catches everything (Even event handlers). This is how the Boundary component looks like <a href="https://pastebin.com/aBFtD7DB" rel="noreferrer">https://pastebin.com/aBFtD7DB</a>. The problem is not catching the errors, but that in production they are useless.</p>