How to debug vague JS errors when using Angular?

Question

I recently started working with Angular, and so far I'm loving the links in the error messages that give you incredible detail about the error.

However, I'm encountering an extremely vague JavaScript error:

TypeError: Cannot read property 'data' of undefined
    at new <anonymous> (ui-grid.min.js:7)
    at Object.invoke (angular.js:4709)
    at R.instance (angular.js:10234)
    at m (angular.js:9147)
    at angular.js:9553
    at angular.js:16170
    at m.$eval (angular.js:17444)
    at m.$digest (angular.js:17257)
    at m.$apply (angular.js:17552)
    at l (angular.js:11697)
    (anonymous function) @ angular.js:13708
    (anonymous function) @ angular.js:10347
    (anonymous function) @ angular.js:16178
    $eval @ angular.js:17444
    $digest @ angular.js:17257
    $apply @ angular.js:17552l 
    @ angular.js:11697K 
    @ angular.js:11903y.onload 
    @ angular.js:11836

Because I'm using ui-grid, data is in a hundred places, I tried to go through one by one to see if anything looks off, but it got so tedious.

What is a good way to debug this error when no code I've written is referenced in the error?

NOTE: I'm not asking how to fix this specific error, or even what this error means. I'm asking how to find what part of my code it is referencing.

load the non-minimized version and it will give you a better line than ":7" — rgthree, Aug 30 '16 at 17:33
I've never used ui-grid, but you could try to make sure that all the parameters passed to ui-grid are correct. — Alberto Rivera, Aug 30 '16 at 17:33
How about creating some kind of service method for getting your data from wherever it's stored, even if it's just a property in an object? You can then include some logging in there, or at the very least you'll get an error that occurs in your code, rather than the grid code. — S. Baggy, Aug 31 '16 at 20:44

score 0 · Answer 1 · answered Aug 30 '16 at 17:33

0

That error typically means you've defined your data object incorrectly, or on the wrong object. It's a standard javascript error, and it says that it's attempting to find the property "data" on an object that is undefined at the time it's trying to access it.

answered Aug 30 '16 at 17:33

ajw4sk

95
2
13

Yes, I understand what the error is saying, what I'm asking is how to debug it. – Travis Heeter Aug 30 '16 at 17:38

score 0 · Answer 2 · answered Aug 30 '16 at 17:43

At first, you are using ui-grid.min.js which does not help much in debugging. Use the ui-grid.js which is helpful for debugging.

To help with the data undefined issue, Have you used it the following way. You could post some code to get more help..

The UI Grid reads the data property from the grid options you have defined.

$scope.gridOptions = {
    showGridFooter: true,
    showColumnFooter: true,
    enableFiltering: true,
    columnDefs: [
        { field: 'name', width: '13%' },
        { field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
        { field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
        { name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
        { name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
        { name: 'customCellTemplate', field: 'age', width: '14%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
        { name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
    ],
    data: data,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
    }
};

The above grid option has data as one of the property which is your grid data.

 <div id="grid1" ui-grid="gridOptions" class="grid"></div>

This is how the gridoptions is connected to the grid in your template.

Thanks, this actually did fix the error, but again, I'm not asking for how to fix the error, I'm asking how to debug errors that bypass the typical angular error-catching. — Travis Heeter, Aug 30 '16 at 17:45
I would use non minified version of the javascript files to be able step into and debug. Cant think of any other way. — Kathir, Aug 30 '16 at 17:50

How to debug vague JS errors when using Angular?

2 Answers2