After adding Web Worker to my react App, webpage in chrome breaks with Error code: STATUS_BREAKPOINT

Question

I have added a web worker for sending the countdown time every second. I am using it to cause a timeout in my application.

export default () => {
  self.onmessage = (e) => {
    var time = e.data;
    var interval = setInterval(function () {
      if (time > 0) {
        time = time - 1000;
        postMessage(time);
      } else if (time == 0) {
        clearInterval(interval);
        postMessage(time);
      }
    }, 1000);
  };
};

in my application:

 useEffect(() => {
    if (time > 0) {
      instance.postMessage(time);
    }
    return () => {
      instance.postMessage(0);
      instance.terminate();
    };
  }, [time]);

  instance.onmessage = (msg) => {
    if (msg.data > 0) {
      // app state update
    } else if (msg.data == 0) {
      // app timeout logic
      instance.postMessage('stop');
      instance.terminate();
    }

But in chrome after few min am getting Error code: STATUS_BREAKPOINT. can some one help me fix this issue.

The same code is working fine in firefox browser.

Answer 1

So i had the same issue, there was CPU and memory overuse which led to crash, and by taking off the worker and setting a timer with setInterval instead solved the problem

Note: check where are you declaring your Worker, or where you init it in the component, because maybe it makes it create a new instance at each re-rendering of the component, leading to a memory leak