Lidando com erros no Nuxt 2
Published: 2023-08-23 11:12:29

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404)

![Erro de rota não encontrada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1r1b9jztznptclv0h7i.png)

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.

```vue
<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>
```
![Tela de erro - status 400](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/da7unadn40ixt9m0wvk3.png)

## 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.

```vue
// 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>
```

![Tela de erro - status 500](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82w0xvvmjh6537ms25fk.png)

É isso! Com um simples layout de erro, conseguimos lidar com o erro [404 Status Code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404) e com o [500 Status Code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/500).
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! 🌵