Unexpected warning for error boundaries without getDerivedStateFromError
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
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- 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