如何分析SAP UI5应用的undefined is not a function错误

Recently I meet with an annoying Javascript error “undefined is not a function” during my Fiori development. After debugging the framework code for several hours

, I finally find a more efficient way to find the exact source code which causes the trouble. I would like to share this small tip with you and hope it could help.

Issue: When I am doing test on my application on a local tomcat, I could only see an empty screen.

For sure there must be some Javascript error occurred.

Open Chrome console and I see one Uncaught TypeError: undefined is not a function as expected.

Unfortunately this error is raised in UI5 framework js “UIComponent.js”, after I click the hyperlink in the screenshot above, I am automatically navigated to this file, however I do completely not understand what has happened here, in function ( q, C, U, V ).

Then I press Ctrl+Alt+Shift+P to switch on debug by marking checkbox “Use Debug Sources”.

Refresh UI and now the debug resource, UIComponent-dbg.js is loaded instead. Since what I bad need is the context of this error, or callstack, so I set a breakpoint on catch statement, line 47. Relaunch application UI and breakpoint is triggered. I add variable e in Watch Expression:

Expand variable e in Watch Expressions and put the mouse to stack. The complete callstack is instantly displayed. The topmost callstack shows the error occurs in line 154, column 36 of file ConnectionManager-dbg.js:

Then I find the root cause here:

the variable service.serviceUrl is not a String but an object of URI which does not have a method named “indexOf”:

Conclusion

Although this error is raised in UI framework js file, it is however an absolute application issue: the url of OData is defined in Configuration.js file by application as metadata, and UI framework in the runtime will ask for it by calling some callback functions defined by application and then consume it. Framework will assume always a String for OData service url returned by application. After the following fix is done on application, the issue is fixed.

Any other alternative solution?

Later on I find another approach to find the position ( line 154, column 36 ) even without debugging.

I test my app with Firefox. To my surprise, it could directly display more detail about this error compared with Chrome: “j.serviceUrl.indexOf is not a function”.

The Firefox console shows this error occurs in sap-ui-core.js line 80

However I could not find any hit by searching “indexOf” within this file.

So I just again switch to Chrome and search serviceUrl.indexOf in Chrome instead, this time I get directly what I am looking for.

From this cause it seems that these two complementary powerful tool, Chrome and Firefox, could make our life as UI5 developer more easier.