+error.svelte para páginas de erro personalizadas
Crie interfaces de erro personalizadas que exibam o código de status e a mensagem.
+error.svelte para páginas de erro personalizadas é uma aula grátis de Sveltejs 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Interface de erro personalizada
Crie +error.svelte em qualquer pasta de rota para obter uma página de erro personalizada.
Página de erro raiz
src/routes/+error.svelte captura erros em qualquer lugar que não tenha sido protegido por um limite de erro aninhado.
<!-- +error.svelte -->
<script>
import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>Acessar o status
$page.status fornece o status HTTP (404, 500 etc.).
Acessar a mensagem
$page.error.message fornece a mensagem que você passou a error() ou a mensagem genérica de handleError.
Diferenças de pré-renderização
Páginas de erro estáticas podem ser pré-renderizadas; as dinâmicas são renderizadas a cada solicitação.
Limites aninhados
Coloque +error.svelte em subpastas para delimitar a interface de erro a seções específicas.
Mensagens amigáveis
Personalize a mensagem: uma 404 deve sugerir navegar para outro lugar; uma 500 deve pedir desculpas e fornecer um link para o suporte.
IDs de rastreamento
Exiba um ID de rastreamento retornado por handleError para que os usuários possam informá-lo ao suporte.
Opções de recuperação
Sempre ofereça uma forma de voltar: um atalho para a página inicial, uma caixa de pesquisa ou um botão de recarregamento.
Identidade visual
Estilize a página de erro como o restante da sua aplicação; ela faz parte da experiência do usuário.
Atualizações reativas
$page é atualizado se o usuário navegar dentro do contexto do erro, mantendo a interface atualizada.
Verificação rápida
Como você acessa o status do erro?
Recapitulação
Coloque +error.svelte em cada pasta para delimitar as interfaces de erro. Leia $page.status e $page.error.
Perguntas Frequentes
A aula “+error.svelte para páginas de erro personalizadas” é grátis?
Sim — o texto completo de “+error.svelte para páginas de erro personalizadas” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “+error.svelte para páginas de erro personalizadas”?
Crie interfaces de erro personalizadas que exibam o código de status e a mensagem. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 “+error.svelte para páginas de erro personalizadas”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- +error.svelte para páginas de erro personalizadas
- Erros esperados e inesperados
- Auxiliares error() e redirect()
- Páginas de erro em layouts aninhados