Fractal Posts - Convex Community

Fractal

•Created by Fractal on 6/9/2024 in #support-community

Mutation on pagehide handler not firing on page refresh, only on page close

I’m trying to make my app fire a mutation when the user closes the tab. As far as I know, the main way to do that nowadays is to use the pagehide event, so I have code like this in a root component.

// Disconnect on close
const disconnect = useMutation(api.lobby.disconnect);
useEffect(() => {
  const listener = async () => {
    await disconnect(credentials);
  };
  window.addEventListener("pagehide", listener);
  return () => {
    window.removeEventListener("pagehide", listener);
  };
}, [disconnect, credentials]);

// Disconnect on close
const disconnect = useMutation(api.lobby.disconnect);
useEffect(() => {
  const listener = async () => {
    await disconnect(credentials);
  };
  window.addEventListener("pagehide", listener);
  return () => {
    window.removeEventListener("pagehide", listener);
  };
}, [disconnect, credentials]);

This works fine when closing the tab (I can see in the Convex dashboard that the mutation gets fired), but somehow it does not work when refreshing the page: the pagehide event listener does get called but not the mutation itself (I cannot see anything in the Convex dashboard). Any idea why it would behave differently on refresh and closing a tab? And what I can do to fix it? Note that I can’t seem to be able to get any logs or errors after the await disconnect(credentials). It’s probably because a pagehide event listener only runs the synchronous part of the event listener and then closes the page.

2 replies

CCConvex Community

•Created by Fractal on 4/28/2024 in #support-community

Convex dev server chokes on Emacs backup files

By default, my text editor (Emacs) saves backup files in the same directory by adding a # to the beginning and the end of the file name. So for instance a file called functions.ts will generate a backup file called #functions.ts# (which then gets removed automatically when saving the original file). The problem is that npx convex dev chokes on those files, it crashes with the following error message:

⠙ Preparing Convex functions...
Unexpected Error: SyntaxError: Private identifiers are not allowed outside class bodies. (13:20)
  11 |   
  12 |   import type { ApiFromModules, FilterApi, FunctionReference } from "convex/server";
> 13 |   import type * as #functions from "../#functions.js";
     |                    ^
  14 | import type * as functions from "../functions.js";
  15 |

⠙ Preparing Convex functions...
Unexpected Error: SyntaxError: Private identifiers are not allowed outside class bodies. (13:20)
  11 |   
  12 |   import type { ApiFromModules, FilterApi, FunctionReference } from "convex/server";
> 13 |   import type * as #functions from "../#functions.js";
     |                    ^
  14 | import type * as functions from "../functions.js";
  15 |

It actually crashes, so my functions are not kept synchronized anymore and I have to restart npx convex dev for my functions to synchronize again, which is pretty annoying. Sure I could configure Emacs to save the backup files somewhere else or with a different name, but it would be nice if it worked out of the box. After all the extension is .ts# so it should not even be considered as a Typescript file by Convex?

11 replies