Adendo: Não sabe bem o que é PWA? Leia o resumo.

Colocou a App em produção? Vamos conversar.

Você não conseguirá impedir erros em produção e principalmente lidar com isso na interação com o usuário mesmo que sua aplicação tenha uma cobertura de 100% com testes unitários, um bom ratio pra cada linha de código e testes de aceitação/integração.

Você está errado em todas as metodologias se não testa de forma automatizada.

Reagindo a erros não esperados

A versão 16 do React trouxe um método excelente no ciclo de vida dos componentes, o componentDidCatch, que captura todas as exceções lançadas pelos nós abaixo na árvore do componente que manipula esse método.

Em outras palavras, todo erro que acontecer abaixo de ErrorBoundary (ver código seguinte) será capturado num único ponto sem a necessidade de espalhar try/catch pelo código de apresentação.

De qualquer forma, todas as transformações de estado devem ser concentradas no redux como o código a seguir.

https://gist.github.com/cmilfont/e4fa20e1ced19a36fcdf948916184ade

Independente de como mostrar a UI para o usuário ao acontecer um erro, essa informação virá exclusivamente de um ponto que é administrado por transações das sagas.

Estado Centralizado

Temos vários vantagens em centralizar a manipulação de erros no redux, a principal é que podemos concentrar o monitoramento em um único lugar com os dados trackeados pelo sua ferramenta, seja Airbreak, Logentries ou Sentry.

https://gist.github.com/cmilfont/a0009b8e0af3e4ce0eb1e23439324314

Qual a diferença entre colocar um window.onError?

Facilitar coordenar tipos de erros junto ao estado da aplicação, além de indicar um único ponto de manutenção porque esses tipos precisam de transformações e Tracking.

Track dos erros

Dado a centralização dos erros, agora partir para logar direto no seu serviço que provavelmente tem dezenas de métodos de notificações e habilitar a integração com seu Issue Tracking.

Offline

O ecossistema Redux também agrega a vantagem de facilitar a persistência dos erros para tracking e análise futura ou evitar a submissão constante de notificações aproveitando para enviar em Batch num tempo determinado.

Em alguns casos extremos, principalmente em integração, você pode exportar o store na window para disparar um error que extrapola a aplicação com window.onError = error=> (window.store.dispatch({ type: ‘GLOBAL_ERROR’, payload: error }));

Espero que essas dicas agreguem valor a sua App, porque é praticamente impossível evitar erros, é sempre melhor estar preparado pra agir quando eles surgem.

Comenta sobre algo que acontece(u) na sua App que essas dicas ainda não cobrem para eu melhorar o artigo.