При создании веб-сайта с использованием Gatsby крайне важно обеспечить удобство работы с ним даже при возникновении ошибок. Одной из распространенных ошибок является внутренняя ошибка сервера (HTTP 500), которая возникает, когда что-то идет не так на стороне сервера. В этой статье мы рассмотрим различные способы настройки собственной страницы внутренних ошибок сервера в Gatsby, чтобы ваши пользователи были информированы и вовлечены даже в случае возникновения ошибок.

Метод 1: использование gatsby-plugin-netlify
Gatsby-plugin-netlify — это мощный плагин, который упрощает развертывание сайтов Gatsby в Netlify. Он также обеспечивает простой способ настройки пользовательских страниц ошибок. Вот как вы можете использовать этот плагин для обработки внутренних ошибок сервера:

Шаг 1. Установите плагин:

npm install gatsby-plugin-netlify

Шаг 2. Настройте плагин:
В файле Gatsby gatsby-config.jsдобавьте следующую конфигурацию:

module.exports = {
  // ...
  plugins: [
    // ...
    'gatsby-plugin-netlify',
  ],
};

Шаг 3. Создайте собственный файл 500.html:
В корневом каталоге вашего проекта Gatsby создайте новый файл с именем public/500.html. Этот файл будет служить вашей пользовательской страницей внутренних ошибок сервера. Настройте его в соответствии с дизайном вашего сайта и сообщением об ошибке.

Метод 2: использование прокси-сервера
Другой подход к обработке внутренних ошибок сервера в Gatsby — настройка прокси-сервера. Этот метод позволяет перехватить ответ об ошибке от сервера и отобразить специальную страницу с ошибкой.

Шаг 1. Настройте прокси-сервер:
Создайте файл, например, proxy.js, и установите необходимые зависимости:

npm install express http-proxy-middleware

В proxy.jsнастройте прокси-сервер для перехвата внутренних ошибок сервера и отображения пользовательской страницы ошибок:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use(
  '/',
  createProxyMiddleware({
    target: 'http://your-backend-server',
    onError: (err, req, res) => {
      // Handle Internal Server Error
      res.sendFile('/path/to/custom/500.html');
    },
  })
);
app.listen(3000, () => {
  console.log('Proxy server listening on port 3000');
});

Шаг 2. Обновите package.json Gatsby:
В package.jsonвашего проекта Gatsby добавьте следующую строку в раздел «scripts»:

"start": "node proxy.js && gatsby develop"

Теперь, когда вы запустите npm start, Gatsby запустится вместе с прокси-сервером.

Метод 3: использование компонента границ ошибок
Gatsby поддерживает границы ошибок React, которые можно использовать для обнаружения и обработки ошибок. Вы можете создать компонент Error Boundary для корректной обработки внутренних ошибок сервера.

Шаг 1. Создайте компонент «Граница ошибок».
В проекте Gatsby создайте новый файл, например, ErrorBoundary.js, и определите компонент «Граница ошибок»:

import React from 'react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // Log the error, if needed
  }
  render() {
    if (this.state.hasError) {
      // Render your custom error page here
      return <h1>Internal Server Error</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

Шаг 2. Оберните свои компоненты компонентом Error Boundary:
В проекте Gatsby оберните компоненты приложения компонентом Error Boundary:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
const App = () => {
  return (
    <ErrorBoundary>
      {/* Your application components */}
    </ErrorBoundary>
  );
};
export default App;

Применив один из этих методов, вы можете улучшить взаимодействие с пользователем на своем веб-сайте Gatsby, предоставив специальную страницу внутренних ошибок сервера. Независимо от того, решите ли вы использовать gatsby-plugin-netlify, настроить прокси-сервер или использовать компонент Error Boundary, у вас есть возможность создать привлекательную страницу ошибок, которая будет соответствовать дизайну вашего веб-сайта. Не забудьте тщательно протестировать, чтобы убедиться, что страница ошибок работает должным образом. Приятного кодирования!