Question

我有一个Ionic应用程序。它运作好几周，然后停止。我得到了闪屏，然后是白色的死亡画面。当我使用chrome：// inspect调试应用程序时，我在控制台中收到以下消息：

未找到Content-Security-Policy元标记。请在使用时添加一个 cordova-plugin-whitelist插件。

如果我清除了我的应用程序上的所有数据，它就会开始工作，当我在另一台设备上调试工作应用程序时，我收到相同的消息，所以我不认为这是插件有问题。但是，我使用该插件来探索白屏问题，因为如果我将以下内容添加到我的index.html（一种阻止从任何来源加载资源的内容安全策略），我可以获得白屏死机：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'">

当我这样做时，我在控制台中收到如下错误消息：

拒绝加载样式表 'file：///android_asset/www/lib/ionic/css/ionic.min.css'因为它违反了以下内容安全策略指令：“default-src 'none'“。注意'style-src'没有明确设置，所以 'default-src'用作后备

当我将标签更改为：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

我在我的控制台中得到了这个：

拒绝应用内联样式，因为它违反了..etc

我也得到了

EvalError：拒绝将字符串评估为JavaScript，因为 'unsafe-eval'不是允许的脚本源......等等“

但是现在，我的异常处理程序正在捕获问题并进行报告，而不是白屏。

据此，我推断缺少文件会导致我的白屏，因为如果加载了所有文件，我的异常处理程序就会起作用。

我可以使用此安全策略清除控制台中的所有错误：

<meta http-equiv="Content-Security-Policy" 
          content="style-src 'self' ionic.bundle.min.js 'unsafe-inline';
                   script-src 'self' console-via-logger.js 'unsafe-eval';
                   img-src 'self' ionic.bundle.min.js data:">

所以我想知道是否有办法在早期阶段捕获我的应用程序中的异常，以便我可以诊断原始的白屏问题？我认为数据必须是防止文件被加载的东西，但是怎么可能呢？

Answer 1

为了测试Kerri Shotts理论，即JavaScript错误会影响应用启动，我在我的app.js文件中添加了throw：

(function () {
    'use strict';

    throw ('test');

    //setting up the dependencies
    var app = angular.module('app', [..etc..]
    ]);

})();

果然 - 白死的屏幕

接下来，我将window.onerror脚本添加到我的index.html：

<body data-ng-app="app">
    <script>
        (function () {
            window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
                alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
                + ' Column: ' + column + ' StackTrace: ' + errorObj);
            }
        }());
    </script>
    ....etc

我必须在内容安全策略中添加'unsafe-inline'才能运行该脚本，但是一旦我这样做，我就会收到一条警告，其中包含错误消息，而不仅仅是白屏。

我的CSP：

<meta http-equiv="Content-Security-Policy"
          content="style-src 'self' ionic.bundle.min.js 'unsafe-inline';
                   script-src 'self' console-via-logger.js 'unsafe-eval' 'unsafe-inline';
                   img-src 'self' ionic.bundle.min.js data:">

如何找出造成白死病的原因？

1 个答案: