app.config.errorHandler para erros globais
Manipulador global de erros, registro no Sentry/Datadog e exibição de erros conforme o ambiente.
app.config.errorHandler para erros globais é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 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.
O manipulador global de erros
O Vue fornece app.config.errorHandler, uma única função que captura erros de qualquer parte do app que não tenham sido tratados localmente. Ele é sua última linha de defesa.
A assinatura do manipulador
Ele recebe os mesmos três argumentos que onErrorCaptured: o erro, a instância do componente e uma cadeia de informações.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Configurando-o
Configure-o na instância do app, no arquivo de entrada, antes da montagem.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Capturando erros não tratados
Ele captura erros de renderização de componentes, ganchos do ciclo de vida, observadores e manipuladores de eventos em todo o app — incluindo os que passaram pelos ganchos locais onErrorCaptured.
Relatando ao Sentry em produção
Em produção, encaminhe os erros para um serviço de monitoramento como o Sentry, para que você saiba quais falhas atingem os usuários.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Registro detalhado no desenvolvimento
Durante o desenvolvimento, faça log de detalhes mais completos no console para depurar rapidamente.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Ramificação por ambiente
Um manipulador robusto faz as duas coisas: relata em produção e faz log detalhado no desenvolvimento, tudo em uma única função.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Erros assíncronos
O manipulador global também captura erros lançados dentro de ganchos assíncronos do ciclo de vida e de observadores. Para rejeições de promessas não tratadas diretamente fora do Vue, adicione também um ouvinte de window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relação com os limites
Os limites locais e onErrorCaptured tratam e contêm os erros perto de onde eles ocorrem; o manipulador global é a rede de segurança para tudo que escapa. Use ambos em conjunto.
Não ignore erros silenciosamente
Evite um manipulador vazio que esconda os erros. Faça pelo menos log ou relate sempre — falhas silenciosas tornam os erros invisíveis e muito difíceis de rastrear.
Adicionando contexto
Enriqueça os relatórios com a rota atual, o identificador do usuário ou a versão do app, para agilizar a triagem dos erros em produção.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Verificação rápida
O que app.config.errorHandler trata?
Recapitulação
Você aprendeu que app.config.errorHandler = (err, instance, info) => {} é o mecanismo global de captura geral: relate ao Sentry em produção, faça log detalhado durante o desenvolvimento e combine-o com limites locais para obter um tratamento de erros em camadas e resiliente.
Perguntas Frequentes
A aula “app.config.errorHandler para erros globais” é grátis?
Sim — o texto completo de “app.config.errorHandler para erros globais” é 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 “app.config.errorHandler para erros globais”?
Manipulador global de erros, registro no Sentry/Datadog e exibição de erros conforme o ambiente. 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 3 de 4.
Quanto tempo leva a aula “app.config.errorHandler para erros globais”?
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