Timeout exceeded Pomodoro clock

Timeout exceeded Pomodoro clock
0

#1

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


#2

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


#3

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:


#4

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


#6

The problem with your solution is that you do not change the the “timer-label” element from Session to Break or Break to Session until one second after the timer reaches 00:00. Let’s say I set the Session and Break times to 01:00 each and start the timer. When the Session timer gets to 00:00 nothing changes in the timer-label element. It is only once the break session gets to 00:59 that the timer-label updates to Break. The same thing happens when Break turns back to Session. This is the reason you are failing the test.


#7

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


#8

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…


#9

Apparently not, but at least now the timer is not adding the extra second. I will review your code again, to see what could be causing the test issue.


#10

Thanks! Sorry to be a pain.


#11

The pain is that the test results are not giving useful information. What is actually happening is the code of the test is having an error which results in the cryptic message you are seeing. I have seen this before, but I can not place what the issue was right now.


#12

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.


#13

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:


#14

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.


#15

I see, did manage to find the cause?