Stephen and Chris hop on to talk about how we’re saving everyone from crashed browser tabs in CodePen’s 2.0 editor. One simple:
while(true) { }
Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! CodePen is now using a “heartbeat” technique to report up from the preview iframe to the parent page, and if we don’t hear the heartbeat, we can rip out the iframe and stop the crash. But it was very tricky to get working and not too jumpy.
Fortunately, we got it all working, because our previous technique of instrumenting your JavaScript wasn’t going to scale well to the 2.0 editor.
Time Jumps
- 00:05 404 error
- 00:45 Dealing with infinite loops for the new editor
- 02:48 What happens when a browser tab freezes?
- 06:51 Why instrumenting worked
- 09:24 Alex’s heartbeat solution
- 14:59 How the UI works
- 19:10 Dealing with JavaScript alert, confirm, and prompt messages
- 20:34 Dealing with tab visibility