前言

记录一下踩到的坑

苹果手机所有浏览器打开主页一片空白,PC 端、安卓手机正常!?

问题定位

一开始我以为是安全连接的问题,测试了一下只有主页有问题就排除了。

然后继续测试主页的每个组件发现在Blog组件中出了问题。

这时我错误的以为使用 webpack 的动态 import 有问题,然后单独用简单的用例测试了一下发现没有问题。

继续定位错误发现是使用了Permison对象的finally()方法(finally()方法在 Safari on iOS 11.1 的版本才支持)但没有 polyfill 她,然后她就傲娇了。。

问题解决

  • 首先先使用了babel-polyfill
  • 然后我想起了以前看文档见过有一种给 React 组件捕获异常的技术,也就一起使用上了。
  • 最后为了方便以后定位和分析错误,写了将前端错误发送到服务端的方法。

这里涉及到了几个要注意的点

UIWebView

苹果手机中 Safari 打不开的页面,其他应用中的 WebView 也打不开(这就是一句废话)。

还有我测试的时候 Firefox 的行为就和 Safari 套了个壳一样。。

有待进一步查证,下面是一些资料:

React Error Boundaries

这是 React 16 中提出的概念,当一个组件的子组件渲染失败时捕获到错误,并显示替代的组件(通常是错误的提示)。这样就可以将错误限制在当前组件这个边界里,不会让整个页面都不渲染了。

参见:Error Boundaries – React

发送前端错误到服务端

移动端真机调试是比较麻烦的,所以为了定位很分析错误将错误发送到服务端是非常必要的,这里为了方便我直接用了Bmob 后端云的云数据库(如果有幸被 Bmob 的人看到麻烦付下广告费😂)。

这个虽然叫云数据库但用法是前端直接掉接口数据库就修改了,验证信息都是写在 JS 里的(自认为不适合网站类的项目用,没法保证安全)。

iOS Safari 调试(待测试)