Vue 周报 #126 - 在Nuxt中处理客户端错误

Hi 👋

原文地址：Vue 周报 #126 - 在Nuxt中处理客户端错误

Vue

📕 发布Vue 3.4 🏀Slam Dunk

• 👉🏻一个2倍快的解析器更
• 👉🏻快的SFC编译
• 👉🏻更准确的反应性系统
• 👉🏻稳定的defineModel（）
• 👉🏻v-bind同名速记
• 👉🏻…

🚀 Vue提示集合

• 👉🏻Michael Thiessen发布了他的Vue Tips Collection电子书的第二版。
• 👉🏻你可以免费获得前两章的30个提示。

Nuxt

📕 Nuxt 3.9已经发布

• 👉🏻Vite 5
• 👉🏻交互式服务器组件
• 👉🏻新的composables
• 👉🏻新的加载API
• 👉🏻…

📕 Nuxt 3中的Web Scraper

• 👉🏻本系列文章包含4个部分，并解释了如何使用Nuxt 3创建Web Scraper。

📕 构建由Nuxt Content提供支持的测验应用程序

• 👉🏻在本教程中，您将学习如何使用Nuxt Content构建测验应用程序。

📕 更安全的Vue& Nuxt应用程序->默认情况下！🛡?

• 👉🏻了解如何使用NuxtSecurity模块使Vue& Nuxt应用在默认情况下更安全。

🛠? Nuxt OG Image v3发布

• 👉🏻完全重写模块，以提高稳定性和开发人员体验。

🛠? Nuxt I18n v8.0发布

• 👉🏻经过两年的开发，Nuxt I18n的Nuxt 3稳定版本已经发布。

🛠? Nuxt API

• 👉🏻使用服务器代理与任何API安全连接。

Nuxt小技巧：处理客户端错误

如果客户端发生错误，Nuxt将显示一个通用错误页面。你通常不想全屏显示错误页面，而是在应用中的特定位置显示错误。因此，Nuxt提供了<NuxtErrorBoundary>组件：

<template>
  <NuxtErrorBoundary>
    <AnyComponent/>
  </NuxtErrorBoundary>
</template>

<NuxtErrorBoundary>将在其默认插槽中捕获所有错误。

您可以使用#error插槽向用户显示错误。它提供了一个clearError函数来清除错误并再次显示子对象：

<script setup lang="ts">
const onError = (error: Error) => {
  // Here you can try to resolve the error
}
</script>
<template>
  <NuxtErrorBoundary @error="onError">
    <AnyComponent/>
    <template #error="{ error, clearError }">
      An error occurred: {{ error.message }}
      <button @click="clearError">
        Try again
      </button>
    </template>
  </NuxtErrorBoundary>
</template>

您可以在error = null中调用onError来清除错误。但是这将重新渲染默认插槽。如果您还没有完全解决错误，错误槽将再次出现，这可能导致无限循环。

一个解决方案是在onError中导航到不同的页面：

<script setup lang="ts">
const recoverFromError = async (error) => {
  await navigateTo('/');
  error.value = null;
}
</script>

如果您导航到另一个页面，错误将自动清除。

这个地址(nuxt.com/docs/examples/advanced/error-handling)演示了如何在不同环境中处理错误的实例：页面，插件，组件和中间件。

😂 轻松一刻

🧑🏻?💻其他新闻

📕 学习编写自己的迷你侠盗猎车手游戏与自动驾驶汽车

📕 2023年的Web开发：JavaScript仍然是规则，AI正在崛起

• 👉🏻本文涵盖了2023年的Web发展趋势。

📕 3天内删除5万行代码

• 👉🏻一名开发人员最近删除了超过50，000行代码，占其前端代码库的70%。
• 👉🏻令人惊讶的是，这种大规模的代码删除并没有破坏应用程序，而是导致了显着的简化。

📕 最新的TypeScript配置

• 👉🏻TypeScript配置包含其他选项，可以更可靠地保护您的项目免受类型相关错误的影响，而strict选项尚未自动包含这些错误。

🛠? Procedural Planets

• 👉🏻一个使用Three.js编写的程序化行星生成器。

🛠? Svgl

• 👉🏻一个免费使用的SVG徽标库。

🛠? npminsights

• 👉🏻一个很不错的了解NPM包的程序

---

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）