javascript / intermediate
Snippet
Behandlung von Netzwerkfehlern in React-Handlern mit benutzerdefinierten Error-Klassen
Benutzerdefinierte Fehlerklassen, die das native Error-Objekt erweitern, ermöglichen es React-Komponenten, Laufzeitfehler präzise zu kategorisieren. Durch die Überprüfung mit dem `instanceof`-Operator im catch-Block können gezielte UI-Zustände gesetzt und spezifische Fehlermeldungen dargestellt werden.
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
33
34
35
36
37
38
class ApiTimeoutError extends Error {constructor(message = 'Request timed out') {super(message);this.name = 'ApiTimeoutError';}}function UserProfileViewer({ userId }) {const [userData, setUserData] = React.useState(null);const [errorType, setErrorType] = React.useState(null);const handleFetchProfile = async () => {setErrorType(null);try {const response = await fetch(`/api/users/${userId}`);if (!response.ok) {throw new ApiTimeoutError('Failed to retrieve user profile.');}const data = await response.json();setUserData(data);} catch (err) {if (err instanceof ApiTimeoutError) {setErrorType('timeout');} else {setErrorType('generic');}}};return (<div><button onClick={handleFetchProfile}>Load Profile</button>{errorType === 'timeout' && <p role="alert">Timeout: Server took too long.</p>}{errorType === 'generic' && <p role="alert">Unexpected network error occurred.</p>}{userData && <div>Welcome, {userData.name}</div>}</div>);}
react
Erklärung
1
class ApiTimeoutError extends Error {
Definiert eine eigene Fehlerklasse, die das Standardverhalten und den Stack-Trace von Error erbt.
2
if (err instanceof ApiTimeoutError) {
Unterscheidet spezifische Schnittstellenfehler von unerwarteten JavaScript-Laufzeitfehlern.
3
{errorType === 'timeout' && <p role="alert">Timeout: Server took too long.</p>}
Rendert bedingt eine barrierefreie Hinweismeldung passend zum ermittelten Fehlertyp.