import type { ErrorInfo, FunctionComponent } from "react"; import { Component } from "react"; import Head from "next/head"; import type { WithRouterProps } from "next/dist/client/with-router"; import { withRouter } from "next/router"; import appLogger from "../../../lib/logger"; import Footer from "./footer"; type Props = { title: string; pageTitle?: string; }; const logger = appLogger.child({ module: "Layout" }); const Layout: FunctionComponent = ({ children, title, pageTitle = title, }) => { return ( <> {pageTitle ? ( {pageTitle} ) : null}
{children}
); }; type ErrorBoundaryState = | { isError: false; } | { isError: true; errorMessage: string; }; const ErrorBoundary = withRouter( class ErrorBoundary extends Component { public readonly state = { isError: false, } as const; static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { isError: true, errorMessage: error.message, }; } public componentDidCatch(error: Error, errorInfo: ErrorInfo) { logger.error(error, errorInfo.componentStack); } public render() { if (this.state.isError) { return ( <>

Oops, something went wrong.

Would you like to{" "} {" "} ?

); } return this.props.children; } }, ); export default Layout;