javascript / intermediate
Snippet
Erweitern nativer Fehlerklassen für kategorisierte UI-Fallback-Behandlung
Das Erweitern der integrierten JavaScript-Klasse Error ermöglicht das Hinzufügen strukturierter Eigenschaften wie Wiederholungs-Flags und Domänen-Metadaten. React-Komponenten können die Fehlerinstanz mittels instanceof prüfen und maßgeschneiderte UI-Fallbacks rendern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { useState } from 'react';class OperationalTimeoutError extends Error {constructor(serviceName, attempts) {super(`Operation on ${serviceName} timed out after ${attempts} attempts.`);this.name = 'OperationalTimeoutError';this.serviceName = serviceName;this.attempts = attempts;this.canRetry = true;}}export function HealthMonitor() {const [fault, setFault] = useState(null);const simulateTimeout = () => {const failure = new OperationalTimeoutError('BillingGateway', 3);setFault(failure);};return (<div><button onClick={simulateTimeout}>Trigger Failure</button>{fault instanceof OperationalTimeoutError && (<div role="alert"><p>{fault.message}</p>{fault.canRetry && <button onClick={simulateTimeout}>Retry Service</button>}</div>)}</div>);}
react
Erklärung
1
class OperationalTimeoutError extends Error {
Definiert einen domänenspezifischen Fehlertyp, der vom Standard-Error-Objekt erbt.
2
this.canRetry = true;
Hängt kontextuelle Metadaten an die Fehlerinstanz an, um Wiederherstellungs-Flows in der UI zu steuern.
3
{fault instanceof OperationalTimeoutError && (
Verwendet eine instanceof-Typprüfung im Render-Block, um spezifische UI-Bedienelemente anzuzeigen.