Ionic 3 Infinite Scroll 'cannot read property timestamp of null'

Question

So I am using infinite scroll to load a very large reactive form in bits. However I've noticed that if a form input event is triggered while the infinite scroll is loading other items this happens.

    ERROR TypeError: Cannot read property 'timeStamp' of null
    at InfiniteScroll._onScroll (infinite-scroll.js:229)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitterProxy.Subject.next (Subject.js:55)
    at EventEmitterProxy.EventEmitter.emit (core.es5.js:3621)
    at ScrollView.scroll.onScroll (content.js:378)
    at ScrollView.setScrolling (scroll-view.js:52)
    at ScrollView.scrollTo (scroll-view.js:401)
    at Content.scrollTo (content.js:433)
    at TextInput._jsSetFocus (input.js:524)
    at TextInput._pointerEnd (input.js:496)
    at Object.eval [as handleEvent] (TextInput.ngfactory.js:130)
    at Object.handleEvent (core.es5.js:11998)
    at Object.handleEvent (core.es5.js:12717)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:9228
    at HTMLDivElement.<anonymous> (platform-browser.es5.js:2648)
    at HTMLDivElement.wrapped (raven.js:350)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:3881)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at HTMLDivElement.v (polyfills.js:2)
    console.(anonymous function)    @   console.js:32
    defaultErrorLogger  @   core.es5.js:1020
    ErrorHandler.handleError    @   core.es5.js:1080
    IonicErrorHandler.handleError   @   ionic-error-handler.js:61
    webpackJsonp.381.SentryErrorHandler.handleError @   sentry-
    errorhandler.ts:11
    (anonymous) @   core.es5.js:9232
    (anonymous) @   platform-browser.es5.js:2648
    wrapped @   raven.js:350
    t.invokeTask    @   polyfills.js:3
    onInvokeTask    @   core.es5.js:3881
    t.invokeTask    @   polyfills.js:3
    r.runTask   @   polyfills.js:3
    e.invokeTask    @   polyfills.js:3
    p   @   polyfills.js:2
    v   @   polyfills.js:2

It's really driving me crazy because not even a try catch can stop this error from crashing the app. Please I need help!!

Answer 1

This is a current ionic issue, that unfortunately doesn't look like it will be patched before v4.

bug(infinite-scroll): throws uncatchable error if scrollToTop is called before it is resolved

The quickest way to try and avoid the issue (it doesn't work everytime) is to wrap a setTimeout around the scrollToTop / scrollToBottom

setTimeout(function(){
    this.content.scrollToBottom()
},200);

Answer 2

I was experiencing a similar issue, ran into this:

TypeError: Cannot read property 'enableEvents' of null at EventEmitterProxy.enableScrollListener [as onSubscribe]

This would happen intermittently after a function on a different Ionic page that refreshed external content within our app. I never figured out exactly why, but I noticed that it was only happening when the infinite-scroll had been triggered at some point during user interaction with the original page.

In our case, I was setting the InfiniteScroll instance to a local, component-level variable so that I could use the .enable() hooks programmatically in other functions, like so:

VIEW:

<ion-infinite-scroll (ionInfinite)="lazyLoad($event)"> ...

CONTROLLER:

  public lazyLoad(infiniteScroll: InfiniteScroll) { 
     // ASSIGN THE LAZY LOADER INSTANCE ON FIRST RUN SO IT CAN BE ENABLED / DISABLED ELSEWHERE
     this.lazyLoader = infiniteScroll;
     ....
  }

But, then we would run into the above TypeError randomly when refreshing content, so it was almost like there was a call somewhere trying to reference that variable. So I just set the variable to null when the page left the view, and now it works. Weirdness.

(NOTE: all calls to the instance of InfiniteScroll were wrapped in an if (this.lazyLoader && this.lazyLoader !== null) gate to begin with so I'm not really sure what went wrong)

  ionViewWillLeave() {
     this.lazyLoader = null;
  }