Ich habe eine Reaction-Anwendung erstellt, die nicht live läuft, und die Leute, die sie benutzen, bemerken, dass gelegentlich ein merkwürdiger Fehler auftritt. Ich weiß nicht warum oder was passiert und kann es nicht reproduzieren.
Ich frage mich also, ob es eine Möglichkeit gibt, die gesamte App oder Teile davon in einen try / catch-Block zu packen, damit ich die Fehler an ein Fehlerprotokoll auf dem Server senden kann?
Alles, was ich bisher gelesen habe, ist, dass Sie die gesamte Render-Funktion in einen try / catch umwandeln könnten, aber das würde aufgrund der Benutzerinteraktion keine Fehler machen, richtig?
Sie können Reats BatchingStrategy-API verwenden, um einfach einen try/catch um Ihren gesamten React-Code zu wickeln. Der Vorteil von% window.onerror ist, dass Sie in allen Browsern eine nette Stapelüberwachung erhalten. Selbst moderne Browser wie Microsoft Edge und Safari bieten keine Stack-Traces für window.onerror .
So sieht es mit React 15.4 aus:
%Vor%Vollständige Beschreibung hier: Ссылка
Ich hatte das gleiche Problem. Ich habe eine Office-App erstellt, in der ich weder eine Debug-Konsole noch Entwickler-Tools hatte, sodass ich nicht herausfinden konnte, wo Fehler aufgetreten sind.
Ich habe eine einzelne Komponente (eine es6-Klasse) erstellt, die alle console -Meldungen abgefangen, die Nachricht in einem separaten Array gespeichert und die "echte" Funktion console aufgerufen hat.
Dabei ist Log ein einfacher Wrapper mit einem message und einem type und this._target ist ein Verweis auf window.console . Also habe ich das gleiche mit info , warn und error gemacht.
Zusätzlich habe ich eine Methode handleThrownErrors(message, url, lineNumber) erstellt, um Ausnahmen zu fangen.
Zumindest habe ich eine Instanz der Klasse erstellt (ich habe sie LogCollector genannt) und sie an das Fenster angehängt.
Jetzt habe ich eine reactive-Komponente erstellt, die die logCollector-Instanz ( window.logCollector ) als Eigenschaft erhält. In regelmäßigen Abständen prüft die reagierende Komponente die gesammelten Nachrichten und zeigt sie auf dem Bildschirm an.
this.setInterval() ist eine eigene Funktion, die einfach window.setInterval() aufruft.
Und in render() Methode:
HINWEIS : Es ist wichtig, dass
LogCollectorvor alle anderen Dateien eingefügt wird.HINWEIS : Die obige Lösung als sehr vereinfachte Version. Zum Beispiel: Sie können es verbessern, indem Sie benutzerdefinierte (Nachrichten-) Listener hinzufügen oder
404 Not found-Fehler (für js-Skripte und CSS-Dateien) abfangen.