Cannot read property 'unsubscribe' of null

Ionic Framework ionic-v3
1

I developed an application with Ionic v3 to a university. It has several functionalities and works fine but when I run in develop mode with either ionic cordova run android --device or ionic cordova run android --release but when I run in production mode it throws a weird error:

vendor.js:formatted:302ERROR Error: Uncaught (in promise): UnsubscriptionError: 1 errors occurred during unsubscription:
  1) TypeError: Cannot read property 'unsubscribe' of null
UnsubscriptionError: 1 errors occurred during unsubscription:
  1) TypeError: Cannot read property 'unsubscribe' of null
    at new e (vendor.js:formatted:56724)
    at e.Subscription.t.unsubscribe (vendor.js:formatted:23830)
    at e.unsubscribe (vendor.js:formatted:17987)
    at e.complete (vendor.js:formatted:18075)
    at e._complete (vendor.js:formatted:18000)
    at e.complete (vendor.js:formatted:17982)
    at e.ScalarObservable.e._subscribe (vendor.js:formatted:56782)
    at e.Observable.t._trySubscribe (vendor.js:formatted:10317)
    at e.Observable.t.subscribe (vendor.js:formatted:10308)
    at t.updateValue (vendor.js:formatted:41132)
    at new e (vendor.js:formatted:56724)
    at e.Subscription.t.unsubscribe (vendor.js:formatted:23830)
    at e.unsubscribe (vendor.js:formatted:17987)
    at e.complete (vendor.js:formatted:18075)
    at e._complete (vendor.js:formatted:18000)
    at e.complete (vendor.js:formatted:17982)
    at e.ScalarObservable.e._subscribe (vendor.js:formatted:56782)
    at e.Observable.t._trySubscribe (vendor.js:formatted:10317)
    at e.Observable.t.subscribe (vendor.js:formatted:10308)
    at t.updateValue (vendor.js:formatted:41132)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at e._fireError (vendor.js:formatted:25880)
    at e._failed (vendor.js:formatted:25875)
    at vendor.js:formatted:25909
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (vendor.js:formatted:4098)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

I do not kow how to debug to find the actual error because this code is uglifyied, optimized and with renamed variables.

In my code, every time I need to unsubscribe for a subscription I verify if is different of null:

if (this.messagesSubs !== null) { this.messagesSubs.unsubscribe(); }

Now I need to upload a version to PlayStore and AppStore, but first I need to solve this problem. Any kind of help is very welcome! If you need more information that I missed just ask for it.

2

interesting…

it is called within a promise right? (uncaught exception)

what does console.log(this.messagesSubs) show prior to calling?

Maybe a concurrency issue, multiple calls to unsubscribe?

Gut feeling that a test on null prior to unsubscribe may be the result of a wrong pattern beforehand? The unsubscribe should follow a natural flow which should not require such test, IMHO

Regards

Tom

3

I sometimes add checks to my ‘unsubscribes’ but always filter them by making sure they’re not undefined. Perhaps replacing !== null with !== undefined will do the trick.

Agreed, unless it’s a deliberately designed condition I suppose. I add the undefined checks only when I’m actively testing stuff in my code. At production level, it shouldn’t be happening

4

It is strange for me too. I never had to test if a subscriptions was different of null to unsubscribe.

This is an example of my code:

ionViewDidLoad() {
  this.messagesSubs = this.socket.messageReciver().subscribe(res => {
    // Do my stuff
  });
}

ionViewWillUnload() {
  if (this.messagesSubs !== null) { this.messagesSubs.unsubscribe(); }
}

I have a chat in real time with socket.io.

// SocketService.ts
messageReciver(): Observable<any> {
  return new Observable(observer => {
    if (this._socket) {
      this._socket.on('message-response', data => {
        observer.next(data);
      });
    }
  });
}

Each page where I subscribe in ionViewDidLoad in unsubscribe in ionViewWillUnload.

5

I doubt this is in an unsubscribe function of yours. It sounds as though it’s more like a poorly defined observable, where the unsubscribe is taking place in library code, and you’re using a library wrong (or the lib has a bug).

6

I’m thinking exactly the same, but I can’t find where it could be and I don’t know where start to find.

7

Here’s a mistake in the “other direction”:
obs.filter( x => x!==null).take(1)
That can cause a memory leak, because if obs never emits a non-null value, the Observable never unsubscribes, since the take is never called. Point being, it’s easy to write bad logic, and have no idea it’s bad, until it bites you in the butt and you have to go back and find it.

If you have no clue, you probably have to make sure there’s an error trap on all of your Observables, that logs some identifiable information, and see what pops the error.

8

I used BehaviorSubject in my project, not deploying New.

But not sure if that works for you in terms of subscribing and unsubscribing

Probably no memory leakage on the new?

Old project…

So ypu could instantiate the BehaviorSubject in the provider constructor and add the listener to emit the stuff until explicit close

9

I’m still looking how to solve this error but I can’t figure out where more to search.

This is a screenshot of the error. Seeing the error in vendor.js:1 I think it could be a plugin. I’m removing one by one to ensure that.

Screenshot_20171212_103926
Screenshot_20171212_103926.png1920×1080 490 KB

10

That’s almost certainly the issue if you have that Error (native) message. Also, make sure your version of ionic-native is up to date.

11

I am having the EXACT same problem, using npm run ionic:build --production
Error in vendor.js:1, in the stack trace it seems to be during a XMLHttpRequest, by all my subscriptions are checked before unsubscribing.
Did you manage to find the source?

Thanks