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

本文涉及的产品
视觉智能开放平台,图像资源包5000点
视觉智能开放平台,视频资源包5000点
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

相关文章
|
22天前
|
人工智能
歌词结构的巧妙安排:写歌词的方法与技巧解析,妙笔生词AI智能写歌词软件
歌词创作是一门艺术,关键在于巧妙的结构安排。开头需迅速吸引听众,主体部分要坚实且富有逻辑,结尾则应留下深刻印象。《妙笔生词智能写歌词软件》提供多种 AI 功能,帮助创作者找到灵感,优化歌词结构,写出打动人心的作品。
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
思通数科AI平台在尽职调查中的技术解析与应用
思通数科AI多模态能力平台结合OCR、NLP和深度学习技术,为IPO尽职调查、融资等重要交易环节提供智能化解决方案。平台自动识别、提取并分类海量文档,实现高效数据核验与合规性检查,显著提升审查速度和精准度,同时保障敏感信息管理和数据安全。
61 11
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
医疗行业的语音识别技术解析:AI多模态能力平台的应用与架构
AI多模态能力平台通过语音识别技术,实现实时转录医患对话,自动生成结构化数据,提高医疗效率。平台具备强大的环境降噪、语音分离及自然语言处理能力,支持与医院系统无缝集成,广泛应用于门诊记录、多学科会诊和急诊场景,显著提升工作效率和数据准确性。
|
22天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
23天前
|
人工智能 Cloud Native Java
云原生技术深度解析:从IO优化到AI处理
【10月更文挑战第24天】在当今数字化时代,云计算已经成为企业IT架构的核心。云原生作为云计算的最新演进形态,旨在通过一系列先进的技术和实践,帮助企业构建高效、弹性、可观测的应用系统。本文将从IO优化、key问题解决、多线程意义以及AI处理等多个维度,深入探讨云原生技术的内涵与外延,并结合Java和AI技术给出相应的示例。
81 1
|
24天前
|
Web App开发 缓存 前端开发
拿下奇怪的前端报错(六):多摄手机webrtc拉取视频流会导致应用崩溃,从而无法进行人像扫描
本文介绍了一种解决手机摄像头切换导致应用崩溃的问题的方法。针对不支持facingMode配置的四摄手机,通过缓存和序号切换的方式,确保应用在特定设备上不会频繁崩溃,提升用户体验。
|
24天前
|
前端开发 JavaScript Docker
拿下奇怪的前端报错(五):SyntaxError: Unexpected token ‘??=‘或‘xxx‘ - 基于容器搭建开发环境或许是更好的选择
在前端开发中,同时维护多个项目时可能会遇到不同Node.js版本的问题。低版本Node.js可能导致依赖无法安装或启动失败,而高版本Node.js则可能引起第三方库的兼容性问题。推荐使用Docker搭建独立的开发环境,以避免版本不一致带来的困扰。
469 1
|
3天前
|
存储 人工智能 安全
CPFS深度解析:并行文件存储加速AI创新
在生成式AI的大潮中,并行文件系统作为高性能数据底座,为AI算力提供高吞吐、低延迟的数据存储服务。在本话题中,我们将介绍阿里云并行文件存储CPFS针对AI智算场景而提供的产品能力演进与更新,深入讲解在性能、成本、稳定、安全等方面的技术创新。
|
29天前
|
存储 前端开发 NoSQL
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。
|
29天前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
388 0

推荐镜像

更多