拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析

本文涉及的产品
视觉智能开放平台,视频资源包5000点
视觉智能开放平台,分割抠图1万点
NLP自然语言处理_基础版,每接口每天50万次
简介: 本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。

作为前端开发者,你可能会遇到过一些奇奇怪怪的报错(相信我你早晚会遇到),关键是它未给出具体错误的位置,或者是一些很奇怪的信息。

我以前都是还原代码,然后找到错误的位置。或者是瞎弄一通,测试各种办法搞定,但不知道它到底是哪儿,最近觉得这样不好,于是专门开始记录啦

这篇就作为系列序章,希望大家读完有所收获

首先贴一个奇怪的报错吧,它是一个前端vue3+typescript的项目,构建的时候失败了,请看报错信息:


node:child_process:935

   throw err;

   ^

Error: Command failed: npm run build

   at checkExecSyncError (node:child_process:861:11)

   at execSync (node:child_process:932:15)

   at /home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:117:5

   at Array.forEach (<anonymous>)

   at buildMods (/home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:105:17)

   at Object.<anonymous> (/home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs:56:1)

   at Module._compile (node:internal/modules/cjs/loader:1198:14)

   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)

   at Module.load (node:internal/modules/cjs/loader:1076:32) {

 status: 2,

 signal: null,

 output: [

   null,

   Buffer(475) [Uint8Array] [

      10,  62,  32,  99, 108, 111, 117, 100, 112,  99,  97, 100,

     109, 105, 110,  64,  48,  46,  48,  46,  48,  32,  98, 117,

     105, 108, 100,  10,  62,  32, 118, 117, 101,  45, 116, 115,

      99,  32,  45,  98,  32,  38,  38,  32, 118, 105, 116, 101,

      32,  98, 117, 105, 108, 100,  10,  10, 115, 114,  99,  47,

      99, 111, 109, 112, 111, 110, 101, 110, 116, 115,  47,  67,

     111, 109, 112, 117, 116, 101, 114,  78, 101, 116, 119, 111,

     114, 107,  68, 105, 115, 107,  77, 111, 100,  97, 108,  46,

     118, 117, 101,  40,

     ... 375 more items

   ],

   Buffer(0) [Uint8Array] []

 ],

 pid: 31896,

 stdout: Buffer(475) ,

 stderr: Buffer(0) [Uint8Array] []

} // 这里放出文字报错,只是希望让某些不知所措的小可爱搜索时命中错误模式


是不是一脸懵逼,它里面没有给出报错的位置,堆栈给出的都是Nodejs的核心库的位置(loader、bundler)以及构建脚本的位置。最奇怪的是,它的output和stdout是一个 很大(通常)的Buffer数组,如果你是小白或者刚入前端的新人,肯定会感到手足无措:心里暗想,我的个乖乖,这啥玩意儿啊,大神才能看懂吗?如果你给以前的我来看,我也只会是使用如下的万金油策略:

前端框架问题万金油解决办法顺序 :

1. 问ChatGPT/Claude优先,其次才是国产模型(最近新增)

2. 把问题复制百度它谷歌它,最终你要么进了csdn/stackoverflow/git,要么显示找不到结果

3. 重新安装node_modules(记得先强制删除),中途出现任何报错都重装

4. 切换node版本,记得用nvm管理多版本nodejs

5. 清理构建缓存:就是项目目录下 除了.git的那些,都删了

6. 后路:把当前代码复制下来,保存到别的目录,然后git迁出到可以编译成功的记录,再一个个文件的还原吧(这是最笨的办法,但基本能解决所有问题,除非你一次构建成功都没有过 )

下面我们用先用传统方法分析这个报错:

1. 百度,它给出了莫名其妙的回答,因为这个错误每个人都不一样,很难找到;其它搜索引擎也差不多。

2. 通义千问:

从您提供的错误信息来看,您遇到了一个命令执行失败的问题,具体是在尝试运行 npm run build 命令时出现了错误。错误信息指出了一些关键点:

  • 问题发生在构建(build)过程中。
  • 错误发生在脚本文件 /home/jenkins/workspace/cloudpcadmin-voi-build/scripts/ci/bundle.cjs 的第 117 行附近。
  • 构建脚本尝试对多个模块进行构建,这在第 105 行有体现。
  • 错误是由 Node.js 子进程执行同步命令 (execSync) 失败导致的。

巴拉巴拉,它也只是分析出了构建脚本能够看到的位置。

为了进一步诊断问题,建议查看详细的构建日志或者尝试在本地环境中重现这个问题。如果问题依旧无法解决,您可以寻求社区的帮助,例如在 Stack Overflow 或 GitHub 上创建 issue 并附上尽可能多的相关信息。

估计很多大模型都是。然后用chatgpt-4o:

You may want to add more logging to your bundle.cjs file to print additional details, especially around the failing line. Adding logging around the execSync call may help identify the underlying issue.

If you share more details about the specific command or line at bundle.cjs:117:5, I can provide further assistance.

它依旧无法解决。

最后用了通义千问

这个错误表明在执行 npm run build 命令时出现了问题。让我们逐步分析并提供一些可能的解决方案:

      1-10忽略,平平无奇,因为和别的答案差不多

      11.检查 src/components/ComputerNetworkDiskModal.vue: 错误信息中提到了这个文件,可能存在问题。检查这个文件的 TypeScript 类型定义。

聪明的你肯定也发现了:他给出一个vue文件src/components/ComputerNetworkDiskModal.vue,那么问题来了,从这个奇怪的报错中,怎么看出这个文件的?!!!

我强迫它解释,交出秘笈,毕竟最终我是希望看到此处的各位的都能学会。迫于我的威压,它委屈巴巴的回答了:

好的把,我将这些数字转换为了 ASCII 码。这些数字实际上是 UTF-8 编码的字节值,我们可以将它们解码为可读的文本。让我为您解码:

> cloudpcadmin@0.0.0 build > vue-tsc -b && vite build src/components/ComputerNetworkDiskModal.vue(

揭晓答案:那些数字,其实是一个ASCII码的数值表示,不要问我什么是ASCII码(去搜)。

这个问题,或者一系列的问题,以后都有解决办法了。用vscode打开那个文件,发现果然有个微不足道的类型报错,as any临时搞定,构建成功!

这个问题的关键就在于基础知识的理解,解构!解构!解构!以后看到文字 就要联想到它知识一个个ASCII数值 绘制在屏幕上,看到一个活物就想到它知识一堆细胞,一堆分子原子

YU.H

相关文章
|
2月前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
4014 5
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
19天前
|
机器学习/深度学习 编解码 前端开发
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
42 7
|
21天前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
42 4
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
64 1
|
1月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
34 1
|
2月前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
2月前
|
JSON 前端开发 JavaScript
前端模块打包器的深度解析
【10月更文挑战第13天】前端模块打包器的深度解析
|
2月前
|
存储 前端开发 JavaScript
前端模块化打包工具的深度解析
【10月更文挑战第13天】前端模块化打包工具的深度解析

推荐镜像

更多