diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx index a7c147df6d1..c21083f1d1f 100644 --- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx +++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx @@ -58,6 +58,12 @@ import { useLastVisitedOrganization } from '@/hooks/misc/useLastVisitedOrganizat import { PRICING_TIER_LABELS_ORG, STRIPE_PUBLIC_KEY } from '@/lib/constants' import { validateReturnTo } from '@/lib/gotrue' import { useProfile } from '@/lib/profile' +import { + classifyApiError, + classifyStripeError, + classifyValidationError, +} from '@/lib/telemetry/funnel-errors' +import { useTrackFunnelError } from '@/lib/telemetry/use-track-funnel-error' interface NewOrgFormProps { onPaymentMethodReset: () => void @@ -226,6 +232,8 @@ export const NewOrgForm = ({ [freeOrgs, projectsByOrg] ) + const trackFunnelError = useTrackFunnelError() + const { mutate: createOrganization } = useOrganizationCreateMutation({ onSuccess: async (org) => { if ('pending_payment_intent_secret' in org && org.pending_payment_intent_secret) { @@ -236,6 +244,7 @@ export const NewOrgForm = ({ }, onError: (data) => { toast.error(data.message, { duration: 10_000 }) + trackFunnelError('org_creation', classifyApiError('org_creation', data), 'toast') setNewOrgLoading(false) }, }) @@ -246,6 +255,10 @@ export const NewOrgForm = ({ onOrganizationCreated({ slug: data.slug }) } }, + onError: (error) => { + toast.error(error.message, { dismissible: true, duration: 10_000 }) + trackFunnelError('org_creation', classifyApiError('org_creation', error), 'toast') + }, }) const paymentIntentConfirmed = async (paymentIntentConfirmation: PaymentIntentResult) => { @@ -260,6 +273,11 @@ export const NewOrgForm = ({ size: form.getValues('size'), }) } else { + trackFunnelError( + 'org_creation', + classifyStripeError(paymentIntentConfirmation.error), + 'toast' + ) // If the payment intent is not successful, we reset the payment method and show an error toast.error(`Could not confirm payment. Please try again or use a different card.`, { duration: 10_000, @@ -354,7 +372,12 @@ export const NewOrgForm = ({ return (