Infinite loop deletes autosave

[robog-two]

p5.js version

1.11.11

What is your operating system?

None

Web browser and version

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0

Actual Behavior

Hello. I am very sad. I have been working on a sketch for ~5 hours straight for my algorithms class. I accidentally created an infinite for loop. I have autosave enabled and I had named the sketch, so I know that it was saved and I was logged in. After killing the tab, the sketch is no longer in my sketches tab. Thank you for any help on this issue. I'm going to go take a walk.

Expected Behavior

Autosave/auto-refresh should have a protection against accidental infinite loops, or at the very least, when autosave is on it should save the sketch every minute or so (or before every auto-refresh?) so in the event that the tab crashes the sketch is recoverable.

Steps to reproduce

Steps:

1. Create sketch
2. Name sketch
3. Make sure autosave is on
4. Make sure auto-refresh is on
5. Hit the play button
6. Write an infinite loop, oops!
7. Kill tab with the firefox task manager, then navigate back to the tab
8. Observe that the editor has opened a blank sketch and the sketch is no longer saved to your account 🥲

Snippet:

// Paste your code here :)
for (let x = 0; x > -4; x++) {}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Nixxx19]

Hi @robog-two and @raclim!

@robog-two, I've verified this issue on my end.
@raclim, I've been investigating the root cause and would like to work on a fix.

Root Cause

I've identified a critical race condition that leads to this data loss. While a user is typing (e.g., before adding the closing brackets {} to a loop), the code is invalid. During this "Syntax Error Phase", the server successfully saves the invalid state via autosave.

As soon as the user completes the loop, Auto-refresh executes the code instantly. If it's an infinite loop, the browser hangs immediately, which blocks the Autosave network request from sending the final code to the server. When the user returns, the database only has the old, broken code from before the crash.

Before infinite loop

During infinite loop

After crash : only the pre-loop code was saved, not the infinite loop version

Proposed Approach

1. Strengthen Loop Protection: Update EmbedFrame.jsx to ensure loopProtect() runs even when linting errors exist, preventing the hang in the first place.
2. LocalStorage Backup: Persist code to localStorage on every code change (debounced). Since this fires before auto-refresh executes the loop, the latest code is always recoverable even if the tab crashes.
3. Automatic Recovery: On project load, check if a localStorage backup is newer than the last server save and restore it automatically.
4. Infinite Loop Error Display: Ensure infinite loop errors appear in the workspace console (not just browser console) so users can see what went wrong.
5. Auto-refresh Recovery: Fix auto-refresh to continue working after an infinite loop stops the sketch, so users don't need to manually toggle it back on.

Testing

I've verified this logic locally, and it successfully prevents data loss even when the browser process is force-killed. The infinite loop error now appears in the console, and auto-refresh continues to work seamlessly after an infinite loop is detected.

Screenshots

After the changes, infinite loop errors are properly displayed in the workspace console and also mention code is being saved properly even after refresh and opening tab again:

Happy to open a PR!

[Iron-56]

Its a big change but, I think, its better to use localstorage and send it to server after a certain timeout and if there's any changes marked.

[Nixxx19]

Appreciate the suggestion @Iron-56!

I'm actually using a slightly different approach where localStorage acts as a parallel safety net rather than the primary source for server sync. I think this is better for a few reasons:

• Metadata & Validation: Redux already has the full file objects, project metadata, and user info validated and ready to go.
• Reduced Complexity: Using Redux for the "happy path" avoids extra JSON parsing and complex error handling for quota/disabled storage during the normal save flow.
• Immediate Persistence: My logic writes to localStorage immediately on change, ensuring the code is on disk before the 5-second autosave timer or an infinite loop can even trigger.

Basically, the server handles the "happy path" using the existing state, while localStorage is strictly a crash-recovery mechanism. I'm definitely open to discussing this further if you think reading directly from localStorage for the sync has specific advantages I might have missed!