专栏首页Jerry的SAP技术分享如何分析SAP UI5应用的undefined is not a function错误

如何分析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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CRM PRODUCT_MAT, BDOC和customer product id修改

    Product HT-1055 is downloaded from ERP. When you make changes in CRM for example...

    Jerry Wang
  • Implement CGLIB in ABAP

    What is cglib?A Byte Code Generation Library which is high level API to generate...

    Jerry Wang
  • 使用SAP CRM中间件从ERP下载Customer的错误消息:Distribution channel is not allowed for sales organization

    Distribution channel is not allowed for sales organization

    Jerry Wang
  • CRM PRODUCT_MAT, BDOC和customer product id修改

    Product HT-1055 is downloaded from ERP. When you make changes in CRM for example...

    Jerry Wang
  • Implement CGLIB in ABAP

    What is cglib?A Byte Code Generation Library which is high level API to generate...

    Jerry Wang
  • Python Algorithms - C8 Dynamic Programming

    Python算法设计篇(8) Chapter 8 Tangled Dependencies and Memoization

    宅男潇涧
  • SAP Analytics Path Framework的filter实现原理分析

    I am recently doing self study on Analytics Path Framework and as a beginner I h...

    Jerry Wang
  • SAP CRM产品主数据搜索功能的With individual object搜索参数

    By default this search parameter is not visible in search view.

    Jerry Wang
  • ABAP 740里的新语法 - LET表达式

    A LET expression defines variables var1, var2, … or field symbols , , … as local...

    Jerry Wang
  • Chrome开发者工具Network标签页中观察到的set-cookie jsessionid是什么东西

    根据Google搜索的结果: https://javarevisited.blogspot.com/2012/08/what-is-jsessionid-in...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券