How to debug Ext JS 4 error in console

Question

One of the bug is not allowing the application to load fully. Error message is very generics which doesn't say clearly the module which has that issue :

Uncaught TypeError: Cannot read property 'data' of null
Uncaught TypeError: Cannot read property 'data' of null ext-all-debug.js:62557 Ext.define.setLabels ext-all-debug.js:62557 Ext.define.applyData ext-all-debug.js:62578 Ext.define.drawAxis ext-all-debug.js:61899 Ext.define.redraw ext-all-debug.js:60442 Ext.define.afterComponentLayout ext-all-debug.js:60382 Ext.define.notifyOwner ext-all-debug.js:37353 Ext.define.callLayout ext-all-debug.js:119598 Ext.define.flushLayouts ext-all-debug.js:119767 Ext.define.runComplete ext-all-debug.js:120253 callOverrideParent ext-all-debug.js:39 Base.implement.callParent ext-all-debug.js:4266 Ext.override.runComplete ext-all-debug.js:29267 Ext.define.run ext-all-debug.js:120234 Ext.define.statics.flushLayouts ext-all-debug.js:29275 Ext.define.statics.resumeLayouts ext-all-debug.js:29283 Ext.resumeLayouts ext-all-debug.js:31760 Ext.define.render ext-all-debug.js:28510 Ext.define.constructor ext-all-debug.js:29579 Base.implement.callParent ext-all-debug.js:4266 Ext.define.constructor ext-all-debug.js:33595 constructor ext-all-debug.js:4897 (anonymous function) Ext.ClassManager.instantiate ext-all-debug.js:5485 (anonymous function) ext-all-debug.js:2112 Ext.apply.create ext-all-debug.js:3788 Ext.define.initViewport ext-all-debug.js:57187 Ext.define.onBeforeLaunch ext-all-debug.js:57159 Ext.define.constructor ext-all-debug.js:57099 constructor ext-all-debug.js:4897 (anonymous function) ext-all-debug.js:7794 createSingle ext-all-debug.js:9863 fire ext-all-debug.js:9818 Ext.apply.readyEvent.readyEvent.fire ext-all-debug.js:10052 Ext.apply.fireReadyEvent ext-all-debug.js:10130 Ext.apply.onDocumentReady ext-all-debug.js:10148 Ext.apply.onReady.fn ext-all-debug.js:6658 Ext.apply.triggerReady ext-all-debug.js:6644 Ext.apply.refreshQueue ext-all-debug.js:6177 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.refreshQueue ext-all-debug.js:6207 Ext.apply.onFileLoaded ext-all-debug.js:6587 (anonymous function) ext-all-debug.js:2105 Ext.apply.injectScriptElement.onLoadFn

The error points to the ext-all-debug.js file. How do I find out which file of my application it points to ?

Tried to debug through inspector; but was not fruitful.

This is typically the kind of errors you get. I think after a while you just come to understand what certain things mean. If I were troubleshooting your application, I would assume it has something to do with a store and its reader and/or model. Posting your code would be helpful rather than just posting the error. — Jeff Shaver

Alex Tokarev Alex Tokarev · Accepted Answer · 2013-08-27T18:56:07

ext-all-debug.js is the compilation of all Ext JS classes available in the framework. When you're debugging your app, it is much easier to use ext-dev.js instead; this file contains only the core, and all other classes are loaded dynamically using Ext.Loader. Note that just switching to ext-dev.js will not eliminate the bug, but it will allow you to pinpoint its location easy and quick.

It is also beneficial to set the browser debugger to break on unhandled exceptions. Combined with dynamic loading, you'll get a breakpoint right where the error is, and you can see immediately which class and method that is. This, the stack trace, and the scope variables should give you enough clues to find the cause for the exception.

I would also recommend taking a look at Sencha Cmd, it can help you with managing the build process for your application.

How to debug Ext JS 4 error in console

1 Answers