Проблема с перехватом исключений из асинхронного кода в ReactJs

Question

У меня есть следующий код внутри приложения реакции (файл верхнего уровня - просто чтобы показать проблему, я знаю, что это не то место, где можно делать вызовы API и получать данные):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

async function run() {
    try {
        return await fetch("https://somenonexistingplace.com"); 
    } catch (e) {
        console.error(e);
    } 
}

run();

ReactDOM.render(<App />, document.getElementById('root'));

Когда я запускаю этот код, catch, очевидно, кэширует исключение, но говорит, что e не определено, поэтому я не могу получить доступ к сообщению об ошибке, которое обычно находится в e. Смотрите скриншот из сеанса отладки

Когда я запускаю такой код вне приложения React в виде простого сценария, прикрепленного к html, все работает нормально , и e является объектом с правильным сообщением об ошибке.

Единственное отличие состоит в том, что первый пример находится в приложении React, а второй - вне React.

Итак, мои вопросы: что здесь происходит и как это исправить?

РЕДАКТИРОВАТЬ: Я знаю, что могу заменить его обещаниями и .catch (...), но это не главное - меня интересует, почему try / catch не работает здесь, как ожидалось.

Answer 1

Я бы порекомендовал изменить синтаксис с try / catch на fetch (). Catch ()

return await fetch("https://somenonexistingplace.com").catch(e => console.error(e))

Answer 2

try / catch отлично, но работает только для императивного кода.

Из документов ,

Границы ошибок сохраняют декларативныйРеагируйте на природу и ведите себя так, как вы ожидаете.Например, даже если в методе componentDidUpdate возникает ошибка, вызванная setState где-то глубоко в дереве, он все равно будет правильно распространяться до ближайшей границы ошибки.

Просто пример,

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Использование,

<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

Answer 3

Это работает для меня в узле при использовании axios для получения ответа от URL:

const axios = require("axios");

async function run() {
    try {
        return await axios.get("https://somenonexistingplace.com"); 
    } catch (e) {
        console.error(e);
    } 
}

Возникла та же проблема, когда await не работал должным образом при использовании модуля https.

Answer 4

попробуйте это ->

URL='http://<--some wrong url -->'

async function run() {
        const resp= await fetch(URL);
        console.log(resp)

}

Если появляется какая-либо ошибка, она должна появиться сама по себе.