All files / src/components/ui error-boundary.tsx

100% Statements 9/9
100% Branches 4/4
100% Functions 4/4
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 39 40 41 42 43                            32x 32x       7x       57x 6x 4x               1x           51x      
import { Component, type ReactNode } from "react";
import { Button } from "./button";
 
interface Props {
	children: ReactNode;
	fallback?: ReactNode;
}
 
interface State {
	hasError: boolean;
}
 
export class ErrorBoundary extends Component<Props, State> {
	constructor(props: Props) {
		super(props);
		this.state = { hasError: false };
	}
 
	static getDerivedStateFromError(): State {
		return { hasError: true };
	}
 
	render() {
		if (this.state.hasError) {
			if (this.props.fallback) return this.props.fallback;
			return (
				<div className="flex flex-col items-center justify-center min-h-[400px] gap-4 p-8">
					<h2 className="text-lg font-semibold text-foreground-default">
						Something went wrong
					</h2>
					<p className="text-sm text-foreground-subtle text-center max-w-md">
						An unexpected error occurred. Please try refreshing the page.
					</p>
					<Button onClick={() => window.location.reload()}>
						Refresh Page
					</Button>
				</div>
			);
		}
		return this.props.children;
	}
}