以客户端为中心的错误处理

以客户端为中心的错误处理

了解和处理错误

为了有效地处理错误,必须了解可能发生的错误类型。让我们首先对您可能遇到的错误进行分类。

Web 客户端环境中的错误类型

网络错误

连接问题:与服务器建立连接时出现问题。超时:请求花费太长时间才能收到响应。DNS 错误:域名解析问题。HTTP 错误:404 Not Found、500 Internal Server Error 等错误

服务器 API 错误

无效响应:来自服务器的意外或格式错误的数据。身份验证错误:用户身份验证或授权问题。速率限制:由于超出 API 使用限制而产生的限制。

用户浏览器环境错误

浏览器兼容性:由于浏览器处理某些功能的方式不同而产生的问题。JavaScript 错误:客户端 JavaScript 代码中的错误。资源加载错误:加载图像、脚本或样式表等资源时出现问题。

其他错误

客户端错误:与用户设备或操作系统相关的错误。UI/UX 错误:用户界面或用户体验问题,例如链接损坏或布局不正确。

可能会发生各种类型的错误。然而,这些错误通常可以分为两类:

预期错误:提前知道发生情况和性质的错误。意外错误:事先不知道其发生和性质的错误。

让我们将讨论过的错误分为这些类别。

错误是否可以预见?

预期错误

从具有明确状态代码的服务器 API 收到的错误可以被视为预期错误,因为它们可以提前预测和解决。

例如未授权访问(401)或禁止访问(403)等错误,可以根据情况进行适当处理。为每个状态代码定义更详细的错误代码以管理响应错误的应用程序逻辑也很常见。这些被称为预期错误。

意外错误

另一方面,500 范围内的服务器错误被归类为 意外错误,因为它们是不可预测的。服务器因任何原因无法响应的情况随时可能发生。另外,由于用户的网络环境或浏览器环境而可能出现的错误很难预测,因此被归类为意外错误。

用户和错误

错误还可以根据与用户的交互进行分类,而不仅仅是环境。对错误进行分类的一种方法是考虑用户是否可以对错误采取措施。以下是此分类的标准:

用户可以理解和解决的错误(帮助用户继续使用应用程序的错误)。用户无法解决的错误(无法为用户提供任何帮助的错误)。

可解决的错误

例如,身份验证或授权错误就属于此类。未登录的用户可能会遇到 401 状态错误。在这种情况下,您可以提供登录屏幕或显示一条消息,指示需要登录。

如果用户没有访问特定屏幕的权限,您可以引导他们向管理员请求访问权限。

没有一个产品开发者会欢迎用户放弃。为遇到错误的用户提供指导以帮助他们克服这种情况至关重要。例如,为临时网络错误提供刷新按钮,或者在访问不存在的页面时提供返回上一屏幕的按钮。

无法解决的错误

但是,在某些情况下,通知用户错误情况根本没有帮助。例如,如果代码包含无法在低规格设备或浏览器上运行的组件,则用户无法对其执行任何操作。 (也许是一条建议使用不同浏览器的消息?)

两种情况,1 和 2,都涉及提供消息。不同之处在于,案例 1 包含一些提示用户采取步骤的操作或指导。

遇到的错误是否是用户可以自行解决的?

如何处理错误

那么,我们应该如何处理发生的错误呢?当发生错误时应用程序应该向用户提供什么样的界面?让我们根据不同类型的错误特点来探讨一下如何处理它们。

不可预测但可解决的错误

一个典型的例子是网络错误。这些可能随时发生,具体取决于用户的网络环境。最简单的解决方案是通知用户这是一个“临时错误”并提供重试之前操作的指导。

误差范围

对于这些错误,确保整个应用程序不会受到不利影响至关重要。例如,如果一个应用程序在一个屏幕上调用 10 个 API,则失败的一个 API 不应在整个应用程序中触发错误消息,并且需要重试所有调用。

相反,只专注于恢复失败的区域。

不可预测且无法解决的错误

这些错误很难预测并且没有直接的解决方案。在开发过程中应该尽量减少此类错误,并且应该有一个在发生错误时进行处理的计划。由于用户无法自行解决这些错误,因此可能有必要提供一种简单的方式来联系客户支持。

监控

开发人员无法控制的错误应使用 Sentry 等工具进行监控。需要修复这些错误以防止用户遇到它们。此外,确保有一种机制可以让用户在遇到此类错误时返回到应用程序。

可预测但无法解决的错误

这些是已知错误,用户没有可用的解决方案。如果用户无法自行解决这些问题,则表明错过了错误处理的机会。如果用户故意执行异常操作,则可能是存在安全漏洞的迹象。

与安全相关的错误

当有恶意利用该应用程序时,就会出现这些错误。它们通常源于安全漏洞,应该在开发过程中加以预防。解决 CORS 和 XSS 等基本安全问题并与安全团队协作构建安全的应用程序至关重要。

