报错
文章平均质量分 71
Michael18811380328
常与同好争高下,不与傻瓜论短长。
展开
-
Starting the development server 报错和解决
最近某个项目开发环境升级后,运行 npm start 后无法启动项目,终端始终显示 Starting the development server…,浏览器 localhost: 3000 界面显示空白。错误截图。原创 2024-04-12 20:13:17 · 1798 阅读 · 0 评论 -
一次前端优化网络请求次数案例
最近线上遇到一个实际问题,当用户点击切换 tab 时,界面某个请求就会特别多。经排查,这个请求不需要在每一个 tab 点击时发送(获取通知列表),现在频繁发送性能比较差,需要改成只发送一次请求。原创 2024-01-26 14:56:21 · 459 阅读 · 1 评论 -
ReferenceError primordials is not defined 报错和解决
今天使用一个老项目(2020年前)时,执行报错,显示如下刚开始以为是网络问题,或者是第三方库冲突,尝试切换网络问题还存在,查资料如下。primordials isnot defined原创 2023-11-02 11:16:58 · 2681 阅读 · 4 评论 -
Warning: React.createElement: type is invalid -- expected a string (for built-in components)
Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object。中文就是:React 框架创建元素时,类型不合法。今天开发时,一个稳定的功能出现了下面的报错。原创 2023-09-08 13:36:31 · 2022 阅读 · 0 评论 -
如何快速修复 NPM audit 安全问题
问题描述:一个老前端项目中,npm audit 反馈 Dependencies 中反馈了不少安全问题,有很多的 high 或者 critical 问题需要修复。项目简介:大约是5年前的项目,react 版本是 16, webpack 是 3 版本,axios 是 0.x 版本。当时使用 create-react-app 初始化项目,后期经过 npm eject 暴露了配置并更改过。现在5年过去了,这些第三方库很多存在安全问题需要修复。原创 2023-08-30 17:41:22 · 572 阅读 · 0 评论 -
浏览器内存溢出处理
一个复杂的问题,浏览器直接崩溃,无法获取内存信息,也无法获取页面统计,可以二分法代码,分段排查代码中的问题。同时减少数据量量级,避免浏览器直接卡死的问题。2、浏览器 Performance 中screenshot 录屏可以记录界面不同阶段的录屏,一般用于定性分析。判断时间轴中 longtask 长任务,耗时超过 100ms,有问题通常红色标明,这个就反映了掉帧。原创 2023-02-02 13:56:15 · 2847 阅读 · 0 评论 -
解决数据兼容性问题
最近经常遇到新老数据兼容性的问题:某些新同事更改代码后,没有兼容旧数据,已有用户的数据显示不全或者错误,很麻烦。技术层面,就是某个数据或者字段,存储在服务器上,版本迭代后,数据类型变化,前端需要兼容已有的数据类型。例如一个用户对象:例如第一版中,包括了姓名(字符串),年龄(数字),性别(布尔值)第二版中产品改了需求,针对国外用户,姓名改成了姓,名两个字段性别改成了字符串,有的用户选择不显示性别第三版中,增加了地址(字符串)第四版中,可能有多个住址,地址字段改成数组。原创 2023-02-02 13:51:59 · 843 阅读 · 0 评论 -
Note that you can also install from a tarball 处理
Note that you can also install from a tarball 报错处理原创 2022-12-20 16:08:26 · 1836 阅读 · 0 评论 -
ReferenceError: primordials is not defined
ReferenceError: primordials is not defined primordials 错误 今天在处理一个老项目的 bug 时,执行正常,执行或者意外报错。尝试重新链接网络,删除 node_modules 重新安装等方法,不生效。尝试手动安装 primordials 这个第三方库,也不生效,这个第三方库好像有问题,npm 和 github 上找不到源码。原创 2022-09-08 14:51:26 · 3507 阅读 · 0 评论 -
npm 报错 426 Upgrade Required
ERR! 426 Upgrade Required解决方法更新 node 版本到 14.18.0 以上,可以参考:https://www.jianshu.com/p/e6d3f7110a60然后升级 npm 的版本到最新npm install -g npm@latestnpm config set registry https://registry.npmjs.org/下面是详细的英文描述及原因When I try to publish a new package to npm or try原创 2021-10-08 13:53:46 · 6565 阅读 · 2 评论 -
JS 加法乘法错误解决 number-precision
JS 加法乘法错误解决 number-precision问题描述一个项目中,需要计算 0.56 * 100 然后转换成字符串,结果计算错误,所以调研使用这个库实现。但是计算 0.59 * 100 结果正确。这是 JS 内部的问题。当然还有经典的0.1 + 0.2 = 0.30000000000000004 问题我具体使用 number-precision 这个库,可以实现 JS 精确四则运算。安装npm install number-precision --sa..原创 2020-11-14 12:07:25 · 5550 阅读 · 0 评论 -
Uncaught TypeError: Cannot set property ‘next‘ of undefined 报错解决
Uncaught TypeError: Cannot set property ‘next’ of undefined 报错解决今天开发遇到一个问题,界面报错如下:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:120:11) at Object.join (原创 2020-09-28 17:22:55 · 1718 阅读 · 0 评论 -
Warning: Function components cannot be given refs
Warning: Function components cannot be given refs. Attempts to access this ref will fail.问题来源我们有一个子组件,外部父组件通过 ref 获取子组件的DOM。现在需要给子组件添加翻译(i18N)。export default ChildComponent;// 改成下面的export default withTranslation('translation')(ChildComponent);加上翻译后,原创 2020-06-22 16:43:10 · 13558 阅读 · 0 评论 -
蚂蚁金服组件 ReferenceError: primordials is not defined
ReferenceError: primordials is not defined错误经过使用蚂蚁金服的某个第三方组件时,本地需要测试编译,执行 npm start 出现这个错误 ReferenceError: primordials is not defined。翻译后:类型错误:primordials 这个没有定义。这个组件是蚂蚁金服的,我看了 package.json 中的 star...原创 2020-04-23 16:04:31 · 3731 阅读 · 3 评论 -
Synchronous XMLHttpRequest on the main thread is deprecated
Synchronous XMLHttpRequest on the main thread is deprecated近期看到这个报错信息,查阅对比很多资料,主要原因是 ajax 的同步加载问题。stackOverflowWhy has this message suddenly started to appear in the Firefox console?I’m using JQue...原创 2020-04-08 21:16:50 · 26479 阅读 · 0 评论 -
时间时区错误修复moment
最近项目中,用户反馈一个时间不正确,老板让我立即处理。具体现象如下:第一个界面的时间第二个界面的时间发现一部分时间正确,一部分时间错误;正确的和错误的没有顺序。解决思路如下:1、排除后端传值错误早上刚刚上班,我输入了几个数据和测试时间,前端界面显示正常。我想可能不是前端的bug,应该是后端bug。首先我看了一下后端的传值(先看看是否是后端的问题,毕竟这个是数据错误),带着一脸问号找...原创 2020-03-20 11:00:49 · 1710 阅读 · 2 评论 -
font-weight失效移动安卓处理方法
font-weight失效移动安卓处理方法1、BUG 现象最近遇到一个奇怪的现象:一段文本设置了font-weight,但是在移动端中的浏览器中不显示加粗。左侧是浏览器中移动端模拟器中的界面,可以看到对话框的标题和按钮文字是加粗的,右侧是真机开发中的对话框,标题和按钮文本是不加粗的。多次测试,中文不会加粗,英文正常。浏览器兼容性测试后也没问题,各种浏览器都是这样的。很郁闷。...原创 2020-02-26 15:12:56 · 18891 阅读 · 6 评论 -
ArgumentError:invalid byte sequence in UTF-8 错误原因及分析
在使用coala软件进行sass或者less进行编译,发生上面的报错ArgumentError:invalid byte sequence in UTF-8:直接翻译的结果是,在UTF-8中无效字节序列。什么是无效字节序列呢?可能是部分文件(需要编译的文件)路径中存在中文。解决方法:将文件路径全部设置为英文。PS:为了开发的规范性和统一性,避免部分软件报错,需要将文件名和文件夹名全...原创 2018-07-15 07:56:01 · 10408 阅读 · 3 评论 -
Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslis
Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslis 报错解决问题在 React 项目中,使用 npm install 安装全部依赖后,运行 npm run start 然后界面出现上面的错误依照命令行提示去更新(npm update……)不起作用...原创 2019-12-05 11:13:18 · 11882 阅读 · 6 评论 -
Unexpected end of JSON input while parsing near 报错及解决
Unexpected end of JSON input while parsing near 报错,下面是报错的日志和解决方案。原创 2019-11-19 22:02:46 · 16711 阅读 · 6 评论 -
fetchMetadata: sill mapToRegistry 报错 create-react-app 执行慢的解决方法
使用 create-react-app 库进行 React 项目初始化时,有时候会显示网络问题造成无法安装。更换网络,关闭代理,仍然无效。执行 create-react-app 会安装相关依赖(react react-dom react-scripts 等)。如果是默认的配置,那么使用国外的 npm 源进行安装,某些情况下网络不良的状态不能安装。把 npm 的源改成国内淘宝的源。更改源后,基本上10秒左右可以安装相关依赖,并初始化 React 项目。原创 2019-11-03 18:37:09 · 466 阅读 · 0 评论 -
npm publish 报错 Failed put 502
今天在 npm 发包时,本地打包正常,但是 npm publish 命令后,界面出错。服务器返回报错信息:failed put 502 error parsing JSON检查本地发布环境:本地没有设置代理服务器;npm 的账号和密码是正确的(如果不正确,那么npm服务器返回值应该是没有权限, log in error)这个报错字面意思是,JSON pasing 转化...原创 2019-10-31 18:22:10 · 939 阅读 · 0 评论 -
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 报错及解决方案
在前端调试过程中,不同的浏览器在测试同样的网站可能出现不同的相应。那么Failed to load resource: net::ERR_BLOCKED_BY_CLIENT这个错误是什么呢?bug翻译:由于客户端的阻止,加载资源失败bug解决:通常情况是由于浏览器中的插件拦截:adblock会拦截网站的广告,会报这个错误。这个错误和浏览网页的主要内容没有直接关联。解决方案:...原创 2018-09-22 10:26:28 · 13446 阅读 · 14 评论 -
JEST前端单元测试
一、Jest 基本概念npm安装:1. npm install jest -D(安装到本地)2. npm install jest -g(安装到全局)运行:1. npx jest(安装到本地的前提下)2. jest(安装到全局的前提下)3. 修改"script" 中的"test" 为"jest"后使用npm run test或npm t 零配置:但测试用例文...原创 2018-09-30 20:57:56 · 6551 阅读 · 0 评论 -
Warning: setState(...): Can only update a mounted or mounting component 报错分析
在react中,前端通常需要向服务器发起异步请求,而在使用react的时候,如果这个组件最初加载的时候就发起这个异步请求,然后在返回结果中进行setState({}),这时候有可能会遇到这个警告:问题内容:Warning: setState(...): Can only update a mounted or mounting component问题分析:通常是因为组件并没有装载上便开始执...原创 2018-08-19 17:47:58 · 365 阅读 · 0 评论 -
常见服务器状态码及含义
常见服务器状态码及含义以及解决办法首先确保网络连通的情况,点开浏览器控制台的网络部分,点击请求可以查看具体请求信心,常见的响应码如下:200:请求正常(正常)300:网页需要重定向(正常)4和5开头的就是错误的请求400:请求错误(网址写错了,用户名密码写错了,请求的url不正确,post请求参数没有加header等等)==> 账户密码不正确:查看本地服务器还是远程服...原创 2018-08-19 14:15:04 · 708 阅读 · 0 评论 -
Uncaught SyntaxError: Unexpected token JSON 报错解决方案
在前端开发过程中,JSON作为常用的数据传输和配置文件经常使用。传统的XML已经逐渐被JSON所取代。有时候出现错误:Uncaught SyntaxError: Unexpected token。错误:语法错误:未预料的符号或者字符错误原因:JSON具有严格的语法规定,必须是键值对一一对应。相对于JS文件,JSON中没有注释和其他说明文件。出现这个错误的原因就是加入了其他的非法字符。解...原创 2018-08-08 20:00:07 · 5504 阅读 · 0 评论 -
commit your changes or stash them before you can merge 解决方法
在git提交过程中,commit your changes or stash them before you can merge 是一个常见的问题(如下图)。问题:在你merge or changemaster 前,提交你的改变,或者存储改变。问题原因:上次commit后,代码发生了新的变化,如果merge或者change master 就可能导致代码丢失。解决方案:保留本地的修...原创 2018-08-08 12:50:43 · 19414 阅读 · 0 评论 -
Cannot read property innerHTML of null 报错信息
Cannot read property 'innerHTML' of null ——这个报错的字面含义是:不能读取空的内部HTML。这个报错是一个初学者的问题。实际上,在页面的HTML结构中,innerHTML是有实际的值并可以在console进行获取查询到。问题:script中关于DOM部分放在和body标签前。根据浏览器的渲染原理,HTML代码从上到下执行代码,当浏览器JS解析器...原创 2018-07-20 09:29:19 · 24290 阅读 · 4 评论 -
[Intervention] Slow network is detected 报错及解决方案
[Intervention] Slow network is detected. 这个错误在调试过程中经常出现。(谷歌浏览器中出现这个报错)全部报错信息如下:index.js:1855 [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for ...原创 2018-09-29 11:49:25 · 55778 阅读 · 12 评论 -
No ‘Access-Control-Allow-Origin’ header is present on the requested resource 报错原因及解决方案
跨域——Cross-Origin Resource Sharing跨域请求:简单说,不同域名之间可以请求到数据的行为;参考文献:https://www.w3.org/TR/cors/报错信息:Failed to load https://example.com/: No ‘Access-Control-Allow-Origin’ header is present on the reque...原创 2018-10-31 20:23:18 · 2966 阅读 · 0 评论 -
前端与网络安全
前端与网络安全前端工作中存在的网络安全问题:1、SQL injection——SQL注入2、XSS3、CFRS预防方式:1、动态界面,用户输入的情况可能存在安全问题;2、对于用户提交的表单,前端可以进行验证,使用正则表达式进行检验(数据类型和数据长度);3、对于特殊标记(<“)等,使用 encode 进行传递;避免直接输入。4、界面支持富文本输入模式,避免直接使用 htm...原创 2018-10-31 20:25:15 · 2471 阅读 · 0 评论 -
Super expression must either be null or a function, not undefined 报错及解决
在 React 项目中,遇到了上面的报错信息。Super expression must either be null or a function, not undefined查阅资料,进行这样的分析:// 原始代码'use strict';import Realm from 'realm';class Todo extends Realm.Object {}Tod...原创 2018-12-12 23:28:09 · 11758 阅读 · 0 评论 -
AttributeError:object has no attribute 报错及解决
报错情况:在前端测试中,界面发送一个 PUT 请求,界面发生上面的报错,请求无法响应,服务器状态码是500。错误分析:语义上是“对象没有一个XXX属性”。查阅大部分资料,大部分说 Python 的问题。这个项目前端使用 React, 后端使用 Python 的 djongo 框架。询问后端的同事,主要的原因是前端传递的参数的数据类型不正确。后端需要一个 string 的 “tr...原创 2018-12-22 17:10:08 · 171160 阅读 · 4 评论 -
Warning: A component is changing an uncontrolled input of type text to be controlled 报错分析
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).在 React 框架中会报这样的错误,界面效果如下:...原创 2019-04-18 11:27:49 · 16494 阅读 · 6 评论 -
报错 Preset files are not allowed to export objects 处理
在使用 webpack 和 babel 编译 react项目时,会报 Preset files are not allowed to export objects 错误。查阅资料,主要是不同版本的 babel 不能兼容使用(版本6和版本7不兼容)。在高级版本中(>7)这样配置package.json"@babel/core": "^7.0.0-beta.40","@babel...原创 2019-06-12 10:40:56 · 561 阅读 · 0 评论 -
超级实用的chrome浏览器调试技巧
在前端测试时,使用浏览器调试基本的结构、样式、网络是基本功。Chrome 谷歌浏览器调试界面友好,性能强大,下面简单介绍开发者工具的几个超级使用的调试技巧。一、快速预览文件如果你使用过sublime 编辑器,那么你可能不习惯没有Go to anything这个功能的覆盖。你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候,按Ctrl+P(cmd+p on mac)...原创 2019-06-28 11:12:41 · 6710 阅读 · 0 评论 -
ssh: connect to host github.com port 22: Connection refused fatal: Could not read from remote 报错解决
ssh: connect to host github.com port 22: Connection refused fatal: Could not read from remote repository。今天 github 提交代码时,git pull 出现错误:ssh: connect to host github.com port 22: Connection refused fata...原创 2019-08-26 21:21:36 · 7792 阅读 · 1 评论 -
Error: Invalid CSS after and expected expression 错误原因及分析
错误信息:使用scss语法进行css编译过程中,写好的sass文件用koala进行编译,报出上面的错误:Error: Invalid CSS after and expected expression。错误分析:无效的css,选择器没有任何属性,所以将不会被编译成css。解决思路:将文件后缀名由sass改成scss即可。这是原始的sass文件,仔细检查没有拼写错误或者css语法...原创 2018-07-16 15:41:13 · 9584 阅读 · 2 评论