reactjs / reactjs/react.dev

Unexpected warning for error boundaries without getDerivedStateFromError

Aberta
#3,028 6 comentários 4 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

(Note: I dismissed the idea described here by now, but I still felt like reporting my findings.)

Steps to reproduce

I create a reusable error boundary component, ErrorCatcher, in order to deduplicate across different error boundary components.

class ErrorCatcher extends React.Component {
  componentDidCatch(error, info) {
    this.props.onError(error);
  }

  render() {
    return this.props.children;
  }
}

I then create new error boundary on top of that. For example:

function ErrorBoundary({children}) {
  const [error, setError] = useState(null)

  if (error) {
    return <ErrorMessage error={error} />
  }

  return (
    <ErrorCatcher
      onError={error => setError(error)}}
    >
      {children}
    </ErrorCatcher>
  )
}

For convenience, check out this Codesandbox for a live example.

Actual Behavior

Testing it out, I notice that React prints the following warning to the console:

Warning: ErrorCatcher: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

Expected Behavior

Checking the documentation, I find the following (emphasis mine):

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [...]

That leaves me a bit puzzled, since on the one hand the documentation is offering me to define either, and on the other I get a warning. I want the documentation to be explicit about eventual error and warning messages.

If you see some value in enabling users to create ErrorCatcher, without being bugged by the warning, I could see other solutions: get rid of the message, or make it optional.

Kindest regards 🙃

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

A issue menciona a documentação de error-boundary e uma reprodução no Codesandbox, mas não menciona arquivos do repositório nem testes. Comece verificando a relação documentada entre componentDidCatch, getDerivedStateFromError e o aviso contra a reprodução; está concluído quando a documentação corresponder explicitamente ao comportamento observado.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
react
Domínio
documentation
Tipo de issue
Documentação
Dificuldade
2/5
Tempo estimado
1-3 horas
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
28/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.