Componentes de limite de erro
Criação de um componente wrapper ErrorBoundary com slot de fallback e exibição de erros.
Componentes de limite de erro é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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 que é um limite de erros
Um limite de erros é um componente reutilizável que envolve parte da sua interface, captura os erros que ocorrem dentro dela e exibe uma alternativa em vez de deixar o aplicativo inteiro falhar.
A ideia central
O limite mantém um indicador hasError. Enquanto ele for falso, renderiza os filhos; quando um erro é capturado, muda para true e renderiza uma alternativa.
import { ref } from "vue";
const hasError = ref(false);Capturando o erro
Use onErrorCaptured para definir o indicador e interromper a propagação, de modo que o limite assuma completamente a responsabilidade pela falha.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Armazenando os detalhes do erro
Capture também o próprio erro para que a alternativa possa exibir uma mensagem ou para que você possa oferecer uma nova tentativa.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});A estrutura do modelo
Renderize o slot padrão (os filhos) quando tudo estiver funcionando e um slot alternativo quando ocorrer um erro.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>O slot padrão exibe os filhos
O slot padrão contém a interface protegida. Em condições normais, o limite fica invisível — ele apenas repassa os filhos.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>O slot alternativo é exibido em caso de erro
Forneça um slot fallback nomeado para a interface de erro. Ele pode receber o erro por meio de uma propriedade de slot com escopo.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Adicionando uma nova tentativa
Exponha um reset para permitir que os usuários se recuperem. Um método limpa o indicador e renderiza novamente os filhos.
function reset() {
hasError.value = false;
error.value = null;
}Nova tentativa na alternativa
Passe reset pelo slot com escopo para que a alternativa possa oferecer um botão Tentar novamente.
<slot v-else name="fallback" :error="error" :reset="reset" />Um conteúdo alternativo padrão
Forneça um conteúdo padrão sensato para o espaço alternativo, para que o limite funcione mesmo sem uma alternativa personalizada.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Por que os limites são importantes
Sem limites, um único componente com falha pode derrubar uma visualização inteira. Os limites isolam as falhas para que o restante do app continue funcionando — um padrão essencial de resiliência.
Verificação rápida
Como um limite de erros decide o que renderizar?
Recapitulação
Você criou um limite de erros: uma referência hasError, onErrorCaptured que a define e retorna false, um espaço padrão para os componentes filhos e um espaço alternativo (com o erro e uma redefinição) exibido quando ocorre um erro — isolando as falhas do restante do app.
Perguntas Frequentes
A aula “Componentes de limite de erro” é grátis?
Sim — o texto completo de “Componentes de limite de erro” é 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 “Componentes de limite de erro”?
Criação de um componente wrapper ErrorBoundary com slot de fallback e exibição de erros. 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 2 de 4.
Quanto tempo leva a aula “Componentes de limite de erro”?
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