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

本文涉及的产品
NLP 自学习平台,3个模型定制额度 1个月
NLP自然语言处理_高级版,每接口累计50万次
视觉智能开放平台,视频通用资源包5000点
简介: 本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个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

目录
打赏
0
4
5
0
58
分享
相关文章
BizGen:长文秒变信息图!AI排版黑科技碾压PPT,十语种一键出图
清华大学与微软联合推出的BizGen AI工具,能自动将长篇文章转化为专业信息图和幻灯片,支持10种语言和多种风格,排版准确率远超同类产品。
73 11
BizGen:长文秒变信息图!AI排版黑科技碾压PPT,十语种一键出图
HarmonyOS Next~鸿蒙AI功能开发:Core Speech Kit与Core Vision Kit的技术解析与实践
本文深入解析鸿蒙操作系统(HarmonyOS)中的Core Speech Kit与Core Vision Kit,探讨其在AI功能开发中的核心能力与实践方法。Core Speech Kit聚焦语音交互,提供语音识别、合成等功能,支持多场景应用;Core Vision Kit专注视觉处理,涵盖人脸检测、OCR等技术。文章还分析了两者的协同应用及生态发展趋势,展望未来AI技术与鸿蒙系统结合带来的智能交互新阶段。
61 31
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
Resume Matcher 是一款开源AI简历优化工具,通过解析简历和职位描述,提取关键词并计算文本相似性,帮助求职者优化简历内容,提升通过自动化筛选系统(ATS)的概率,增加面试机会。
117 18
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
160 2
Shandu:开源AI研究黑科技!自动挖掘多层级信息,智能生成结构化报告
Shandu 是一款开源的 AI 研究自动化工具,结合 LangChain 和 LangGraph 技术,能够自动化地进行多层次信息挖掘和分析,生成结构化的研究报告,适用于学术研究、市场分析和技术探索等多种场景。
195 8
Shandu:开源AI研究黑科技!自动挖掘多层级信息,智能生成结构化报告
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
AI技术如何重塑客服系统?解析合力亿捷AI智能客服系统实践案例
本文探讨了人工智能技术在客服系统中的应用,涵盖技术架构、关键技术和优化策略。通过感知层、认知层、决策层和执行层的协同工作,结合自然语言处理、知识库构建和多模态交互技术,合力亿捷客服系统实现了智能化服务。文章还提出了用户体验优化、服务质量提升和系统性能改进的方法,并展望了未来发展方向,强调其在客户服务领域的核心价值与潜力。
61 6
|
28天前
|
关于员工上网监控系统中 PHP 关联数组算法的学术解析
在当代企业管理中,员工上网监控系统是维护信息安全和提升工作效率的关键工具。PHP 中的关联数组凭借其灵活的键值对存储方式,在记录员工网络活动、管理访问规则及分析上网行为等方面发挥重要作用。通过关联数组,系统能高效记录每位员工的上网历史,设定网站访问权限,并统计不同类型的网站访问频率,帮助企业洞察员工上网模式,发现潜在问题并采取相应管理措施,从而保障信息安全和提高工作效率。
34 7
鸿蒙赋能智慧物流:AI类目标签技术深度解析与实践
在数字化浪潮下,物流行业面临变革,传统模式的局限性凸显。AI技术为物流转型升级注入动力。本文聚焦HarmonyOS NEXT API 12及以上版本,探讨如何利用AI类目标签技术提升智慧物流效率、准确性和成本控制。通过高效数据处理、实时监控和动态调整,AI技术显著优于传统方式。鸿蒙系统的分布式软总线技术和隐私保护机制为智慧物流提供了坚实基础。从仓储管理到运输监控再到配送优化,AI类目标签技术助力物流全流程智能化,提高客户满意度并降低成本。开发者可借助深度学习框架和鸿蒙系统特性,开发创新应用,推动物流行业智能化升级。
打造更 AI 的操作系统 《龙蜥+超级探访》第三期走进浪潮信息
且看龙蜥社区如何联合浪潮信息向更高层次的操作系统智能化迈进?
打造更 AI 的操作系统 《龙蜥+超级探访》第三期走进浪潮信息

热门文章

最新文章

推荐镜像

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等