Incorrect error on save citing multiple open windows (Web Editor: v2.7.3)

[dhowe]

p5.js version

v1.4.1

What is your operating system?

Mac OS

Web browser and version

FF 117.0 (64-bit)

Actual Behavior

A sketch (opened in only one tab) cannot be saved bc of incorrect error claiming multiple windows/saves. The only option is to refresh the page, potentially losing work.

I've seen this multiple times though I don't have a consistent way of recreating it as yet.

Expected Behavior

Should be allowed to save sketch

Steps to reproduce

Don't have reproducible steps as yet

[perminder-17]

I am working on this issue.

[lindapaiste]

Is this a new sketch or a previously saved sketch?

What you are seeing is the staleProject error message. We call the API with your changes to save the sketch and we show this error if the API returns a status code of 409.

Let's first figure out if the problem is on the frontend or the backend.

1. Open dev tools in your browser and go to the "Network" tab.
2. Save your project.
3. Look at the last API call in the Network tab -- Is it a 409 error?

This is what I want you to look at. I see a 200 because it works for me.

---

Relevant portions of code

https://github.com/processing/p5.js-web-editor/blob/4eb06ff7fe67794e628d462b395ef9e5049c1077/translations/locales/en-US/translations.json#L410

https://github.com/processing/p5.js-web-editor/blob/4eb06ff7fe67794e628d462b395ef9e5049c1077/client/modules/IDE/components/ErrorModal.jsx#L50-L52

https://github.com/processing/p5.js-web-editor/blob/4eb06ff7fe67794e628d462b395ef9e5049c1077/client/modules/IDE/actions/project.js#L198-L199

https://github.com/processing/p5.js-web-editor/blob/4eb06ff7fe67794e628d462b395ef9e5049c1077/server/controllers/project.controller.js#L32-L41

https://github.com/processing/p5.js-web-editor/blob/4eb06ff7fe67794e628d462b395ef9e5049c1077/server/controllers/project.controller/createProject.js#L77-L94

[ashishrout-tech]

I attempted to reproduce this error. This happens when user tries to save the same project in two different tabs/instances,

Notice, there are two tabs with the same project opened, and when user saves the project in one of tabs, it got saved and server updates the time which it receives from client side, after necessary checks.

But, if the first tab is closed (no need to do this), and user tries to save the changes he made in project from the second tab, conflict arises, as the client in second tab makes a put request with the outdated time which passes this condition and returns error.

if ( 
   req.body.updatedAt && 
   isAfter(new Date(project.updatedAt), new Date(req.body.updatedAt)) 
 ) { 
   res.status(409).send({ 
     success: false, 
     message: 'Attempted to save stale version of project.' 
   }); 
   return; 
 } 

So, to solve this, we might provide user with options to overwrite the previous changes with the new ones, or load the previous changes, by just reloading the page.

To overwrite the previous changes, client need to send the updated time in payload. what are your thoughts @lindapaiste

[dhowe]

Good info and suggestions... Note however that this is NOT the issue I originally reported, which occurs (intermittently) with a sketch opened in only ONE tab/window...

The next time it happens (and I am not in front of a classroom), I will follow the steps outlined above

[Jatin24062005]

@raclim You can close this issue. I have reviewed it thoroughly, and it has been resolved after some updates in the p5.js Web Editor version.

https://github.com/user-attachments/assets/5ef81ae4-f8fc-4fef-8391-81d2c7d7272a