Skip to content

Commit

Permalink
Blog post for error codes
Browse files Browse the repository at this point in the history
  • Loading branch information
keyz authored and zpao committed Jul 8, 2016
1 parent 1a0e3a3 commit ead9f7f
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 0 deletions.
3 changes: 3 additions & 0 deletions docs/_data/authors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ jingc:
josephsavona:
name: Joseph Savona
url: https://twitter.com/en_JS
keyanzhang:
name: Keyan Zhang
url: https://twitter.com/keyanzhang
kmeht:
name: Kunal Mehta
url: https://github.com/kmeht
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: "Introducing React's Error Code System"
author: keyanzhang
---

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 build-time and this is why you see the "Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." message in production.

In order to make debugging in production easier, we're introducing an Error Code System in 15.2.0. We developed a [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/dev-expression-with-codes.js) our `invariant` 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. While we hope you don't see errors often, you can see how it works [here](/react/docs/error-decoder.html?invariant=109&args[]=Foo). This feature shouldn't require any changes on your side — use the `min.js` files in production or bundle your application code with `process.env.NODE_ENV === 'production'` and you should be good to go!

0 comments on commit ead9f7f

Please sign in to comment.