可预测和可解决的错误

这些错误通常是开发人员已经意识到的业务逻辑的一部分:

401 未经授权错误:需要登录。404 Not Found 错误:访问错误的页面。其他业务逻辑错误:由应用程序的逻辑定义。

在这些情况下,请在应用程序内提供适当的指导或创建单独的页面来指导用户。

指导的重要性

用户应该清楚地了解遇到错误消息后下一步该做什么。这有助于减少错误频率并防止用户放弃。因此,除了错误消息之外,还必须包含号召性用语。

例如,如果存在字段验证错误,请关注发生错误的字段。如果用户导航到不存在的页面,请提供一个返回上一屏幕的按钮。

结论

以客户端为中心的错误处理

我们探索了错误处理。让我们利用各种工具和技术来有效地管理错误,例如错误监控工具和React的ErrorBoundary,它可以捕获有限范围内的错误。

以上就是以客户端为中心的错误处理的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491355.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 13:53:31
下一篇 2025年12月19日 13:54:00

相关推荐

  • 使用 JavaScript 释放大型语言模型的力量:实际应用程序

    近年来,大型语言模型 (llm) 彻底改变了我们与技术交互的方式,使机器能够理解和生成类似人类的文本。由于 javascript 是一种用于 web 开发的多功能语言,将 llm 集成到您的应用程序中可以打开一个充满可能性的世界。在这篇博客中,我们将探索一些使用 javascript 的法学硕士令人…

    好文分享 2025年12月19日
    000
  • 探索 React 的 useCallback Hook:深入探讨

    react 应用程序需要峰值性能,尤其是当它们的规模和复杂性不断增长时。在上一篇文章中,我们探讨了 usememo,这是一个用于记忆计算值并避免不必要的重新计算的关键钩子。如果您不熟悉 usememo 或希望刷新您的理解,“了解 react 的 usememo”提供了宝贵的见解,可以增强您的掌握并优…

    2025年12月19日
    000
  • Nodejs 中的 API 速率限制

    api 构成了现代网络通信的支柱,管理客户端访问它们的频率至关重要。实施速率限制可通过控制 api 请求流来确保您的服务器保持响应速度和安全。 本指南重点介绍在 node.js(一个广泛使用的用于构建可扩展 web 服务的平台)中实现 api 速率限制的关键策略。 什么是 api 速率限制? api…

    2025年12月19日
    000
  • 用ps画笑脸

    使用 p5.js 绘制笑脸 在本文中,我们将探索如何使用 p5.js 库创建一个简单但迷人的图画:笑脸。 p5.j​​s 是一个 javascript 库,可以轻松创建交互式图形和动画。对于想要创建基于代码的视觉项目的艺术家、设计师和开发人员来说,它是理想的选择。 什么是 p5.js? p5.js …

    2025年12月19日
    000
  • RemoveCookieWall,Firefox 扩展

    您是否厌倦了网站上流行的横幅,以便您接受第三方 cookie 或结账?在这篇文章中,我解释了如何制作(并发布)一个 firefox 扩展以避免大多数网站出现这种情况 信息 此扩展的代码发布于 https://github.com/jagedn/removecookiewall-addon您可以从 h…

    2025年12月19日
    000
  • 掌握 JavaScript 中的承诺取消

    作者:rosario de chiara✏️ 在 javascript 中,promises 是处理异步操作的强大工具,在 ui 相关事件中特别有用。它们代表的值可能无法立即获得,但会在未来某个时刻得到解决。 promise 允许(或应该允许)开发人员在处理 api 调用、用户交互或动画等任务时编写…

    2025年12月19日
    000
  • JavaScript 中的闭包

    你好, 在这篇文章中,让我们学习闭包。 闭包在 javascript 中至关重要,因为它们允许函数从其父作用域访问变量,即使在父函数关闭之后也是如此。这对于需要随着时间的推移记住数据的函数至关重要,例如回调函数或维护状态。这里要记住的一点是父作用域中未使用的变量将被垃圾收集。 定义:闭包是捆绑在一起…

    2025年12月19日
    000
  • 带 Fetch 的 AbortController

    javascript 中的 abortcontroller 是一个实用程序,用于取消或中止异步操作,例如获取请求或事件侦听器等其他任务,这些任务可能需要一些时间才能完成。它允许您停止不再需要的操作,这对于提高性能和管理资源很有用。 示例用例: // Create an AbortController…

    2025年12月19日
    000
  • Effect-TS 中的过滤选项:实用指南

    effect-ts 提供了各种方法来过滤选项内的值,允许您对可选值应用转换、谓词或检查。这些函数有助于确保仅保留相关数据,同时丢弃 none 值或不满足指定条件的值。在本文中,我们将探讨用于过滤选项的四个关键函数:o.partitionmap、o.filtermap、o.filter 和 o.exi…

    2025年12月19日
    000
  • 什么是 Web Worker 以及如何在 NextJS 中使用它

    先决条件 reactjs/nextjs 基础知识 什么是网络工作者 javascript 是一种单线程语言,它使用的线程称为主线程浏览器实际上使用其他线程来自浏览器 api 的 web worker 是您使用 javascript 创建和注册附加线程的一种方式 当您只能在主线程上工作时,为什么还要创…

    2025年12月19日
    000
  • 在 Effect-TS 中组合选项:实用指南

    effect-ts 提供了几种在函数式编程上下文中组合可选值或选项的强大方法。无论您想要将多个选项配对在一起还是将选项内的函数应用于其他值,该库都提供了多种方法来简化这些操作。在本文中,我们将探讨组合选项的四个关键函数:o.product、o.productmany、o.all 和 o.ap。 示例…

    2025年12月19日
    000
  • 了解 React Cache 功能

    随着react生态系统的不断扩大,优化数据获取的更强大的工具之一就是缓存功能。此内置功能允许您执行许多操作,例如有效管理和存储服务器数据、减少冗余网络请求以及提高整体应用程序性能。 在本文中,我们将了解 react 中的缓存功能、它的好处以及如何使用它。 什么是react缓存功能 react 发布的…

    2025年12月19日
    000
  • 释放 WordPress 的力量:构建令人惊叹的网站的指南

    在快速发展的 Web 开发世界中,WordPress 仍然是一次又一次重复使用的珍贵核心,用于将网站的各种性质构建为强大而灵活的解决方案,从而构建易于管理的出色网站。无论是强大的开发人员、企业主还是数字空间 WordPress 的新手。这个博客将帮助您完成整个过程,从了解功能和性能到设置您的网站和 …

    2025年12月19日
    000
  • Nodejs 版本管理器终极指南:NVM、NVS、fnm、Volta 和 asdf |第 1 部分

    介绍 嘿!如果您曾经使用 node.js 进行过开发,您就会明白,对于项目来说,经常需要使用不同的版本。也许一个项目可以在版本 10 上运行,另一个项目可以在版本 14 上运行,而一个新项目需要最新版本,比如 20。随着每个新版本的新功能的出现,一系列新的挑战也随之出现。这些是与库和框架的兼容性、新…

    2025年12月19日
    000
  • 揭秘合并排序:分治排序初学者指南

    归并排序由约翰·冯·诺依曼于 1945 年提出,主要是为了提高大型数据集的排序效率。冯·诺依曼的算法旨在使用分而治之的方法提供一致且可预测的排序过程。这种策略允许归并排序有效地处理小型和大型数据集,保证在所有情况下都能实现稳定的排序,时间复杂度为 o(n log n)。 合并排序采用分而治之方法,将…

    2025年12月19日
    000
  • 异步

    javascript 中的异步编程 允许您执行 api 调用、读取文件或查询数据库等任务,而不会阻塞其他代码的执行。这在 javascript 中至关重要,尤其是在 web 开发中,响应能力和性能是关键。 关键概念 1。回调: 作为参数传递给另一个函数的函数,该函数在异步操作完成后执行。 示例: f…

    2025年12月19日
    000
  • 安全分配

    今天关于 javascript 中安全赋值运算符 (?=) 的新提案引起了热烈讨论。我喜欢 javascript 随着时间的推移而不断改进,但这也是我最近在一些情况下遇到的问题。我应该将一个快速示例实现作为函数,对吧? 如果您还没有阅读该提案,以下是其建议: const [error, value]…

    2025年12月19日
    000
  • useSyncExternalStoreExports 状态源码解释

    在本文中,我们将了解 zustand 如何在其[源代码]中使用 usesyncexternalstoreexports。 usesyncexternalstoreexports 是从 use-sync-external-store/shim/with-selector 导入的。 use-sync-e…

    2025年12月19日
    000
  • 使用可重用列表组件扩展 React 应用程序

    在 react 中构建可扩展的应用程序需要的不仅仅是可靠的业务逻辑。随着应用程序的发展,组件的架构对于其可维护性、性能和灵活性起着重要作用。许多 web 应用程序中的基本任务之一是处理数据列表。无论是渲染产品列表、表格还是仪表板,您经常会遇到需要可重复和可重用的列表结构的场景。 通过构建可重用的列表…

    2025年12月19日
    000
  • 简化 React 状态管理:处理状态的最佳实践

    有时候,我们必须在react状态下管理状态。比如我们有一个提交表单,我们要管理表单的状态。 表达状态的方式有很多种。我会介绍一下表达身份的坏例子。 坏榜样 1、用物体来表达状态。 const page = () => { const [status, setstatus] = usestate…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信