1  import { Component } from "react";
 2  import { Box, Button, Typography } from "@mui/material";
 3  
 4  export default class ErrorBoundary extends Component {
 5    constructor(props) {
 6      super(props);
 7      this.state = { hasError: false };
 8    }
 9  
10    static getDerivedStateFromError() {
11      return { hasError: true };
12    }
13  
14    componentDidCatch(error, errorInfo) {
15      console.error("ErrorBoundary caught:", error, errorInfo);
16    }
17  
18    render() {
19      if (this.state.hasError) {
20        return (
21          <Box
22            display="flex"
23            flexDirection="column"
24            alignItems="center"
25            justifyContent="center"
26            minHeight="100vh"
27          >
28            <Typography variant="h5" gutterBottom>
29              Something went wrong.
30            </Typography>
31            <Button
32              variant="contained"
33              onClick={() => window.location.reload()}
34            >
35              Refresh
36            </Button>
37          </Box>
38        );
39      }
40      return this.props.children;
41    }
42  }