5 错误处理

前言

在错误处理方面，我进行了以下处理：

使用 Winston 记录日志到文件
设立 error.vue 全局错误页面
配置 auth/error.vue 认证错误页面

Winston 日志

配置 nuxt.config.ts, 日志文件被写到 /logs 目录下。

  nuxt3WinstonLog: {
    maxSize: '2048m',
    maxFiles: '7d',
    infoLogPath: `./logs`,
    infoLogName: `%DATE%-${process.env.NODE_ENV}-info.log`,
    errorLogPath: `./logs`,
    errorLogName: `%DATE%-${process.env.NODE_ENV}-error.log`,
    skipRequestMiddlewareHandler: false
  },

日志过期时间 7 天。

error.vue 全局错误页面

发生错误时， nuxt 将会自动跳转 error.vue ，下面的脚本将会显示一个错误的信息页来展示，并点击返回首页来引导用户接下来的操作。

<template>
  <div>
    <AppHeader />

    <UMain>
      <UContainer>
        <UPage>
          <UPageError :error="error" />
        </UPage>
      </UContainer>
    </UMain>

    <AppFooter />

    <ClientOnly>
      <LazyUContentSearch
        :files="files"
        :navigation="navigation"
      />
    </ClientOnly>

    <UNotifications />
  </div>
</template>

auth/error.vue 认证错误页面

next-auth 组件发生错误时会跳转 app/pages/auth/error.vue 组件，会传递过来 error 参数，我们需要友好的展示给用户，引导用户重新登录。

<script setup lang="ts">
const route = useRoute()
const errorCode = computed(() => route.params.error)

const page = {
  title: '认证错误',
  description: '请点击返回，重新登录、注册。'
}

...
</script>

<template>
  <UContainer>
    <UPageHeader
      v-bind="page"
      class="py-[50px]"
    />

    <UPageBody>
      <div>
        <h2>用户认证错误 {{ errorCode }}. 请重新尝试!</h2>
        <NuxtLink
          to="/"
          class="text-blue-500"
        >
          返回首页
        </NuxtLink>
      </div>
    </UPageBody>
  </UContainer>
</template>

end

4 JSON-LD

配置网站 Json-LD 数据。

6 Sitemap.xml

配置网站地图文件 sitemap.xml。