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

p5.js-web-editor/translations/locales/en-US/translations.json

Line 410 in 4eb06ff

"SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n Please refresh the page to see the latest version.",

p5.js-web-editor/client/modules/IDE/components/ErrorModal.jsx

Lines 50 to 52 in 4eb06ff

	function staleProject() {
	return <p>{t('ErrorModal.SavedDifferentWindow')}</p>;
	}

p5.js-web-editor/client/modules/IDE/actions/project.js

Lines 198 to 199 in 4eb06ff

	} else if (response.status === 409) {
	dispatch(showErrorModal('staleProject'));

p5.js-web-editor/server/controllers/project.controller.js

Lines 32 to 41 in 4eb06ff

	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;
	}

p5.js-web-editor/server/controllers/project.controller/createProject.js

Lines 77 to 94 in 4eb06ff

	return model
	.isSlugUnique()
	.then(({ isUnique, conflictingIds }) => {
	if (isUnique) {
	return model.save().then((newProject) => {
	res.status(201).json({ id: newProject.id });
	});
	}
	const error = new ProjectValidationError(
	`Slug "${model.slug}" is not unique. Check ${conflictingIds.join(
	', '
	)}`
	);
	error.code = 409;
	throw error;
	})

[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.

p5.js.Web.Editor._.Opposite.cloudberry.-.Brave.2025-02-28.21-25-12.mp4