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.

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

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

SAP UI5 应用开发教程之三十九 - SAP UI5 应用出现白屏的一些常见错误和分析方法分享试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之三十九 - SAP UI5 应用出现白屏的一些常见错误和分析方法分享
SAP UI5 应用开发完毕后,加载时没有显示任何内容,只有一个白茫茫的空白屏幕(blank screen),无疑是让很多 SAP UI5 开发人员感到沮丧的事情. 然而这种白屏总是伴随着浏览器(比如 ...
使用工具分析 SAP UI5 应用前端执行的性能问题
这是 Jerry 2021 年的第 66 篇文章,也是汪子熙公众号总共第 343 篇原创文章. 国庆黄金周开始的前一天,9月30日,我所在的开发团队收到了一个关于 Angular 应用的服务器端渲染( ...
对 SAP UI5 应用使用 uiveri5 执行测试的 ERR_CONNECTION_REFUSED 错误
错误消息如下图所示: INFO: Expectation FAILED: Failed: javascript error: UI5 dependencies are not loaded on th ...
如何修复 SAP UI5 aggregation with cardinality 0..1 相关的错误消息
错误消息: Assertion failed: multiple aggregates defined for aggregation with cardinality 0-1 引起该错误的 aggr ...
如何自行分析SAP WebClient UI开发环境里抛出的错误消息根源
In this blog I will demonstrate how I resolve the error message "endless binding loop" rai ...
undefined is not a function错误解决
[javascript] view plain copy 首先我先说一下我遇到的这个问题的情况比如说写for循环的时候的length(),size(),val()等等,如果没有记住什么时候有括号就 ...
H5页面镶嵌到安卓，报错:undefined is not a function错误解决
描述:在网页调试时,没有报错,去安卓端后报错,并且不发送请求,排除安卓端错误后,发现是安卓端不支持FormData.get('url')的函数. 解决思路: 1.逐渐缩小范围,定位问题 2.在该功能的 ...
SAP UI5 应用开发教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明细)布局的实现方式试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

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

Conclusion

Any other alternative solution?

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

最新文章

热门文章