locked
Unhandled exception at line 23269, column 25 in ms-appx://microsoft.winjs.2.0/js/ui.js 0x800a138f - JavaScript runtime error: Unable to get property 'firstIndexDisplayed' of undefined or null reference

    Question

  • Hi, 

    I am trying to create a navigation app with 2 pages. (Page A and search result Page)

    Page A -> Pulls a list of photos from the Picture Library and displays in a list view. When user searching for some of the images, it navigates to search result Page.

    The navigation works fine and i see the search result. 

    When I click on the back button on the search result Page i get back to the Page A. The problem is here. 

    I get the following unhandled exception:

       SCRIPT5007: Unhandled exception at line 23142, column 25 in ms-appx://microsoft.winjs.2.0/js/ui.js
    0x800a138f - JavaScript runtime error: Unable to get property 'dataSource' of undefined or null reference
       File: ui.js, Line: 23269, Column: 25

    The issues seems to be here

                    indexOfFirstVisible: {
                        get: function () {
                            return this._view.firstIndexDisplayed;
                        },

    I thing this._view would be NULL, and it occurs frequently when adding 20000+ images to listview and search * in the searching charm.

    However, what can I do if this._view is NULL?

    Thanks so much.

    Nick

    Monday, October 27, 2014 8:23 AM

Answers

  • Hello,

    One potential issue I'm able to spot is that you're not keeping the Promise chain intact. When working with async operations (Promises in this context), one must be careful with the operation chains (ie. when to return Promise). You could try out adding the 'return' to your code:

     renderComplete: itemPromise.then(function (item) {
                    ...
                    return item.ready;
                }).then(function (item) {
                        return WinJS.UI.StorageDataSource.loadThumbnail(item, contentImg);
                 });

    Without the 'return' here, the renderComplete is marked as done even though loadThumbnail() operation is still ongoing, and this might lead to the problem you're experiencing since ListView itself cannot cancel the rendering work anymore since it has not control over the work done by loadThumbnail(). 

    Not 100% sure about this though, and there might be a valid reason for you to *not* return the loadThumbnail() Promise (= delayed rendering of the image). In this case, I'd suggest adding .done() with an error handler to the end of such Promise chain which can break:

    }).then(function (item) {
          WinJS.UI.StorageDataSource.loadThumbnail(item, contentImg)
              .done(null, function onError(err) {
                  // error occurred, could log it here. Don't let the error get thrown further, that would crash the application.
              });
          });
    Just don't combine these approaches blindly, returning the Promise with a .done() stops the Promise chain there and you've got a new problem in your lap.


    Tuesday, November 04, 2014 4:37 PM

All replies

  • try/catch around that, and if an exception is caught, reload the images.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, October 27, 2014 7:33 PM
    Moderator
  • Hi Matt,

    After debugging for this issue, I caught an exception like this:

    As we can see this Listview winControl object seems has been disposed. (_disposed is true). 

    So in this function indexOfFirstVisible: {
                        get: function () {
                            return this._view.firstIndexDisplayed;
                        },

    this._view is NULL

    The exception breaks in ui.js, and I cannot add try/catch block in this file.

    Even here I found this issue occurs during using WinJS.UI.StorageDataSource.loadThumbnail(...) in Listview template renderer function.

    I found the exception occurs just when the items update thumbnail in one listview, and then navigate to another page immediately.

    Maybe the async function WinJS.UI.StorageDataSource.loadThumbnail(...) requires items in listview, but the listview object has been disposed. (I guess so...)

    I cannot solve this problem even adding try/catch block around WinJS.UI.StorageDataSource.loadThumbnail(...)

    Please help me, thanks so much.

    Nick

    Thursday, October 30, 2014 1:56 AM
  • Why replies lost???

    I have tried to get the exception here:

    Here is the code ui.js (line: 24481), and the listview winControl object has been disposed(_disposed is true). (I guess so...)

    This issue occurs in this situation:

    I have a WinJS.UI.StorageDataSource.loadThumbnail(...) used in listview item template renderer function.

    Like this:

    function customTemplateRenderer(itemPromise) {
            var element = document.createElement("div");
            element.className = "item";
            WinJS.Utilities.setInnerHTMLUnsafe(element, "<img class='item-image'");
            var contentImg = element.querySelector(".item-image");

            return {
                element: element,
                renderComplete: itemPromise.then(function (item) {
                    ...
                    return item.ready;
                }).then(function (item) {

                        WinJS.UI.StorageDataSource.loadThumbnail(item, contentImg);
                 });

    I see the WinJS.UI.StorageDataSource.loadThumbnail(..) is the asynchronous function and it will update thumbnail of items in listview.

    However, maybe this will occur NULL exception during updating the item in listview and then the listview object has been disposed. (Page A navigate to Page B).

    I cannot add try/catch block in ui.js, and I cannot catch the exception even adding try/catch around WinJS.UI.StorageDataSource.loadThumbnail(..)

    Please help me.

    Thanks so much!

    Nick

    Friday, October 31, 2014 1:57 AM
  • Hello,

    One potential issue I'm able to spot is that you're not keeping the Promise chain intact. When working with async operations (Promises in this context), one must be careful with the operation chains (ie. when to return Promise). You could try out adding the 'return' to your code:

     renderComplete: itemPromise.then(function (item) {
                    ...
                    return item.ready;
                }).then(function (item) {
                        return WinJS.UI.StorageDataSource.loadThumbnail(item, contentImg);
                 });

    Without the 'return' here, the renderComplete is marked as done even though loadThumbnail() operation is still ongoing, and this might lead to the problem you're experiencing since ListView itself cannot cancel the rendering work anymore since it has not control over the work done by loadThumbnail(). 

    Not 100% sure about this though, and there might be a valid reason for you to *not* return the loadThumbnail() Promise (= delayed rendering of the image). In this case, I'd suggest adding .done() with an error handler to the end of such Promise chain which can break:

    }).then(function (item) {
          WinJS.UI.StorageDataSource.loadThumbnail(item, contentImg)
              .done(null, function onError(err) {
                  // error occurred, could log it here. Don't let the error get thrown further, that would crash the application.
              });
          });
    Just don't combine these approaches blindly, returning the Promise with a .done() stops the Promise chain there and you've got a new problem in your lap.


    Tuesday, November 04, 2014 4:37 PM