{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2016/07/11/introducing-reacts-error-code-system.html","result":{"data":{"markdownRemark":{"html":"<p>Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.</p>\n<p>Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:</p>\n<blockquote>\n<p>Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.</p>\n</blockquote>\n<p>In order to make debugging in production easier, we’re introducing an Error Code System in <a href=\"https://github.com/facebook/react/releases/tag/v15.2.0\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">15.2.0</a>. We developed a <a href=\"https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">gulp script</a> that collects all of our <code class=\"gatsby-code-text\">invariant</code> error messages and folds them to a <a href=\"https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JSON file</a>, and at build-time Babel uses the JSON to <a href=\"https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">rewrite</a> our <code class=\"gatsby-code-text\">invariant</code> calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.</p>\n<p>While we hope you don’t see errors often, you can see how it works <a href=\"/docs/error-decoder.html?invariant=109&#x26;args%5B%5D=Foo\">here</a>. This is what the same error from above will look like:</p>\n<blockquote>\n<p>Minified React error #109; visit <a href=\"/docs/error-decoder.html?invariant=109&#x26;args%5B%5D=Foo\">https://reactjs.org/docs/error-decoder.html?invariant=109&#x26;args[]=Foo</a> for the full message or use the non-minified dev environment for full errors and additional helpful warnings.</p>\n</blockquote>\n<p>We do this so that the developer experience is as good as possible, while also keeping the production bundle size as small as possible. This feature shouldn’t require any changes on your side — use the <code class=\"gatsby-code-text\">min.js</code> files in production or bundle your application code with <code class=\"gatsby-code-text\">process.env.NODE_ENV === &#39;production&#39;</code> and you should be good to go!</p>","excerpt":"Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire. Prior to this release, we stripped out error messages at…","frontmatter":{"title":"Introducing React's Error Code System","next":null,"prev":null,"author":[{"frontmatter":{"name":"Keyan Zhang","url":"https://twitter.com/keyanzhang"}}]},"fields":{"date":"July 11, 2016","path":"content/blog/2016-07-11-introducing-reacts-error-code-system.md","slug":"/blog/2016/07/11/introducing-reacts-error-code-system.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2016/07/11/introducing-reacts-error-code-system.html"}},"staticQueryHashes":[]}