lanthe•11mo ago

convex-session-id doesn't consistently get set

I'm using Sessions following this blog post: https://stack.convex.dev/track-sessions-without-cookies About 20% of the time, convex-session-id never gets set in Session storage, so my session disappears when I reload the tab. When I reference ctx.sessionId in my *WithSession backend functions, I get a consistent value, even though convex-session-id isn't set in the browser. Am I holding it wrong? Is this a bug w Convex?

Track Sessions Without Cookies

Advice and resources for session tracking per-tab or per-browser via localStorage / sessionStorage using React Context, hooks, and some utilities to m...

3 Replies

Michal Srb•11mo ago

Hey @lanthe can you share the code that uses SessionProvider? If you want to debug this you could vendor it in and add console.logs to see what’s happening. I’d also watch out for key collision in session storage (something wiping out the session id after it is saved).

lantheOP•11mo ago

here's what i have now, simplifying away everything else: in main.tsx:

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { SessionProvider } from "./sessions";

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ConvexProvider client={convex}>
      <SessionProvider>
        <App />
      </SessionProvider>
    </ConvexProvider>
  </StrictMode>
);

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { SessionProvider } from "./sessions";

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ConvexProvider client={convex}>
      <SessionProvider>
        <App />
      </SessionProvider>
    </ConvexProvider>
  </StrictMode>
);

App.tsx:

import { api } from "../convex/_generated/api";
import { useSessionQuery, useSessionMutation } from "./sessions";
import ImageProcessor from "./ImageProcessor";


export default function App() {
  console.log(sessionStorage);
  return (<main><div>hello</div></main>);
}

import { api } from "../convex/_generated/api";
import { useSessionQuery, useSessionMutation } from "./sessions";
import ImageProcessor from "./ImageProcessor";


export default function App() {
  console.log(sessionStorage);
  return (<main><div>hello</div></main>);
}

my understanding is that this should set convex-session-id in session storage right away, but it doesn't. If I reload the page, then it does. I am currently digging around your sessions.ts to figure out what it's doing but it's slow going because I'm just not that fluent in js yet console.logging is telling me that it successfully gets set the first time the page loads, but then that gets wiped before I can interact with it in the console. The second time the page loads, a new UUID gets generated and that one gets successfully set and stored, and doesn't get wiped. At this point my code isn't doing much, so I'm pretty stumped? The bad behavior only happens in chrome? Safari successfully holds on to the first session id generated welp. i restarted chrome and now it works fine that's 2 hours of my life i'm never getting back 😛

jamwt•11mo ago

glad to hear it's working now! 🤷

convex-session-id doesn't consistently get set

Did you find this page helpful?