React-Router clientseitige Fehlerbehandlung nach serverseitigem Rendern

Question

Ich benutze serverseitiges Rendering für meine React-App, kann aber meinen Kopf nicht um die Logik wickeln, um Fehlerseiten anzuzeigen, wenn etwas schief geht.

Zum Beispiel:

• Benutzer fordert /article/123
• etwas schief geht, während der Gegenstand holen
• Ich mag würde eine 500 Fehlerseite

Die serverseitige Teil war leicht zeigen, . Ich sage React-Router, dass ich meine Fehlerkomponente bedienen soll. So weit, ist es gut.

Aber wenn die Seite bedient wird, wird das clientseitige Javascript ausgeführt und übernimmt das Rendern. Reagieren-Router finden Sie in die URL /article/123 und lädt die Komponente, die den Artikel zeigt (aber nicht, da die Daten nicht vorhanden sind ..)

Gibt es eine Möglichkeit, die Client-Seite zu informieren, dass wir die Fehler zeigen wollen Komponente stattdessen?

Der einzige Gedanke, an den ich denken könnte, ist folgender: Fügen Sie den Fehler zum globalen Redux-Status hinzu. Überprüfen Sie vor dem Rendern einer Komponente, ob der Fehler im globalen Status vorliegt, und zeigen Sie stattdessen die Fehlerkomponente an. Der Nachteil besteht jedoch darin, dass Sie diese Prüflogik in allen Komponenten implementieren müssen. Es sollte eine etwas elegantere Möglichkeit geben, dies zu beheben.

Answer 1

Es gibt ein paar verschiedene Möglichkeiten, clientseitige Fehlerbehandlung zu implementieren; Ich finde die Verwendung von Komponenten höherer Ordnung funktioniert am besten. Sie würden eine Wrapper-Komponente erstellen, die auf Fehler in der Serverantwort prüft. Wenn es einen findet, geben Sie die entsprechende Fehlerseite ein. Wenn der HOC keinen Fehler entdeckt, bedienen Sie die Komponente, die der Benutzer ursprünglich angefordert hat.

Ist hier eine große Erklärung, wie HOC umzusetzen: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e