微信H5页面加载失败问题排查

微信H5页面加载失败问题排查

背景

公司有个H5游戏应用,所有游戏通过一个H5中转页统一处理参数,然后根据类型,跳转到不同游戏

H5页面内嵌在小程序web-view中,通过小程序进入

问题描述

有客户反馈H5游戏页面无法成功加载,页面白屏,无任何反应

测试同学在灰度、测试环境均无法复现

小程序日志无报错,H5日志无该用户记录

有一位运营同学手机可以复现,机型为iphoneXr

问题排查定位

找报错信息

页面白屏,往往是有js报错,或者是逻辑不对

我推荐的顺序是,先看页面是否存在报错,再去排除代码逻辑问题

报错往往是直观的,通过报错能迅速定位问题

我直接引入了eruda,这是一个移动端的控制台,在页面入口文件中index.html,参考下方代码

xml 复制代码
<!-- 手机控制台 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

引入后,在运营同学手机上复现问题,可以看到控制台报错

报错信息如下

rust 复制代码
Unexpected token '='. Expected an opening '(' before a method's parameter list .

想办法在本地复现问题

我让这位运营同学在我本地微信开发者工具扫了码,发现我本地可以正常访问。

虽然问题没能复现,但是排除了是这个同学的会员有问题,可能是运行环境导致

我想知道这个同学的运行环境,有两种方法

运行环境

  • 第一种是可以让这个同学在上方报错的控制台中,输入navigator.userAgent,查看运行环境(但由于这个同学在上海我在武汉,这个同学又不是技术,我采取了第二种方法)
  • 第二种是找一个在线获取userAgent的链接,我用的是https://useragent.buyaocha.com/,发到这位同学的微信上,让他点链接后截图

上方蓝圈是我的设备iphone 13 Pro,下方是这位同学的iphone xr。我的可以正常访问,他的白屏。

我对比了一下UA信息,发现只有ios版本有差异,我的是17.1.1,他的是13.6,浏览器内核都是一样的。

我觉得可以排除是内核问题了,从ios版本差异入手排查

查阅资料,我了解到,Safari浏览器的版本,和ios系统主版本是一致的

资料链接:developer.apple.com/documentati...

我现在尝试在本地复现

云模拟机

根据信息,我需要模拟 ios 13.6 系统,模拟器有两种

  • lambdatest

    • 可能需要科学上网
    • 有3次1分钟的免费模拟器测试机会
  • WeTest

    • 腾讯出品
    • 新用户绑定身份证送30分钟测试时间

我使用 ios 13.6真机模拟,复现了问题

问题定位

复现了问题,开始排查

我将报错丢到google里,找到了如下资料

这是由于在Safari 13 中,不支持public field declarations, 也叫做公有字段声明

后来我也佐证了这一点

我通过class关键字,在产物中发现了

而这,正是基于lit的游戏组件

问题找到了

问题解决

将组件库的代码转换成es5,发包

更新组件版本问题就解决了,此时,es5转换后的代码如下图

影响范围

通过 can I use,我们可以发现从15.7之后才被支持,也就是说,ios15以下版本机型会受影响,ios15的默认机型是iphone13

总结

要考虑到代码的兼容性,无论使用babel还是使用polyfill库

相关推荐
qq_3646821516 小时前
录音APP怎么切换语言?多语言版本如何使用
java·服务器·前端
志尊宝16 小时前
AI原生前端开发(037):AI辅助的Vue 3开发最佳实践
前端·vue.js·ai-native
中科三方16 小时前
AI时代新攻击面:悬空DNS记录正在成为黑客的低成本入侵入口
服务器·前端·人工智能
努力变的更好17 小时前
H5与小程序之间的回调
前端·小程序·apache
汤米粥17 小时前
目前流行的前端 CSS 框架
前端·css·bootstrap·ant design·‌tailwind css·bulma
砚凝霜17 小时前
CTF Misc 签到 GXUST·CTF:查看源码 + HTML 注释 + Base64 解码(附 Base64 原理)
前端·html
徐小夕17 小时前
扒了JitWord的源码,我终于搞懂了企业级在线Word到底有多难写
前端·vue.js·github
lily52278317 小时前
工具池与分发
前端·chrome
徐小夕@趣谈前端18 小时前
老旧Word格式全支持!JitWord协同AI文档4.1,让Word文档无缝迁移到Web端
前端·人工智能·word
螺丝钉tina18 小时前
[Playwright][01] 从 Puppeteer 到 Playwright:为什么选择 Playwright + TypeScript?
前端·javascript·typescript