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.

/wp-content/uploads/2014/12/clipboard1_606491.png

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

/wp-content/uploads/2014/12/clipboard2_606492.png

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 ).

/wp-content/uploads/2014/12/clipboard3_606493.png

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

/wp-content/uploads/2014/12/clipboard4_606494.png


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:

/wp-content/uploads/2014/12/clipboard5_606495.png

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:

/wp-content/uploads/2014/12/clipboard6_606496.png

Then I find the root cause here:

/wp-content/uploads/2014/12/clipboard7_606497.png

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

/wp-content/uploads/2014/12/clipboard8_606498.png

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.

/wp-content/uploads/2014/12/clipboard9_606499.png

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”.

/wp-content/uploads/2014/12/clipboard10_606500.png

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

/wp-content/uploads/2014/12/clipboard11_606501.png


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

/wp-content/uploads/2014/12/clipboard12_606502.png

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

/wp-content/uploads/2014/12/clipboard13_606506.png

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

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply