一、异常时C端用户感知
当C端用户访问的页面发生加载异常时,会根据异常原因展示以下页面之一,此时用户无法继续访问页面,仅可刷新、返回上一页面或关闭小程序;
下图以部分错误码为例:
404 |
502 |
二、异常发生的技术原理
疑问:为什么用户会出现这个错误页?
回答:因为用户打开了一个小程序内嵌WebView 形式承载的H5页面,但是当前这个页面的url 在请求服务端源头的时候请求异常,返回 404、502 等一系列错误导致打不开进入了统一报错页。
WebView在加载失败时会显示一个失败原因的界面,各个手机显示的界面还都不一样,部分手机还会把Url显示出来;所以支付宝做了统一加载失败的界面,并且把错误码透出给到用户/开发者做分析定位原因。
三、异常对小程序有什么影响
从支付宝统计数据中发现,小程序内嵌H5页面加载问题上涨与用户流失率上涨、用户负面反馈量呈正相关,页面问题影响用户体验,将导致用户流失率升高,降低用户对小程序黏性。
词语解释:用户流失指的是用户遇到此类错误页的时候,操作关闭按钮、返回、杀进程、压后台等不同方式离开小程序或者支付宝的场景。
四、常见哪些原因导致异常发生、如何修复
1.errorCode-1202,subErrorCode-404
1.1错误表象
1.2具体的根因
找不到与所访问网址对应的页面。
1.2.1 常见的找不到对应页面的原因
○服务器上的文件被删除。如果你删除 HTTP 服务器上 Web 容器依赖的文件,就有可能引发 404 错误
○服务器上的文件被迁移到其他目录。如果你移动了 HTTP 服务器上 Web 容器依赖的文件,也有可能引发 404 错误。比如,将文件从 文件夹A 移动到了 文件夹B,此时引用该文件的页面将会发生 404 错误
○在服务器上修改一个文件也可能导致 404 错误。 如果你修改了一个资源文件(html、js、模板等)中,而没有重新检查文件中引用的其他资源的路径,那也有可能引发一个404错误
○另一个常见的错误是 URL 拼写错误。可能因为手误将路径 /alipay 错误的拼写为 /allpay; 或者在进行动态 URL 拼接的时候,错误处理了边界条件,比如一个 url 被重复拼写了 path 后缀,典型的如 /alipay//icon/icon/1
1.3解决方案
请检查站点的配置,确认对应资源存在且可访问。
1.3.1 如何避免发生该错误
○谨慎地进行文件删除操作。当在服务器上进行文件或文件夹的删除操作时,请务必确认该文件没有被引用。最简单的办法,你可以全局搜索该文件名进行确认。
○小心文件的移动操作。当你在服务器上进行文件移动操作时,确认引用该文件的代码被同步修改。
○修改文件时也要确认依赖的文件路径是正确的。当进行文件修改时,请确保修改后对资源路径的依赖是正确的。
○当心 URL 拼写/拼接 错误。简单的拼写错误多数会在调试时被发现,要特别小心动态拼接的 URL 的边界条件处理,不要拼接了一个不存在的地址。
更多小程序质量提优能力可前往质量洞察或全息检测查看。