u

src/components/BackendError.jsx

@@ -0,0 +1,55 @@
+import { Component } from 'react';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { formatBackendError } from '../utils/backendError';
+
+class BackendError extends Component {
+  render() {
+    const { error, title, onRetry, sx, action } = this.props;
+    if (!error) return null;
+
+    const formatted = formatBackendError(error);
+    const heading = title || formatted.title;
+
+    return (
+      <Alert
+        severity="error"
+        sx={{ maxWidth: 720, ...sx }}
+        action={action}
+      >
+        <AlertTitle>{heading}</AlertTitle>
+        {formatted.detail ? (
+          <Typography variant="body2" component="div" sx={{ mb: formatted.request ? 1 : 0 }}>
+            {formatted.detail}
+          </Typography>
+        ) : null}
+        {formatted.request ? (
+          <Box
+            component="code"
+            sx={{
+              display: 'block',
+              fontSize: '0.75rem',
+              color: 'text.secondary',
+              fontFamily: 'monospace',
+            }}
+          >
+            {formatted.request}
+            {formatted.status != null ? ` → ${formatted.status}` : ''}
+          </Box>
+        ) : null}
+        {onRetry ? (
+          <Box sx={{ mt: 1.5 }}>
+            <Button size="small" variant="outlined" color="inherit" onClick={onRetry}>
+              Erneut versuchen
+            </Button>
+          </Box>
+        ) : null}
+      </Alert>
+    );
+  }
+}
+
+export default BackendError;