Timeout exceeded Pomodoro clock

Hi, I have been stuck on the ‘Timeout of 5000ms exceeded.’ issue for a while now and I have read as much as I could find on the similar issues here but have not been much help. It seems like it can be caused by a different number of factors, yet I cannot find what’s causing my code to timeout. The clock works fine apart from that error as far as I can tell.

It starts to timeout at he reset onClick. Here is my code:

excuse the ugly css

Any help or feedback would be greatly appreciated.

Thanks

Steven

I don’t see any error. What steps are required to reproduce this error? are you seeing this on the console?

If you run the tests, several of them fail.
@stevenYouhana
I was looking at your code but I don’t follow it yet. It will take time to figure out!

No comments anywhere as usual :roll_eyes:

this is the error I get on the console when all the tests finish:
“Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().”

I did think it was the way I was handling the audio operations, but I changed it to handle it safely and didn’t change anything.

Thanks

Oh wow, thanks for noticing that. I’ll give that a go!

However, I don’t think that makes any difference. Even on the demo project given the timer-label only changes a second after 00:00. But I changed anyway…

Thanks! Sorry to be a pain.

Yeh that’s true, I’ll keep going through it and compare it to a few other solutions and perhaps do some refactoring to make it easier to trace.

It seemed to do with the way I was displaying the ‘time-left’
I replaced :

 {
            this.props.minutes.toString().split('').length === 2? this.props.minutes: '0' + this.props.minutes
          }
          :
          {
             this.props.seconds.toString().split('').length === 2? this.props.seconds: '0' + this.props.seconds
          }
    
 

with this:

let display = (minutes, seconds) => {
  const mins = minutes < 10? `0${minutes}`: `${minutes}`;
  const secs = seconds < 10? `0${seconds}`: `${seconds}`;
  return `${mins}:${secs}`;
}

and the error is not there any more :thinking:

I was just struggling with this same (or closely related) issue! There’s no real error message other than the timeout. I ended up fixing it in a similar fashion. I’m going to add my fix in the hope no one else has to suffer this.

<h2 id="time-left">
  {minutes}:{seconds}
</h2>

Will throw the async error for Timer tests #: 1, 12, 13, 14, & 15.

<h2 id="time-left">
  {minutes + ':' + seconds}
</h2>

Works just fine however.

I see, did manage to find the cause?