Come gestisco le eccezioni?

Question

Angular ha un ottimo $exceptionHandler. C'è qualcosa di simile a react.js?

Vorrei registrare i miei errori su un'API esterna. Esempi:

• https://github.com/occ/TraceKit
• http://trackjs.com/
• https://plus.google.com/+PaulIrish/posts/12BVL5exFJn

Answer 1

Non c'è nessuna magia come in angolare. Se c'è un errore non catturato, si propaga verso gli ambiti fino a quando non colpisce la finestra, e quindi viene emesso un evento di errore - lo stesso comportamento di un errore senza reagire.

var App = React.createClass({ 
    render: function(){ 
    throw new Error("rawr!"); 
    return <div>Hello, world!</div> 
    } 
}); 

window.addEventListener('error', function(e){ 
    // e instanceof ErrorEvent 
    console.error('caught the error: ' + e.message); 
}); 

Se si guarda in supporto cross browser, si prega di aggiornare questa risposta o aggiungere un commento con le citazioni.

Invece di collegarlo alla console (che già avviene per impostazione predefinita), è possibile inviarlo ovunque si desideri.

A differenza di altri framework, un errore non rilevato è sempre un bug nel codice. Non dovrebbe mai accadere.

Potrebbe inoltre essere necessario eseguire una gestione speciale degli errori di promessa aggiungendo esplicitamente uno .catch(reportError) alla fine delle catene e controllando che si tratti di un errore TypeError o ReferenceError.

Answer 2

Mentre la risposta di @ FakeRainBrigand fornisce un ottimo punto di partenza per comprendere il meccanismo del meccanismo generale di segnalazione degli errori non rilevati in Javascript, ritengo che la maggior parte delle app ospiti i loro bundle JS utilizzando CDN in cui non è possibile catturare errori non rilevati con "meccanismo window.addEventListener ('error', fn)".

aggirare limitazioni crossorigin

Put crossorigin attributo al tag script in modo che si può godere la cattura di errori non rilevati con "window.addEventListener ('errore', fn)" meccanismo.

Nei casi in cui proprio non può andare in giro con le impostazioni CORS

Reagire 16: fornisce meccanismo di gestione degli errori integrata. Altre informazioni su Error Boundaries in React here

Reagire 15 o inferiore: L'unico modo per rilevare gli errori qui è tramite l'aggiunta di blocchi try-catch attorno a ogni rendering/componente. Fortunatamente abbiamo un modulo npm - react-guard che fa esattamente questo per noi, applicando le patch a React.