Как отображать ошибку на странице React

Question

Как отображать ошибку на странице React

Рейтинг: 0Ответов: 2Опубликовано: 18.07.2025

Как сделать так, что бы заместо ошибки в виде текста 'произошла ошибка!' у нас брались реальные данные ошибки через catch и отображались на странцие. Как в console.error

import { useEffect, useState } from 'react';
import style from './Statistic.module.css';

function Statistic() {
  const [status, setStatus] = useState('');
  const [error, setError] = useState(false);
  useEffect(() => {
      fetch('https://burtovoy.github.io/statistic.json')
        .then((response) => {
        if (!response.ok) {
          throw new Error(`Network response was not ok ${response.statusText}`);
        }
        return response.json();
      })
      .then((data) => {
        console.log(data.statistic)
        setStatus(data.statistic);
      })
      .catch((error) => {
        console.error('Fetch', error);
        setError(true);
      })
  }, [])

  return (
    <>
      {error == false && <section>
            <div className={style.users}>
              <div className="users_block">
            <div className="users_num">
              <p className="number" id="usersRegister">{status.usersRegistr}</p>
              <div className="users_text">
                <p>Пользователей<br />зарегестрировано</p>
              </div>
            </div>
          </div>
          <div className="users_block">
            <div className="users_num">
              <p className="number" id="writeMessages">{status.writMessages}</p>
              <div className="users_text">
                <p>Сообщений<br />написано</p>
              </div>
            </div>
          </div>
          <div className="users_block">
            <div className="users_num">
              <p className="number" id="writeToday">{status.writToday}</p>
              <div className="users_text">
                <p>Написано<br />сегодня</p>
              </div>
            </div>
          </div>
            </div>
        </section>}
        {error && <section>
          <p>Произошла ошибка!</p>
        </section>}

    </>
  );
}

export default Statistic;

reactjs react-hook

Источник: Stack Overflow на русском

Answer 1

▲ 1

Ну сделайте ещё одну переменную с текстом ошибки. Я JS и React поверхностно знаю, но что-то такое должно быть:

const [error, setError] = useState(false);
const [errorText, setErrorText] = useState('');
// ...
      .catch((error) => {
        console.error('Fetch', error);
        setError(true);
        setErrorText(error);
      })
// ...
        {error && <section>
          <p>Произошла ошибка! {errorText}</p>
        </section>}

Answer 2

▲ 1

Как сделать так, что бы заместо ошибки в виде текста 'произошла ошибка!' у нас брались реальные данные ошибки через catch и отображались на странцие. Как в console.error

Ну если как в console.error - тогда можно так. В примере сознательно "генерится" не верный УРЛ, для демонстрации ошибки.

//
const Error = ({err}) => {
  return <p>{err.toString()}</p>
}
//
const Info = props => {
  return <p>Ошибок нет</p>
}
//
const App = props => {
  const [err, setErr] = React.useState(null)
  const act = _ => {
    const url = ok() ? 'https://burtovoy.github.io/statistic.json' : 'https://burtovoy.github.io/no_file.json'
    console.log(url)
    fetch(url)
      .then(r => r.json())
      .then(_ => setErr(null))
      .catch(err => setErr(err))
  }
  return <main>
    <button onClick={act}>Тест</button>
    {err ? <Error err={err} /> : <Info />}
  </main>
}
//
function ok(){
  const v = Math.round(Math.random() * 100)
  return v < 50
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

Как отображать ошибку на странице React

Ответы