How to quickly locate the code error in application which causes UI stop to load

Issue description: when you are launching Fiori UI, there is some Javascript error occurred. The UI stops the rendering, you could only see blank screen. However, in Chrome development tool it shows the error occurs in the framework library file, in my example it is UIComponent.js. How to react to this situation?

put the mouse onto the framework library, and it is available to click:

Then you will be automatically navigated to the exact line of source code in framework library file where the exception is raised. Set a  breakpoint there.

Then breakpoint is triggered. However, from the callstack in the right part, you still cannot figure out what is wrong in application – there is no stack related to application – all of them are framework stuff.

Don’t worry! Type “e” in Watch tab to inspect the content of exception object e. In its attribute stack there is (…). Single click it:

And this callstack containing Fiori application “crm_mycal” is just what I am looking for. The exact line number 862 in the file NewAppointment.controller.js is also mentioned there.

Now I can immediately find out the root cause: in line 861, the responsible employee of current log on user is returned and stored in variable oEmpResp. If current user didn’t assign any responsible employee, oEmpesp will be initial and the subsequent access in line 862 will lead to the error “Cannot read property ‘PartnerNo’ of undefined” mentioned in the beginning of this blog.