【小程序质量提优解决方案】(二)内嵌H5加载异常(404)

简介: 【小程序质量提优解决方案】(二)内嵌H5加载异常(404)

一、异常时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 的边界条件处理,不要拼接了一个不存在的地址。

更多小程序质量提优能力可前往质量洞察全息检测查看。


目录
相关文章
|
15天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
1月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
141 1
|
2月前
|
小程序
小程序一直未提审的原因及解决方案
小程序一直未提审的原因及解决方案
27 0
|
20天前
|
移动开发 小程序 前端开发
H5和小程序有什么区别
H5和小程序有什么区别
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。
|
2月前
|
数据采集 机器学习/深度学习 移动开发
uniapp+springboot医院智能导诊系统源码,自动兼容小程序与H5版本
技术架构:Uniapp+springboot+redis+mybatis plus+mysql+RocketMQ
74 0
|
2月前
|
小程序 定位技术 Android开发
小程序质量提升丨定位问题解决方案(错误码11)
小程序质量提升丨定位问题解决方案(错误码11)
28 0
|
2月前
|
小程序
小程序一直未上架的原因及解决方案
小程序一直未上架的原因及解决方案
56 0
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。