Lidando com erros no Nuxt 2

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! 🌵