How to find out what is causing my white screen of death?

Question

I have an Ionic app. It's works well for a couple of weeks, then it stops. I get the splash screen followed by the white screen of death. When I debug using chrome://inspect into the app I get the following message in the console:

No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

If I clear all data on my app, it starts working, and I get the same message when I debug a working app on another device, so I don't think it's the plugin at fault. However, I have used the plugin to explore the white-screen problem, because I can get the white screen of death if I add the following to my index.html (a content security policy that prevents loading resources from any source):

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

When I do that, I get error messages like this in the console:

Refused to load the stylesheet 'file:///android_asset/www/lib/ionic/css/ionic.min.css' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback

And when I change the tag to this:

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

I get this in my console:

Refused to apply inline style because it violates the..etc

And I also get

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script...etc"

But now, instead of a white screen, my exception handler is catching the problem and reporting it.

From this, I deduce that the absence of files causes my white screen, because my exception handler works if all files are loaded.

I can get rid of all errors in my console using this security policy:

<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:">

So I am wondering if there is a way to catch the exception in my application at an earlier stage so that I can diagnose the original white-screen problem? I think it must be something in the data preventing a file being loaded, but how could that be?

have you checked out the solutions mentioned in http://stackoverflow.com/questions/30212306/no-content-security-policy-meta-tag-found-error-in-my-phonegap-application — Sa E Chowdary, Nov 10 '16 at 13:15
Yes. I understand that I should add a CSP to make the console error go away, but I don't need to filter any navigations, because I only navigate to the default `file://` URLs. What I really would like to know is if there is a way to catch the exception in my application at an earlier stage so that I can diagnose my problem - which I can simulate using a CSP — Colin, Nov 10 '16 at 14:11
The error you are encountered probably isn't being related to CSP -- just because you can simulate it with CSP doesn't mean it is the same failure as you otherwise experience. My guess is that you're encountering a JavaScript error that's getting in the way of app startup. You could attach a global handler like `window.onerror=function(...)` that generated an alert when the error occurs. Or, if you have a debugger attached, try `window.location.reload()` to trigger a restart of your app and see what gets logged to your console. — Kerri Shotts, Nov 10 '16 at 17:07
You could use good old logcat by using the android monitor(can be opened by clicking on the monitor windows batch file in the tools directory in the android sdk) to go through the logs — Akil, Nov 11 '16 at 11:43
@KerriShotts I have taken your suggestion and written it up in an answer — Colin, Nov 14 '16 at 14:08

score 0 · Accepted Answer · answered Nov 14 '16 at 14:06

To test Kerri Shotts theory that a JavaScript error is getting in the way of app startup, I added a throw to my app.js file:

(function () {
    'use strict';

    throw ('test');

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

})();

Sure enough - white screen of death

Next I added the window.onerror script to my 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

I had to add 'unsafe-inline' to the Content Security Policy to get that script to run, but once I did that I got an alert with the error message instead of just a white screen.

My 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:">

How to find out what is causing my white screen of death?

1 Answers1