Обработка ошибок: ErrorBoundary

Если в компоненте возникает ошибка — например, сервер не ответил, — без защиты ломается вся страница. Граница ошибок (ErrorBoundary) перехватывает ошибки внутри себя и вместо сломанной части показывает запасной интерфейс, а остальная страница продолжает работать.

ErrorBoundary

// src/App.jsx
import { ErrorBoundary } from 'solid-js';
import PostList from './components/PostList';
 
export default function App() {
  return (
    <main>
      <h1>Блог</h1>
      <ErrorBoundary fallback={<p>Не удалось загрузить статьи.</p>}>
        <PostList />
      </ErrorBoundary>
    </main>
  );
}

Если PostList выбросит ошибку, вместо списка появится «Не удалось загрузить статьи.», а заголовок «Блог» останется на месте.

Ошибка загрузки

fetch не считает ответ 404 или 500 ошибкой, поэтому статус проверяют вручную и выбрасывают исключение:

// src/components/PostList.jsx
import { createResource, For } from 'solid-js';
 
const fetchPosts = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/postss');
  if (!res.ok) throw new Error(`Ошибка сервера: ${res.status}`);
  return res.json();
};
 
export default function PostList() {
  const [posts] = createResource(fetchPosts);
 
  return (
    <ul>
      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
    </ul>
  );
}

В адресе намеренная опечатка postss, поэтому сервер вернёт 404. Ресурс перейдёт в состояние ошибки, и при чтении posts() она передастся ближайшему ErrorBoundary.

Сообщение и повтор

В fallback можно передать функцию. Она получает ошибку и функцию reset, которая заново отрисовывает содержимое границы:

// src/App.jsx
import { ErrorBoundary } from 'solid-js';
import PostList from './components/PostList';
 
export default function App() {
  return (
    <ErrorBoundary
      fallback={(err, reset) => (
        <div>
          <p>{err.message}</p>
          <button onClick={reset}>Попробовать снова</button>
        </div>
      )}
    >
      <PostList />
    </ErrorBoundary>
  );
}

На странице появится «Ошибка сервера: 404» и кнопка. После исправления адреса в fetchPosts нажатие на кнопку снова отрисует PostList.

Вместе с Suspense

Обычно их ставят вместе: снаружи ErrorBoundary, внутри Suspense, ещё глубже — компонент с данными.

Что не перехватывается

ErrorBoundary ловит ошибки при отрисовке, в эффектах и в ресурсах. Ошибки в обработчиках событий, например в onClick, до него не доходят — их обрабатывают обычным try...catch внутри обработчика.

Частая ошибка

Оборачивать в одну ErrorBoundary всё приложение целиком. Тогда ошибка в маленьком виджете комментариев заменит сообщением всю страницу. Ставьте границы вокруг независимых частей: списка статей, комментариев, боковой панели.