Timeout happening on one idle instance is causing the interrupt to stop working on the other idle instance

[vinacharya05]

NOTE: Due to limited time constraints and resources, we ask that you please use Stack Overflow or similar to troubleshoot or ask general questions, and not use bug reports to solicit help setting up your app.

Describe the bug
I have two idle instances, one for auto logout and another one for screensaver.

If my screensaver is "Active" and if timeout happens on the first instance(i,e. autologout) and if I try to interrupt the screen then screensaver is not going off and its blocking the UI. (One thing is clear that interrupt subscription stops working in this scenario).

To Reproduce
import {Component, NgZone, OnInit} from '@angular/core';
import {DEFAULT_INTERRUPTSOURCES, Idle, LocalStorage, LocalStorageExpiry} from '@ng-idle/core';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'my-idle-app';
private readonly screenSaver!: HTMLElement;
private readonly screenSaverText!: Text;
idleTime1: number = 1;
private screenSaverIdle = new Idle(new LocalStorageExpiry(new LocalStorage()), this.ngZone);

constructor(readonly ngZone: NgZone, private idle1: Idle) {
this.screenSaver = document.createElement('div');
this.screenSaver.id = 'screensaver';
this.screenSaver.className = 'screen-saver';
this.screenSaverText = document.createTextNode('---%');
const movingTxt = document.createElement('span');
movingTxt.appendChild(this.screenSaverText);
this.screenSaver.appendChild(movingTxt);
this.removeScreenSaver();

this.screenSaverIdle.setIdleName('screenSaverIdleService');
this.screenSaverIdle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
this.screenSaverIdle.setTimeout(false);
this.screenSaverIdle.setIdle(10);
this.screenSaverIdle.watch();

this.screenSaverIdle.onIdleStart.subscribe(() => {
  document.body.appendChild(this.screenSaver);
});

this.screenSaverIdle.onIdleEnd.subscribe(() => {
  console.log('IDLE END ::');
  this.removeScreenSaver();
});

}

ngOnInit() {
this.idle1.setIdleName('AutoLogoutIdleService');
this.idle1.setInterrupts(DEFAULT_INTERRUPTSOURCES);

this.idle1.setIdle(this.idleTime1);
this.idle1.setTimeout(10);

this.idle1.onIdleStart.subscribe(() => {
  console.log("IDLE 1 STARTS")
});

this.idle1.onIdleEnd.subscribe({
  next: () => {
    console.log("IDLE 1 END");
  },
  complete: () => {
    console.log("idle 1 completed");
  }
});

this.idle1.onTimeout.subscribe(()=> {
  console.log("User session timed Out",);
});

this.idle1.watch();

}

private removeScreenSaver() {
const ex = document.getElementById('screensaver');
if (ex) {
document.body.removeChild(ex);
}
}
}

Expected behavior
A clear and concise description of what you expected to happen.

Please tell us about your environment

• Mobile or Desktop: Desktop
• Browser: Chrome
• Version: ~11.1.0
• Angular version: 13
• NodeJS version: 16.20.2
• Language (TypeScript x.x, ES5, ES2015, etc.):

[vinacharya05]

sample code to reproduce this issue.
https://stackblitz.com/edit/angular-13-starter-project-ibwtvf?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html

[behdi]

Way too late to answer this, but the reason for this is that you're using DEFAULT_INTERRUPTSOURCES object as the interrupt source for both of your idle instances. As soon as you go idle, the Idle service unsubscribes from the interrupt sources, and since DEFAULT_INTERRUPTSOURCES is an object that's shared between both of your instances, as soon as one instance goes idle, the other one also stops listening to interrupt sources and never reintializes again.

You should use createDefaultInterruptSources() instead.

[evilaliv3]

@behdi may i ask you one question? it is very related to this ticket with users getting disconnected for apparent no reason.

do you see any misconfiguration in this?

  initIdleState() {
    this.idle.setIdle(1500);
    this.idle.setTimeout(300);
    this.keepalive.interval(30);
    this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    this.keepalive.onPing.subscribe(() => {
      if (this.authenticationService && this.authenticationService.session) {
        const token = this.authenticationService.session.token;
        this.cryptoService.proofOfWork(token.id).subscribe((result:any) => {
	  const param = {'token': token.id + ":" + result};
          this.httpService.requestRefreshUserSession(param).subscribe(((result:any) => {
            this.authenticationService.session.token = result.token;
	  }));
	});
      }
    });

    this.idle.onTimeout.subscribe(() => {
      if (this.authenticationService && this.authenticationService.session) {
        if (this.authenticationService.session.role === "whistleblower") {
          window.location.replace("about:blank");
        } else {
          this.authenticationService.deleteSession();
          this.authenticationService.loginRedirect();
        }
      }
    });

    this.reset();
  }