App is unresponsive/crashes when an infinite loop is called with a console.log (take 2)

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

Same as https://github.com/codesandbox/codesandbox-client/issues/884

I hit this problem a lot, I am surprised that it isn't a bigger issue. I'm usually using the React Typescript template, I don't know if that is relevant.

When it happens it (usually) completely kills the browser (Chrome). I can't close the tab. Opening codesandbox.io in another tab doesn't load. I have to close the whole application. As soon as I open the afflicted sandbox, boom, it's busted again. I can open the developer tools and pause the script but even with it paused, it doesn't reload. Pretty strange, I thought Chrome would be a bit more resilient to bad scripts than that.

How has this issue affected you? What are you trying to accomplish?

To Reproduce

See example.

It almost always goes something like:

• I am trying to find a bug
• I add a console.debug statement
• Boom

It might be an infinite loop but I can't see it. Usually it is a React app that works fine, it responds to events etc but there is a bug somewhere. If it is a loop then it could be a render loop (calling setState from useEffect) which I know React detects itself even within the sandbox.

It seems like something bigger is going on.

Link to sandbox: link

Your Environment

Start by reproducing the linked sandbox at src/App.tsx in Chrome, using the reported infinite-loop and console.debug steps. Compare behavior with and without the console call and use the browser developer tools to identify where execution becomes unresponsive. Done means the sandbox remains usable when this case occurs, with a regression check for the reported scenario.