Пользовательская страница серверной ошибки и getInitialProps в Next.js
В next.js-проекте при возникновении серверной ошибки страница 500.tsx отображается на несколько секунд, а затем появляется надпись Application error: a client-side exception has occurred (see the browser console for more information). При этом если убрать getInitialProps у компонента _app.tsx, то страница 500.tsx срабатывает нормально. Как сделать так, чтобы страница 500.tsx работала правильно вместе с getInitialProps?
_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import ErrorBoundary from '../components/error-boundary';
function MyApp({ Component, pageProps }: AppProps) {
const { lang } = pageProps;
return (
<ErrorBoundary>
<div>{lang}</div>
<Component {...pageProps} />
</ErrorBoundary>
);
}
MyApp.getInitialProps = async () => {
return {
pageProps: {
lang: 'en',
},
};
};
export default MyApp;
index.tsx
import type { GetServerSideProps, NextPage } from 'next';
const Home: NextPage = () => {
return (
<div>
<h1>Home</h1>
</div>
);
};
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
res.statusCode = 500;
throw new Error('Server error');
};
export default Home;
components/error-boundary.tsx
import { Component, ErrorInfo, ReactNode } from 'react';
interface Props {
children?: ReactNode;
}
interface State {
hasError: boolean;
}
class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
};
public static getDerivedStateFromError(_: Error): State {
return { hasError: true };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('Uncaught error:', error, errorInfo);
}
public render() {
if (this.state.hasError) {
return <h1>Sorry.. there was an error</h1>;
}
return this.props.children;
}
}
export default ErrorBoundary;
package.json
{
"name": "error",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "18.0.5",
"@types/react": "18.0.15",
"@types/react-dom": "18.0.6",
"eslint": "8.19.0",
"eslint-config-next": "12.2.2",
"typescript": "4.7.4"
}
}