Hook de ciclo de vida onErrorCaptured
Captura de erros de componentes filhos, retorno de false para interromper a propagação e objetos de erro.
Hook de ciclo de vida onErrorCaptured é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Capturando erros em componentes
O Vue fornece o gancho de ciclo de vida onErrorCaptured para capturar erros lançados por componentes descendentes. Ele permite que um componente pai intercepte falhas de sua subárvore.
A assinatura do gancho
onErrorCaptured recebe três argumentos: o erro, a instância do componente que o lançou e uma string info que descreve onde ele ocorreu.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});O argumento err
O primeiro argumento é o objeto de erro lançado — normalmente uma instância de Error com uma mensagem e uma pilha que você pode registrar ou exibir.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});O argumento instance
O segundo argumento é a instância do componente que gerou o erro, útil para depuração ou para adicionar contexto aos seus relatórios.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});O argumento info
O terceiro argumento é uma string que informa qual ciclo de vida ou operação acionou o erro — por exemplo, "função de renderização", "função setup" ou um gancho específico.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Somente erros de componentes descendentes
É importante observar que onErrorCaptured captura erros de componentes descendentes, não do próprio setup ou da própria renderização do componente. Coloque o gancho em um ancestral do código que você deseja proteger.
Interrompendo a propagação
Por padrão, um erro capturado continua propagando-se para os manipuladores ancestrais e para o manipulador global. Retorne false para impedir que ele avance.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Por que interromper a propagação
Retornar false mantém o erro contido localmente — isso é útil quando este componente trata completamente a falha (por exemplo, exibindo uma alternativa) e não deseja que o manipulador global também seja acionado.
Deixando o erro propagar
Se quiser que os manipuladores de nível superior (ou o global) também vejam o erro, não retorne false. Assim, o gancho registra o erro localmente e permite que ele continue subindo.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Um uso prático
Um uso comum é combinar o registro com um indicador de recuperação. Defina um indicador reativo para renderizar uma alternativa enquanto relata o erro para fins de diagnóstico.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Cuidados com operações assíncronas
onErrorCaptured captura erros na renderização, no ciclo de vida e nos manipuladores síncronos dos componentes descendentes. Alguns erros assíncronos (rejeições de promessas não capturadas) são tratados melhor no nível global — isso será abordado mais adiante.
Verificação rápida
O que retornar false de onErrorCaptured faz?
Recapitulação
Você aprendeu que onErrorCaptured((err, instance, info)) captura erros de componentes descendentes. A string info fornece o contexto do ciclo de vida, e retornar false interrompe a propagação para que o componente possa tratar a falha localmente.
Perguntas Frequentes
A aula “Hook de ciclo de vida onErrorCaptured” é grátis?
Sim — o texto completo de “Hook de ciclo de vida onErrorCaptured” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Hook de ciclo de vida onErrorCaptured”?
Captura de erros de componentes filhos, retorno de false para interromper a propagação e objetos de erro. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Hook de ciclo de vida onErrorCaptured”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Hook de ciclo de vida onErrorCaptured
- Componentes de limite de erro
- app.config.errorHandler para erros globais
- Tratamento de erros assíncronos em composables