Crashanalytics para minha spa ReacJS, o que indicam?

[wilsongomes-swe]

Galera,

aqui na empresa nosso backend é em C#/Asp.Net Core/Azure, e consequentemente temos o aplication insights da Azure monitorando e nos fornecendo relatórios completos sobre bugs, warnings e exceptions não tratadas, entre vários outros dados...

Em nosso app mobile usamos o firebase crashanalytics para monitorar erros e exceptions...

E no reactjs, como vocês fazem esse crashanalitycs / monitoramente de erros?

Gostaria de opiniões,
abraços!

[eliseumds]

Quick and dirty... eu fiz monkey-patch do console.error que envia um report pro Bugsnag (equivalente ao Crashlytics). Uma forma mais elegante e NodeJS-friendly seria injetar uma instância do Crashlytics no contexto, criar uma camada de abstração por cima pq se vc alterar a ferramenta, a API continua a mesma, e depois, nos componentes:

function MyComponent() {
  const { logger } = useContext(LoggingContext);
  
  useEffect(() => {
    if (abc > 100) {
      logger.error('Ops, deu bosta');
    }
  }, [abc]);

  return <div>Oi</div>;
}

Muito importante é deixar "breadcrumbs" à medida que o usuário vai interagindo com o app pra gerar contexto e tornar sua vida mais fácil ao debugar:

function handleSuccessfulLogin(user) {
  logger.leaveBreadcrumb({
    message: 'User logged in'
    data: { ... }
  });
  logger.setUser(user);
}

Outra coisa importante é configurar source maps corretamente para que o Crashlytics os possa ler e mostrar o source code original na dashboard.