优质博文 | 折腾啥

#优质博文 #JavaScript #新特性 #前端 #错误处理Error chaining in JavaScript: cleaner debugging with Error.cause

Sat, 15 Nov 2025 04:03:40 GMT

#优质博文 #JavaScript #新特性 #前端 #错误处理
Error chaining in JavaScript: cleaner debugging with Error.cause

AI 摘要：本文介绍了在 JavaScript (ES2022) 中引入的 Error.cause 属性，展示它如何让错误处理更具可追溯性。作者 Matt Smith 通过实例说明了传统错误包裹的缺陷，以及 Error.cause 在保持原始堆栈信息、改进调试体验和测试断言方面的优势。最终总结出一套现代错误链最佳实践，帮助开发者构建更清晰、更稳健的错误追踪体系。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 传统错误处理的问题
• 层层调用的代码容易丢失原始错误信息；
• 以字符串拼接错误信息会破坏堆栈和错误类型；
• 导致调试困难，追踪难度高。

2. 引入 Error.cause 的改进
• 通过 new Error(message, { cause }) 保留原始错误；
• 可同时访问顶层与底层堆栈信息；
• cause 属性为非枚举属性，不污染日志或循环输出；
• 与 message、stack 一样保持一致的行为。

3. 实践与代码演示
• 示例：从 JSON.parse 到自定义函数的错误传递；
• 在日志中手动输出 err.cause 获取完整上下文；
• 适合层次式系统（如服务嵌套调用）排查问题。

4. 历史背景与 cause 出现前的替代方案
• 旧方案包括自定义字段 .originalError、字符串拼接等；
• 这些方式不统一且容易破坏原始错误结构；
• 标准化的 cause 提供更安全一致的机制。

5. 自定义错误类的支持
• 在自定义类中通过 super(message, { cause }) 传递原因；
• 适用 ES2022+ 环境即可直接使用；
• 对 TypeScript 用户，需在 tsconfig.json 中启用 "target": "es2022" 与 "lib": ["es2022"]。

6. 在测试中的应用
• 测试断言可直接验证 err.cause 类型；
• 提升测试可读性与准确性。

7. 实用技巧与注意事项
• 浏览器默认不输出层级错误链，须手动打印；
• 不建议过度使用错误链，避免干扰阅读；
• 可递归打印完整错误链（logErrorChain 与 logFullErrorChain 示例）；
• 实践场景：数据库异常→业务异常→服务异常的多层错误追踪。

8. 环境支持与现代用法总结
• 支持于现代浏览器与运行环境（Chrome 93+、Node.js 16.9+、Deno、Bun 等）；
• 推荐实践：
• ✅ 使用 Error(message, { cause })
• ✅ 支持内建与自定义错误类型
• ✅ 改善日志和调试体验
• ✅ 对 TypeScript 进行正确配置
• ⚠️ 记得手动输出或递归追踪错误链。

author Matt Smith

Allthingssmitty

Error chaining in JavaScript: cleaner debugging with Error.cause - Matt Smith

Use JavaScript's 'cause' property to chain errors, preserve context, and simplify debugging. Cleaner stack traces, better test assertions.

#优质博文 #JavaScript #前端 #新特性 #浏览器好东西

Wed, 29 Oct 2025 01:03:19 GMT

Forwarded from cosine - 前端人の日常频道

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

author Jay Rungta

web.dev

URLPattern is now Baseline Newly available | Blog | web.dev

URLPattern became Baseline Newly available as of September 15, 2025.

#碎碎念 #AI #优质博文Deepseek AI 直出的卡片居然还挺酷的！（抛开刻意混乱的文案，我喜欢这个黑金配色www）不知道怎么耍耍R1的可以玩玩儿这个提示词Prompt：高级感文案#碎碎念 #AI #优质博文Deepseek AI 直出的卡片居然还挺酷的！（抛开刻意混乱的文案，我喜欢这个黑金配色www）不知道怎么耍耍R1的可以玩玩儿这个提示词Prompt：高级感文案

Sun, 26 Jan 2025 09:25:55 GMT

Forwarded from cosine - 前端人の日常频道

#碎碎念 #AI #优质博文
Deepseek AI 直出的卡片居然还挺酷的！（抛开刻意混乱的文案，我喜欢这个黑金配色www）不知道怎么耍耍R1的可以玩玩儿这个提示词

Prompt：高级感文案