Error Boundaries for Server Side Rendering (SSR)

Demonstrate setting up an error boundary in Next.js to catch and handle errors that occur during server-side rendering.
import React from 'react';

export class ErrorBoundary extends React.Component {
  constructor(props) {
    this.state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    logErrorToService(error, errorInfo);

  render() {
    if (this.state.hasError) {
      // Render any custom fallback UI
      return <h1>Something went wrong.</h1>;

    return this.props.children;
This is a React Error Boundary component, which is designed to catch JavaScript errors anywhere in the child component tree and log them, then display a fallback UI instead of the component tree that crashed. Replace `logErrorToService` with the actual error logging function.
import { ErrorBoundary } from './ErrorBoundary'; // Import the ErrorBoundary component
import App from './App';

// Wrap the root component in the ErrorBoundary
const RootComponent = () => (
    <App />

export default RootComponent;
This code shows how to use the ErrorBoundary component by wrapping the root component of the application. Replace `App` with the actual root component of your Next.js project.
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    try {
      const initialProps = await Document.getInitialProps(ctx);
      return { ...initialProps };
    } catch (error) {
      // Handle the error, possibly logging it as well
      // Return an error state to render an error page or partial content
      return { hasError: true, error }; 

  render() {
    return (
        <Head />
          {this.props.hasError ? (
            /* Replace with actual error component or UI message */
            <div>Error occurred while rendering</div>
          ) : (
            <Main />
          <NextScript />

export default MyDocument;
In a Next.js custom Document, the `getInitialProps` method is used to catch errors during server-side rendering and log them or return an error state. The `hasError` flag can be used to conditionally render an error page or UI message.