Skip to content

Translation 2016-07-11-introducing-reacts-error-code-system #427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions content/blog/2016-07-11-introducing-reacts-error-code-system.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
title: "Introducing React's Error Code System"
title: "Apresentando o Sistema de Código de Erro do React"
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.
Construir uma melhor experiência para o desenvolvedor tem sido uma das coisas com as quais o React se preocupa profundamente, e uma parte crucial é detectar possíveis erros antipadrões em potencial e fornecer mensagens de erro úteis quando as coisas (podem) derem errado. No entanto, a maioria deles existem apenas no modo de desenvolvimento; na produção, evitamos ter afirmações extremamente custosas e enviar mensagens de erro completas para reduzir o número de bytes enviados pela conexão.

Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:
Antes desta versão, removemos as mensagens de erro no momento da construção e é por isso que você pode ter visto essa mensagem em produção:

> Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.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/replace-invariant-error-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.
Para facilitar o debug em produção, estamos introduzindo um Sistema de Código de Erro no [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). Nós desenvolvemos um [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) que coleta todas as nossas mensagens de erro `invariantes` e as põem em um [arquivo JSON](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), e em tempo de execução, o Babel usa o JSON para [reescrever](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) nossas chamadas `invariantes` em produção para referenciar os IDs de erro correspondentes. Agora, quando as coisas derem errado na produção, o erro que o React exibe contém um URL com um ID de erro e informações relevantes. O URL direcionará você para uma página em nossa documentação em que a mensagem de erro original é remontada.

While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
Embora esperemos que você não veja erros com frequência, você pode ver como isso funciona [aqui](/docs/error-decoder.html?invariant=109&args[]=Foo). É assim que será o mesmo erro que exibimos acima na introdução:

> Minified React error #109; visit [https://reactjs.org/docs/error-decoder.html?invariant=109&args[]=Foo](/docs/error-decoder.html?invariant=109&args[]=Foo) for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

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 `min.js` files in production or bundle your application code with `process.env.NODE_ENV === 'production'` and you should be good to go!
Fazemos isso para que a experiência do desenvolvedor seja a melhor possível, enquanto também mantém o tamanho do bundle de produção o menor possível. Esse recurso não deve exigir alterações do seu lado — use os arquivos `min.js` em produção ou agrupe o código do aplicativo com `process.env.NODE_ENV === 'production'` e você deve estar pronto!