Calonz•6mo ago

Convex X Clerk Issue: Application error: a client-side exception

I've been getting this on my capstone project. I would love to hear your advice on how to fix this issue if you have experienced it as well. This occurs when I'm login into my application for more than 5 minutes then I try logging out it goes in this error, right away? Here's the repo: https://github.com/achris-alonzo30/hireme and do you think this is more on Clerk issue? so should I use the ConvexAuth instead?

GitHub

GitHub - achris-alonzo30/hireme

Contribute to achris-alonzo30/hireme development by creating an account on GitHub.

3 Replies

erquhart•6mo ago

This generally happens on logout because you have live queries listening and the user is suddenly unauthenticated. Have to add graceful handling to your application logic to avoid it, but it shouldn't have much if any impact on the user. At least that's my assumption looking at this, as I see the same in my main app.

CalonzOP•6mo ago

Would you be able to show me what's the best way to handle it. Here's where the error coming from. Do you mind checking if this is the correct way to do it? or I should fix the application logic more on the client side?

export const getFeeds = query({
    args: {...
},
    handler: async (ctx, { filters }) => {
        const identity = await userIdentity(ctx);

        if (!identity) throw new ConvexError("Unauthorized!");

        let feeds = await ctx.db.query("feeds").order("desc").collect();

      ...rest of the code

export const getFeeds = query({
    args: {...
},
    handler: async (ctx, { filters }) => {
        const identity = await userIdentity(ctx);

        if (!identity) throw new ConvexError("Unauthorized!");

        let feeds = await ctx.db.query("feeds").order("desc").collect();

      ...rest of the code

and here's the userIdentity fn():

async function userIdentity(
    ctx: QueryCtx | MutationCtx,
) {
    const identity = await ctx.auth.getUserIdentity();

    if (!identity) return null;

    const user = await ctx.db
        .query("users")
        .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier))
        .unique();

    if (!user) return null;

    return user;
}

async function userIdentity(
    ctx: QueryCtx | MutationCtx,
) {
    const identity = await ctx.auth.getUserIdentity();

    if (!identity) return null;

    const user = await ctx.db
        .query("users")
        .withIndex("by_token", (q) => q.eq("tokenIdentifier", identity.tokenIdentifier))
        .unique();

    if (!user) return null;

    return user;
}

ian•6mo ago

putting <Authenticated> tags around the components that are doing queries that require authentication usually covers this. https://docs.convex.dev/auth/clerk#logged-in-and-logged-out-views

Convex & Clerk | Convex Developer Hub

Clerk is an authentication platform providing login via

Convex X Clerk Issue: Application error: a client-side exception

Did you find this page helpful?