Skip to content

add referral handler #698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zdql merged 2 commits into from
Nov 25, 2025
Merged

add referral handler #698

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76671dd
add referral handler
zdql Nov 25, 2025
df12300
cleanup
zdql Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/app/control/src/app/(app)/app/[id]/(overview)/_components/header/buttons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ interface Props {
}

export const HeaderButtons: React.FC<Props> = ({ appId }) => {
const [isOwner] = api.apps.app.isOwner.useSuspenseQuery(appId);
const { data: isOwner, isLoading } = api.apps.app.isOwner.useQuery(appId);

if (isLoading || isOwner === undefined) {
return <LoadingHeaderButtons />;
}

return (
<div className="flex items-center gap-2">
Expand Down
66 changes: 66 additions & 0 deletions packages/app/control/src/app/(app)/app/[id]/(overview)/_components/referral-handler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { api } from '@/trpc/client';

interface Props {
appId: string;
}

export const ReferralHandler: React.FC<Props> = ({ appId }) => {
const searchParams = useSearchParams();
const referralCode = searchParams.get('referral_code');
const [processed, setProcessed] = useState(false);

const utils = api.useUtils();
const { mutateAsync: createMembership } =
api.apps.app.memberships.create.useMutation();
const { mutateAsync: updateReferrer } =
api.apps.app.memberships.update.referrer.useMutation();

useEffect(() => {
if (!referralCode || processed) return;

const processReferralCode = async () => {
const referralCodeData = await utils.apps.app.referralCode.get.byCode
.fetch(referralCode)
.catch(() => null);

if (!referralCodeData) {
setProcessed(true);
return;
}

const membership = await utils.apps.app.memberships.get
.fetch({ appId })
.catch(() => null);

// Only update if user has no referrer yet
if (membership?.referrerId === null) {
await updateReferrer({
appId,
referrerId: referralCodeData.id,
}).catch(() => {
// Silently fail - user might already have a referrer from a race condition
});
}

// Create membership if it doesn't exist
if (!membership) {
await createMembership({
appId,
referrerId: referralCodeData.id,
}).catch(() => {
// Silently fail - membership might have been created in the meantime
});
}
Copy link
Copy Markdown
Contributor

@vercel vercel Bot Nov 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component conflates API fetch errors with "membership doesn't exist", potentially causing duplicate membership creation attempts if the membership fetch fails.

View Details
📝 Patch Details 
diff --git a/packages/app/control/src/app/(app)/app/[id]/(overview)/_components/referral-handler.tsx b/packages/app/control/src/app/(app)/app/[id]/(overview)/_components/referral-handler.tsx
index ed0746c0..0e4d2ae9 100644
--- a/packages/app/control/src/app/(app)/app/[id]/(overview)/_components/referral-handler.tsx
+++ b/packages/app/control/src/app/(app)/app/[id]/(overview)/_components/referral-handler.tsx
@@ -23,18 +23,32 @@ export const ReferralHandler: React.FC<Props> = ({ appId }) => {
     if (!referralCode || processed) return;
 
     const processReferralCode = async () => {
-      const referralCodeData = await utils.apps.app.referralCode.get.byCode
-        .fetch(referralCode)
-        .catch(() => null);
+      let referralCodeData;
+      try {
+        referralCodeData = await utils.apps.app.referralCode.get.byCode.fetch(
+          referralCode
+        );
+      } catch (error) {
+        console.error('Failed to fetch referral code:', error);
+        setProcessed(true);
+        return;
+      }
 
       if (!referralCodeData) {
         setProcessed(true);
         return;
       }
 
-      const membership = await utils.apps.app.memberships.get
-        .fetch({ appId })
-        .catch(() => null);
+      let membership;
+      try {
+        membership = await utils.apps.app.memberships.get.fetch({ appId });
+      } catch (error) {
+        // Failed to fetch membership - cannot distinguish between "doesn't exist" and "fetch failed"
+        // Avoid attempting to create membership when we don't know the actual state
+        console.error('Failed to fetch membership:', error);
+        setProcessed(true);
+        return;
+      }
 
       // Only update if user has no referrer yet
       if (membership?.referrerId === null) {
@@ -46,7 +60,7 @@ export const ReferralHandler: React.FC<Props> = ({ appId }) => {
         });
       }
 
-      // Create membership if it doesn't exist
+      // Create membership if it doesn't exist (and fetch succeeded confirming non-existence)
       if (!membership) {
         await createMembership({
           appId,

Analysis

ReferralHandler conflates API fetch errors with membership non-existence, risking duplicate membership creation

What fails: In ReferralHandler.processReferralCode(), when memberships.get.fetch() fails with a network or server error (lines 35-37), it's silently caught and converted to null via .catch(() => null). This creates ambiguity: the code cannot distinguish between "membership doesn't exist" (legitimate case where create is safe) and "membership fetch failed" (error case where state is unknown). Result: if the fetch fails when a membership already exists, the code proceeds to attempt creating a duplicate membership at line 50.

How to reproduce:

  1. User with an existing membership visits the app with a referral code query parameter
  2. Network failure or server error occurs during the memberships.get.fetch({ appId }) call
  3. The .catch(() => null) suppresses the error and sets membership to null
  4. Code reaches line 50 where if (!membership) evaluates to true
  5. Code attempts createMembership() even though the membership likely exists

Result: Multiple membership creation attempts triggered by transient API errors, leading to:

  • Unexpected API responses from duplicate creation attempts (membership already exists)
  • Potential for data inconsistency if error handling in create/update operations relies on specific error codes
  • User confusion or silent failures

Expected behavior: Errors during membership fetch should be handled distinctly from the legitimate "no membership exists" case. If we cannot determine membership state due to a fetch error, we should not attempt creation.

Fix implemented: Replaced .catch(() => null) pattern with explicit try-catch blocks that:

  • Distinguish fetch errors from successful null responses
  • Log errors for observability
  • Return early when fetch fails (rather than attempting creation with unknown state)
  • Only proceed to create membership when fetch succeeds and returns null (confirming non-existence)

This ensures duplicate creation attempts only occur due to documented race conditions (lines 54, 65 comments), not API failures.


setProcessed(true);
};

void processReferralCode();
}, [referralCode, appId, createMembership, updateReferrer, processed, utils]);

return null;
};
2 changes: 2 additions & 0 deletions packages/app/control/src/app/(app)/app/[id]/(overview)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { api, HydrateClient } from '@/trpc/server';
import { HeaderCard, LoadingHeaderCard } from './_components/header';
import { Setup } from './_components/setup';
import { Overview } from './_components/overview';
import { ReferralHandler } from './_components/referral-handler';
import { userOrRedirect } from '@/auth/user-or-redirect';

export default async function AppPage(props: PageProps<'/app/[id]'>) {
Expand All @@ -26,6 +27,7 @@ export default async function AppPage(props: PageProps<'/app/[id]'>) {

return (
<HydrateClient>
<ReferralHandler appId={id} />
<Body className="gap-0 pt-0">
<Suspense fallback={<LoadingHeaderCard />}>
<HeaderCard appId={id} />
Expand Down
Loading