拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组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

相关文章
|
11天前
|
机器学习/深度学习 人工智能 自然语言处理
AI技术深度解析:从基础到应用的全面介绍
人工智能(AI)技术的迅猛发展,正在深刻改变着我们的生活和工作方式。从自然语言处理(NLP)到机器学习,从神经网络到大型语言模型(LLM),AI技术的每一次进步都带来了前所未有的机遇和挑战。本文将从背景、历史、业务场景、Python代码示例、流程图以及如何上手等多个方面,对AI技术中的关键组件进行深度解析,为读者呈现一个全面而深入的AI技术世界。
71 10
|
2月前
|
人工智能
歌词结构的巧妙安排:写歌词的方法与技巧解析,妙笔生词AI智能写歌词软件
歌词创作是一门艺术,关键在于巧妙的结构安排。开头需迅速吸引听众,主体部分要坚实且富有逻辑,结尾则应留下深刻印象。《妙笔生词智能写歌词软件》提供多种 AI 功能,帮助创作者找到灵感,优化歌词结构,写出打动人心的作品。
|
21天前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
102 67
|
13天前
|
人工智能 自然语言处理 前端开发
OpenAI 12天发布会全解析 | AI大咖说
OpenAI近日宣布将在12个工作日内每天进行一场直播,展示一系列新产品和样品。首日推出GPT-o1正式版,性能大幅提升;次日展示Reinforcement Fine-Tuning技术,提高模型决策质量;第三天推出Sora,实现高质量视频生成;第四天加强Canvas,提升多模态创作效率;第五天发布ChatGPT扩展功能,增强灵活性;第六天推出ChatGPT Vision,实现多模态互动;第七天推出ChatGPT Projects,优化项目管理。这些新技术正改变我们的生活和工作方式。
773 9
|
29天前
|
机器学习/深度学习 人工智能 数据处理
【AI系统】NV Switch 深度解析
英伟达的NVSwitch技术是高性能计算领域的重大突破,旨在解决多GPU系统中数据传输的瓶颈问题。通过提供比PCIe高10倍的带宽,NVLink实现了GPU间的直接数据交换,减少了延迟,提高了吞吐量。NVSwitch则进一步推动了这一技术的发展,支持更多NVLink接口,实现无阻塞的全互联GPU系统,极大提升了数据交换效率和系统灵活性,为构建强大的计算集群奠定了基础。
61 3
|
1月前
|
机器学习/深度学习 存储 人工智能
AI助力电子邮件安全防护,CISO解析新策略
AI助力电子邮件安全防护,CISO解析新策略
|
2月前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
4090 5
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
1月前
|
存储 人工智能 安全
CPFS深度解析:并行文件存储加速AI创新
在生成式AI的大潮中,并行文件系统作为高性能数据底座,为AI算力提供高吞吐、低延迟的数据存储服务。在本话题中,我们将介绍阿里云并行文件存储CPFS针对AI智算场景而提供的产品能力演进与更新,深入讲解在性能、成本、稳定、安全等方面的技术创新。
130 0
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
思通数科AI平台在尽职调查中的技术解析与应用
思通数科AI多模态能力平台结合OCR、NLP和深度学习技术,为IPO尽职调查、融资等重要交易环节提供智能化解决方案。平台自动识别、提取并分类海量文档,实现高效数据核验与合规性检查,显著提升审查速度和精准度,同时保障敏感信息管理和数据安全。
118 11
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
医疗行业的语音识别技术解析:AI多模态能力平台的应用与架构
AI多模态能力平台通过语音识别技术,实现实时转录医患对话,自动生成结构化数据,提高医疗效率。平台具备强大的环境降噪、语音分离及自然语言处理能力,支持与医院系统无缝集成,广泛应用于门诊记录、多学科会诊和急诊场景,显著提升工作效率和数据准确性。

推荐镜像

更多