钉钉App Chrome内核升级后，vue2项目运行白屏的排查思路及过程

一、钉钉APP历经万难，终于升级内核

钉钉近期正在升级Android端UC内核，从基于chrome57的UC2.0内核升级至基于chrome69的UC3.0内核，并计划于5月20日全量。由于内核升级影响面较大，应用需要进行全面回归测试。如在回归测试时发现问题，请及时反馈，非常感谢开发者的配合和支持。

距离上一次钉钉升级Chrome Android内核，已经过去了1200多天。时隔三年多，钉钉终于将Chrome 69升级到了Chrome 100。（虽然还是一个两年前的版本╮(╯▽╰)╭）

开发者，您好：
目前安卓钉钉使用基于Chrome 69的浏览器内核，为了增强安全性以及支持新标准，钉钉团队已展开内核升级到Chrome100的相关工作，经过近期灰度放量稳定，即将全量上线安卓钉钉客户端，请再次确认您的应用已在如下测试包中完成兼容性验证。

二、H5微应用白屏异常

接到同事反馈，Android钉钉打开H5微应用后页面展示空白(效果大概如下图)，而我这边访问是正常的。经过短暂沟通后得知：同事用的是7.1.10版本，而我用的是7.1.2版本。当我升级版本后，也无法打开页面。

于是第一时间先访问了钉钉开发平台后台，查看是否有相关公告信息，遂看到开头部分的钉钉内核升级公告。往常都是因为浏览器内核版本过低导致的不兼容白屏，这还是第一次遇到因为浏览器内核版本升级而导致无法访问的。

三、排错之路

3.1、验证JS运行情况

首先装了上了vConsole插件，查看页面上是否产生了相关报错，同时增加了一行测试代码console.log('hello')，以验证页面是否可以正常执行JS。

1
2
3
4
5
6

<script type="text/javascript" src="<%= BASE_URL %>vconsole.min.js"></script>
<script>
    // VConsole will be exported to `window.VConsole` by default.
    var vConsole = new window.VConsole();
    console.log('hello')
</script>

最后在Vue的入口文件main.js中，也增加一行测试代码console.log('hello vue')，以验证vue是否可以正常运行。

1
2

// main.js
console.log('hello vue')

测试结果：
（1）index.html中的JS可正常执行
（2）vue部分的JS代码未执行

以往的情况，这时候应该会在vConsole的控制台中看到一些红色的错误信息，但这次是没有任何报错的，有点懵逼。

3.2、尝试全局错误捕获

在index.html中加入以下代码，尝试捕获页面的其他报错信息。

1
2
3
4
5
6
7
8

<script>
    window.onerror = (message, source, lineno, colno, error) => {
        console.log(message, source, lineno, colno, error);
    }
    window.addEventListener('unhandledrejection', (event) => {
        console.error(event.reason);
    })
</script>

终于看到报错信息了：**Uncaught ReferenceError: Plugin is not defined webpack-internal:///./src/request/axios.js 181 1 {}**。

翻到对应的请求代码段，发现**Plugin**没有提前进行声明！于是在开头加上了一行声明，问题解决。

1

const Plugin = {}

重新启动项目之后，页面能够正常展示了。