Ferd•2w ago

Getting a warning when reloading and closing tabs (Svelte)

I'm working on a project that involves a good amount of real-time data going in and out. When a user reloads or closes the page, they're often met with this warning that there are unsaved changes. I don't need this warning, and users don't need to worry about any unsaved changes. So, is there a way I can prevent this from popping up? I tried adding an event listener to beforeunload and nulling out the property, but neither of those work. Has anyone run into this before, and is there any way to deal with this?

13 Replies

Clever Tagline•2w ago

I haven't seen that before, nor have I heard of anyone else encountering it. Could you please share more about your app stack? If you can also share a code example from a page that consistently generates this popup, that might help.

FerdOP•2w ago

This is a fairly simple Svelte app. I have a light "multiplayer cursor" feature, and I'm sending regular cursor x and y updates:

positionUpdateInterval = setInterval(() => {
    const isMouseRecentlyActive = Date.now() - lastMouseMoveTime < mouseIdleTimeout
    if (
        playerID &&
        isPageFocused &&
        isMouseOverWindow &&
        playerInitialized &&
        isMouseRecentlyActive
    ) {
        client.mutation(api.players.updatePlayerPosition, {
            id: playerID,
            x: mousePos.x,
            y: mousePos.y,
        })
    }
}, updateInterval)

positionUpdateInterval = setInterval(() => {
    const isMouseRecentlyActive = Date.now() - lastMouseMoveTime < mouseIdleTimeout
    if (
        playerID &&
        isPageFocused &&
        isMouseOverWindow &&
        playerInitialized &&
        isMouseRecentlyActive
    ) {
        client.mutation(api.players.updatePlayerPosition, {
            id: playerID,
            x: mousePos.x,
            y: mousePos.y,
        })
    }
}, updateInterval)

And my mutation:

export const updatePlayerPosition = mutation({
    args: { id: v.id('players'), x: v.number(), y: v.number() },
    handler: async (ctx, { id, x, y }) => {
        const updatedAt = Date.now()
        ctx.db.patch(id, { x, y, updatedAt })
    },
})

export const updatePlayerPosition = mutation({
    args: { id: v.id('players'), x: v.number(), y: v.number() },
    handler: async (ctx, { id, x, y }) => {
        const updatedAt = Date.now()
        ctx.db.patch(id, { x, y, updatedAt })
    },
})

Firing this specific mutation is what's blocking the page from reloading or closing.

Clever Tagline•2w ago

Interesting. On the surface, nothing sticks out. Out of curiosity, what's the updateInterval value? This is a long shot, but I'm wondering if driving the whole thing via setInterval could be partly to blame, and not necessarily the mutation call itself. That aside, I don't have experience with Svelte, so I'm not sure if something about that setup could be contributing to the issue. I'm going to update the title of this thread, and hope that others who use Svelte will chime in with their thoughts.

FerdOP•2w ago

updateInterval is currently at 100, but I also see it at much higher values.

Clever Tagline•2w ago

What about mouseIdleTimeout?

FerdOP•2w ago

2000

Clever Tagline•2w ago

And I'm guessing you've got an event handler driving changes to lastMouseMoveTime?

FerdOP•2w ago

Right.

Clever Tagline•2w ago

Have you run log tests to see how frequently the mutation is being called? Something tells me it's getting hammered a lot

FerdOP•2w ago

I haven't, but I have observed the updates in the Convex dashboard and (eyeballing!) it seems like it's 100ms. Likewise when I increase updateInterval to higher values.

Clever Tagline•2w ago

Have you seen this video? I can't recall the exact process that Mike uses, but perhaps something here would help in your case. https://www.youtube.com/watch?v=Tx_YIN-87_M

Convex

YouTube

How to implement Figma’s multiplayer cursors with Convex

After 33 years of coding, Mike shares a game-changing real-time update trick that unlocks collaborative cursor tracking—even in serverless environments. This video is a must-watch for full-stack developers, React engineers, and anyone building multiplayer experiences. Learn how to simulate high-frequency updates by batching mouse movements a...

Clever Tagline•2w ago

He uses some kind of buffering system so that things come through smoothly.

FerdOP•2w ago

I haven't! I'll definitely check that out.

Getting a warning when reloading and closing tabs (Svelte)

Did you find this page helpful?