Having intermittent issue with react-idle-timer

[Missshu]

Hi Guys, thanks for developing this package for react. I have used it for session timeout and after we deployed the application for testing, it is not working as expected , sometimes. The timeout time is 10 mins and if the user is idle for more than 10 mins and when he comes back, he will get an alert popup that says your session is expired and on clicking ok, the application will kick out the user and display the login page for the user to login again. The issue is a couple of times, not every time, the testers say that they did not get the popup alert and the application will just freeze (this is not related to the idle timer, I think it is related to the authentication we used). I think the issue here is for some reason the idle timer did not fire the alert popup but I could not replicate the issue on my local machine which makes it difficult to troubleshoot.

Here is a sample of my code

    componentDidMount() {
        this.setState({
            remaining: this.idleTimer.getRemainingTime(),
            lastActive: this.idleTimer.getLastActiveTime(),
            elapsed: this.idleTimer.getElapsedTime()
        });

        setInterval(() => {
            this.setState({
                remaining: this.idleTimer.getRemainingTime(),
                lastActive: this.idleTimer.getLastActiveTime(),
                elapsed: this.idleTimer.getElapsedTime()
            });
        },
            1000);
    }

   onActive(e: any) {
        console.log('user is active', e);
        console.log('time remaining', this.state.remaining);
        console.log("time elapsed", this.state.elapsed);

        if (this.state.remaining === 0) {
            console.log("Your session has been expired ....");
            alert("Your session has expired and you will be redirected to the login page.");
            this.logout();
            
        }
    }

and this is what I have on render

render() {
        let timeout: any;
        let timeoutDuration = document.getElementById('timeout');
        if (timeoutDuration != null) {
             
            timeout = timeoutDuration.getAttribute('data-param');
        } 

        return (
            <IdleTimer
                ref={(ref: any) => { this.idleTimer = ref }}
                element={document}
                onActive={this.onActive}
                onIdle={this.onIdle}
                timeout={timeout} startOnLoad>
            
                <WrappedComponent {...this.props} />

            </IdleTimer>
        );
    }

Thanks for your help.

[SupremeTechnopriest]

Hi @Missshu! Thanks for using IdleTimer! Can you try to move your children outside of the IdleTimer instantiation? Your render should look like this:

   render() {
        let timeout: any;
        let timeoutDuration = document.getElementById('timeout');
        if (timeoutDuration != null) {
             
            timeout = timeoutDuration.getAttribute('data-param');
        } 

        return (
            <div>
                <IdleTimer
                    ref={(ref: any) => { this.idleTimer = ref }}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    timeout={timeout} startOnLoad />
            
                <WrappedComponent {...this.props} />

            </div>
        );
    }

See if that fixes your issue and If not let me know. We will take a deeper look.

[SupremeTechnopriest]

Closing this due to lack of activity. Let me know if you are still having issues!

[Missshu]

Hi @SupremeTechnopriest ,
I did not reply because I was waiting for the testers to verify if the issue is resolved or not. I can't replicate it on my local machine so I could not be able to verify it.

I will create another issue if we still continue to have the problem.

Thank you.