问题背景:
公司新闻发布系统突然产生了访问 ueditor 失效的问题,导致加载不出来富文本编辑器,使用的是阿里云三方的建站服务
问题图片:
报错的是红色这行访问 ueditor 编辑器的静态资源没有访问到而导致编辑器加载不出来。
结论
一阵焦头烂额之后,我在想是否是公司网络问题,然后打开了我尘封多年的笔记本,使用手机热点网络进行访问文章后台编辑页面,发现可以正常访问,编辑器也显示正常了。
我去!!这是什么情况,当时心中一万个问好,这是为什么,抱着好奇的心态去理清整个逻辑线
异常逻辑线
- 访问富文本编辑页面报错 -> 控制台报错ueditor资源访问异常 -> 渲染 ueditor 编辑器失败
- 使用手机热点网络(联通) -> 进行访问编辑页面正常 -> 一切OK
我的问题排查思路
- 这时我把问题看向了公司网络,会是网络缓存的原因吗(因为我们公司经常断网,又很快回复,会不会是公司网络缓存的问题)我进入到公司路由器后台将路由器进行重启了一次,结果发现还是不行
- 会不会是电脑的问题,抱着试试的心态把电脑重启了一次,然后在进行访问,发现还是不行。
- 会不会换个电脑就行了,抱着试试的心态引出了上面打开多年不用的笔记本,发现还是不行。 what,此时已经被弄的有点焦头烂额了,心中有一万个“草”路过,
- 这时不止我这一方在进行排查,三方云服务的技术人员也在帮我进行排查问题原因,这个时候灵光乍现,如果使用别的网络进行访问呢,当时考虑到ip,公司的其他电脑网络都是走的交换机,都是一样的ip,必须找一个不一样的ip才行,这个时候也找不到不一样的ip,所以就进行使用了手机热点尝试一下,看是否可以,由于公司给配的是PC,我只能使用笔记本,一通操作下来之后发现使用热点的居然可以进行访问到 ueditor 富文本编辑器。
- 到这里我已经发现真相似乎距离我不远,整理一下逻辑
- 使用公司网络进行访问是没有富文本编辑栏 ckeditor.js? 报错 Cannot read properties of null (reading 'icons')
- 使用手机热点进行访问有编辑栏正常。
- 我把问题引上了CDN缓存上(先看CDN缓存)
- 有这个想法之后,我去和云服务客户进行沟通,看是否进行刷新CDN缓存(一般来讲重新刷新CDN缓存时间比较久5-10分钟才有可能生效,仅供参考,实际时间可能更长),最后等了大概15分钟左右进行PC端访问编辑页面,大功告成
CDN缓存
-
内容分发网络,本质是在离用户更近的边缘节点服务器上,临时存储静态资源的副本,从而加速资源访问、降低源站压力。
-
类似于克隆出来源站的资源进行访问加速,只不过用户只能去距离最近那个 CDN 节点,这种一般都是有缓存时效的,会不会是这个方向的问题?
总结
- 三方云服务夜间上线新版本,更新了 UEditor 等富文本依赖的核心静态资源(如 icons 图标集),但未同步执行 CDN 全网缓存刷新 + 预热操作。
- 在进行网络请求之后,云服务商使用了CDN网络分发,我请求ueditor资源发现并没有对应的资源,而对应的CDN并没有更新到,则进行返回了报错信息
- 公司网络:通过内网 DNS 固定解析到未更新的 CDN 边缘节点,请求 UEditor 核心资源(如 icons)时返回失效 不存在的旧资源,导致编辑器初始化失败,触发 icons 为 null 的报错,编辑栏无法渲染。
- 手机热点:通过运营商公网 DNS 解析到已更新的 CDN 边缘节点,能获取到最新的核心资源,编辑器正常加载。
小结
以上为本人在实际工作中遇到的问题,相关报错思路仅供大家参考。