SAP UI5应用白屏的原因分析

Today I am working on another incident and I get to know another kind of reason which will lead to empty screen issue in UI. My previous experience for potential reason of empty screen issue is, there must be some JavaScript execution error which causes the UI ceases to render.

The issue I am working on today: Say in system A when I try to create a follow up Opportunity based on a lead,

I could only see an empty screen. However in another system B, the followup navigation works correctly.

My issue analysis process

Step1. Check whether there are JavaScript error in console

During my past issue handling life, every time I find JavaScript error in console, I then realize the error is caused by the bug in our code, I fix the bug, then empty screen issue is gone. Unfortunately for this issue, there are not JavaScript error in console at all. All messages you see here is printed out via jQuery.sap.assert, which will not stop UI rendering.

Meanwhile I have also checked in system B where the navigation from Lead to Opportunity application works correctly with these same assertion message displayed. So the messages here should NEVER be considered as issue root cause.

Note: The screenshot of this blog with white background color are made from system A ( navigation DOES NOT work ), and the one with black background color from system B ( navigation works ).

Step2. Compare what resources have been loaded in both systems

In our system B, the creation page of Opportunity, S5.view.xml and S5.controller.js have been successfully loaded, which could be found in console tab:

However in system A, S5.controller.js is not there. So this hint should be used as a breakthrough for finding root cause.

Step3. Find out why S5.controller.js fails to be loaded in system A

You don’t know where to set breakpoint to start debugging? In system B where the navigation from Lead to Opportunity can work, type “S5.” in Network filter to filter the HTTP request to load S5.view.xml, then hover your mouse under column “Initiator”. Then the callstack to download this xml file is displayed. Just click any one of callstack frame and you will automatically reach the position of source code.

Then you can set breakpoint and start debugging.

Step4. Debug in both systems simultaneously to compare the difference

In this line the expected navigation target is parsed from route configuration.

Brief introduction on screenshot above:

(1) route configuration is provided by application code Component.js or in manifest.json in higher UI5 version. In Opportunity application, the route configuration is defined in Component.js.

(2) The pattern with name “FollowupFromLead” in above picture has successfully matched to the input hash string: followupfromlead/Leads(guid’3440B5B1-73AE-1EE5-9DC6-FB90180B87AA’)/OPPT

And when I debug in system A, I find I enter the ELSE branch:

The warning message in console has already told us the root cause: It is application’s fault that it fails to provide a target UI to render.

Just compare the two Component.js in both systems and I find the root cause. There is a note which adds route “FollowupFromLead” which is missing in system A. Once the note is applied, the empty screen issue will be resolved.