when-am-i / files / src / components / ErrorBoundary.tsx

ErrorBoundary.tsx

Blame: the commit that last changed each line · file · history

`e6fe2bc7` 2026-06-17 Pavel Safronov	1	import React from 'react';
	2	import { reportMailtoHref } from '../utils/report';
	3
	4	interface Props {
	5	children: React.ReactNode;
	6	}
	7
	8	interface State {
	9	error: Error \| null;
	10	}
	11
	12	// Catches render-time errors anywhere below it and shows a recoverable fallback
	13	// with a prefilled error report link (async errors are caught by the global
	14	// handlers in report.ts instead).
	15	class ErrorBoundary extends React.Component<Props, State> {
	16	state: State = { error: null };
	17
	18	static getDerivedStateFromError(error: Error): State {
	19	return { error };
	20	}
	21
	22	componentDidCatch(error: Error, info: React.ErrorInfo): void {
`6b2790fa` 2026-06-20 Pavel Safronov	23	console.error('[when-am-i] render error:', error, info);
`e6fe2bc7` 2026-06-17 Pavel Safronov	24	}
	25
	26	render(): React.ReactNode {
	27	const { error } = this.state;
	28	if (!error) return this.props.children;
	29
	30	return (
	31	<div
	32	role="alert"
	33	style={{ padding: 24, maxWidth: 640, margin: '40px auto', fontFamily: 'sans-serif' }}
	34	>
	35	<h2>Something went wrong</h2>
	36	<p>Sorry — the app hit an unexpected error. You can help by sending a report.</p>
	37	<p style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
	38	<a href={reportMailtoHref(error)}>Send an error report</a>
	39	<button type="button" onClick={() => window.location.reload()}>
	40	Reload
	41	</button>
	42	</p>
	43	</div>
	44	);
	45	}
	46	}
	47
	48	export { ErrorBoundary };