RN-Error: undefined is not an object (evaluating 'this.feed.stop')

I have tried the sample application (React Native and Couchbase lite) that was provided in below link

When I navigate the screen between Lists and List Details continuously, following error is occurred on every 5th to 8th attempt in ListDetail> index.js on ComponentWillUnmount,
“undefined is not an object (evaluating ‘this.feed.stop’)”

` componentWillMount() {
console.log(‘ListDetail mounted’);
this.setupQueries();
manager.database.get_db({db: DB_NAME})
.then(res => {
this.feed = new Feed(res.obj.update_seq, () => {
this.setupQueries();
});
console.log(‘ListDetail mounted Feed:’+this.feed);
});
}

componentWillUnmount() {
console.log(‘ListDetail unmounted’);
console.log(‘ListDetail unmounted Feed:’+this.feed);
this.feed.stop();
}`

Log message:
Attempt 7:
ListDetail mounted
ListDetail mounted Feed:[object Object]
ListDetail unmounted
ListDetail unmounted Feed:[object Object]
Attempt : 8
ListDetail mounted
ListDetail unmounted
ListDetail unmounted Feed:undefined
undefined is not an object (evaluating ‘this.feed.stop’) <=== Error
ListDetail mounted Feed:[object Object]
Error: undefined is not an object (evaluating ‘this.feed.stop’)

From the above log it shows in componentWillMount(), Feed is initialized after some delay (say 10 sec) and if the componentWillUnmount is triggered within this time period (<10sec) the reported error appears. This delay time is not consistant. Further more i observed that if i set feed heartbeat as ‘1 min’, the delay is between 10 sec to 50 sec, and if i set heartbeat as ‘15 min’, then the delay period is very high and the screen stays blank until the feed initialized.

Also I observed the same error in my own application. The application contains drawer with two menu item and each menu item displays the List page, and the list is updated by Feed (longpoll). If i navigate between this two menu item, on every fifth attempt the list page wasn’t rendered, and on the sixth attempt observed the error "Error: undefined is not an object (evaluating ‘this.feed.stop’) ", as a result i couldn’t proceed using Couchbaselite with Reactnative.

Any suggestions to overcome this issue.

It’s perhaps the registration of multiple changes feed that is causing the issue. Ideally, the app should register a single changes feed and reuse it across the app (list screen, list detail screen). I’m not sure which lifecycle event in react native would allow us to do this. The mobile-training-todo is a simple example and as you found out, it doesn’t handle the changes feed pattern very well.

@jamiltz, Thank you for the background information.

Storing the feedchanges flag using the react state management like redux or mobx solves the issue.

I have used mobx and added below code line inside ‘initRESTClient’ call, so that we will have only one feed instance for the App.

    Couchbase.initRESTClient(manager => {
         DataManager.init(manager);
         manager.database.get_db({db: DB_NAME})
         .then(res => {
            this.feed = new Feed(res.obj.update_seq, () => {
            this.props.appStore.data({isFeedChange:true});
      });
  });

Then added below code line in List Component and it works fine.

if(this.props.appStore.isFeedChange){
  this.props.appStore.data({isFeedChange:false});
  this._refreshList();
}
1 Like