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

2024-01-03 11:47:33

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)

文章来源:https://blog.csdn.net/qq_37247349/article/details/135358325
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。