work坑集

盐焗小星球
296 阅读5分钟

serviceWorker缓存导致的错误数据

  • 背景 硬终端大屏，前端需要向服务端请求数据，然后发送给终端；某天终端反馈，时间B发送了错误数据，服务端查验，时间B前端未向服务端请求过，该数据是时间A（A在B之前）请求的。
    开始以为是终端问题，后来终端坚持它的数据来源只有前端，所以认真分析了一下，发现是sw缓存导致的
  • 原因 sw缓存了http get请求，当url保持不变的时候，如果这时候无网络，就会用缓存数据，则出现了上述情况，使用了上一次从服务端获取的旧数据
  • 结论 缓存需谨慎，尤其是http请求。可以尝试在get请求的query上带时间戳，但这样的话会缓存非常多无效的get请求。最好是需要用哪些http就缓存哪些

一次页面白屏

  • 背景 某站点打开网页白屏，查看日志发现js运行错误，报错"message":"SyntaxError: Unexpected end of script","source":"https://xxx.chunk.js"
  • 原因 很明确，该script没有正确的结尾，但同一份文件在其他站点是没问题的，切换到该站点查看source文件，发现结尾确实不对，被截断了。再看http请求，该chunk文件大小不对，请求时间过长。后来对比后，发现是该站点nginx未做gzip压缩，然后网络又使用了代理，这就导致文件过大时会直接截断。另外时间过长，是服务器本身没做好，和前端没啥关系

网页显示奇怪文字

  • 背景 客户反馈，网站上出现很奇怪的术语，并给出了截图。我们查询了国际化库，没并有该文字，也没有复现，但截图实实在在。后来分析出现术语的地方，原本都是英文
  • 原因 正常是英文，客户端显示奇怪的中文术语，初步判断是翻译导致。然后结合相同的Chrome浏览器，发现有个自动翻译功能，开启后，出现和客户相同问题

跨域失败

  • 背景 某接口需跨域，但某台PC一直跨域失败，开发自己电脑没问题
  • 原因 个别问题个别分析，单PC有问题，肯定与他浏览器有关。网上查询后，发现有的插件会屏蔽跨域请求。在该PC上尝试，果然某一翻译插件有这问题

第三方依赖强制升级

  • 背景 某间接依赖需要指定版本A，但直接依赖会把它指定为版本B，所以在package.json里resolutions指定对应依赖版本为A，但最后版本还是B
  • 原因 未执行npx npm-force-resolutions，导致package-lock 间接依赖版本会被覆盖。所以更新后，需手动执行npx npm-force-resolutions

IE布局未撑开

  • 背景 采用flex布局，然而IE上样式很奇怪，宽并未撑开占据剩余面积
  • 原因 flex: 1 在IE中解析出的是1 1 0 ，并不是1 1 auto；所以若需撑开，要手动设置flex-grow: 1

请求地址出现不明字符%E2%80%8B

  • 背景 使用axios插件发送http请求，服务端新增一个微服务，所以出现新的前缀地址 但发起的get请求里（F12观看），url里多了莫名其妙的字符%E2%80%8B
  const BaseUrl = {
    ...
    DOS: 'dataOliveService'
  }
  
  ...
  return axios.get(`${BaseUrl.DOS}/xxx/xxx/xxx`);

网上查看别人也出现过，尝试重新删除手打输入地址，依然失败

  • 解决方案 突发奇想DOS有点特殊，尝试改为其他变量名，竟然解决了！ 另外，据反馈，使用axios请求写错了，最终url里也会出现这种乱码
  • 原因？ 他人说法

在模板字符串中有一个不可见的字符，称为“零宽度空间”（见下表）。您可能不小心插入了它或从其他地方复制了它。尝试完全删除并重新键入模板字符串，以确保将其删除。

Chrome发送请求出现：Provisional headers are shown 提示

  • 现象 跨域请求，未收到回复，请求提示【provisional headers are shown】
  • 问题 这个问题意思字面意思是“显示了临时报文头”，浏览器第一次发送这个请求，请求被阻塞，未收到响应。当要求浏览器再次发送这个请求时，上个同样的请求都还没有收到响应，浏览器就会报这个警告。
  • 总结原因
  1. 请求被某些扩展如 Adblock ，划词翻译拦截了，请求被浏览器插件拦截
  2. 请求被墙
  3. 走本地缓存或者 dataurl 的请求。如果上一个资源加载失败，可能导致从缓存加载的资源失败，即缓存资源请求之前的请求不能失败。强缓存from disk cache或者from memory cache，此时也不会显示
  4. 服务器出错或者超时，没有真正的返回。client发送请求后，由于各种原因，比如网络延迟，server端逻辑错误，导致client端长时间未收到响应。解决方案：改正占用很长时间的server端程序
  5. 跨域，请求被浏览器拦截；但这时候返回应该能看到相关提示
  • 分析 由于只有个别人出现这种状态，大部分人能正常返回；而且别的浏览器也可以，所以基本确定是第一个原因（插件拦截）；所以就是逐一排查插件即可

npm start 报错 '.' 不是内部或外部命令

npm start运行命令，报了以下错误： '.' 不是内部或外部命令，也不是可运行的程序或批处理文件 检查后发现代码没问题，最后是命令的反斜杠/无法识别

// 报错版本
"run": "./node_modules/.bin/xxxx",  // start会运行run

// 修正
"run": ".\\node_modules\\.bin\\xxxx",
avatar
文章
阅读
粉丝