E aí, hoje estou aqui para falar um pouco sobre como lidar com erros no Nuxt 2, utilizando o layout de erros.
Já se deparou com essa tela de erro quando o usuário acessa uma rota que não existe? 404 Not Found
Podemos lidar com esse tipo de erro e muitos outros usando um layout do Nuxt chamado error
.
1 - Criando o layout de erro
Dentro da pasta /layouts
, vamos criar um arquivo chamado error.vue
com uma estrutura básica para visualizarmos imediatamente a tela de erro. Com isso, teremos acesso a uma página diferente, mais amigável e descritiva para o usuário.
<template>
<div class="error-container">
<h1 class="error__code">404</h1>
<p class="error__message">Oops! Parece que você se perdeu.</p>
<p class="error__message">
A página que você está procurando não foi encontrada.
</p>
<a class="error__back-link" href="/">Voltar para a página inicial</a>
</div>
</template>
<style lang="scss">
$font-family: Arial, sans-serif;
$error-color: #e74c3c;
$text-color: #333;
$link-color: #3498db;
body {
font-family: $font-family;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.error-container {
text-align: center;
&__code {
font-size: 6rem;
font-weight: bold;
color: $error-color;
margin: 0;
}
&__message {
font-size: 1.5rem;
color: $text-color;
margin: 10px 0;
}
&__back-link {
color: $link-color;
text-decoration: none;
}
}
</style>
2 - Lidando com erros
Uma característica interessante desse layout de erro é que temos uma prop chamada error
que é sempre enviada. No primeiro exemplo, fixamos um 404 e textos como exemplo, mas podemos tornar isso dinâmico com essa prop.
Adicionando o script abaixo já conseguimos usar o computed statusCode
para definir um titulo e lidar com condicionais para a página e usar no lugar do 404
estático e também ajustar os textos para diferentes erros caso exista.
// Ajustar o template
<template>
<div class="error-container">
<div v-if="statusCode === 404">
<h1 class="error__code">{{ statusCode }}</h1>
<p class="error__message">Oops! Parece que você se perdeu.</p>
<p class="error__message">
A página que você está procurando não foi encontrada.
</p>
<a class="error__back-link" href="/">Voltar para a página inicial</a>
</div>
<div v-else>
<h1 class="error__code">{{ statusCode }}</h1>
<p class="error__message">Oops! Parece que tivemos um problema.</p>
<p class="error__message">Atualize a página para tentar novamente</p>
</div>
</div>
</template>
// Adicionar esse script ao arquivo error.vue
<script>
export default {
props: {
error: {
type: Object
}
},
computed: {
statusCode() {
return this.error.statusCode;
}
},
head() {
return {
title: this.statusCode
};
}
};
</script>
É isso! Com um simples layout de erro, conseguimos lidar com o erro 404 Status Code e com o 500 Status Code.
Podemos melhorar essa página usando componentes para lidar com cada erro ou utilizar computed properties no lugar dos textos em vez de usar condicionais, fica a critério.
Abraços e até a próxima! 🌵
Top comments (3)
Obrigado por isso, primo <3
Recentemente escrevi um artigo sobre error handling tbm,mto interessante ver no ecossistema js primo <3
Ótimo conteúdo!