Feat/sentry error boundary

src/app/[locale]/(homepageDialogDeeplink)/action/[action]/all/page.tsx

@@ -17,7 +17,7 @@ export default function UserActionCampaigns() {
   const { data, isLoading } = useApiResponseForUserPerformedUserActionTypes()
   const performedUserActionTypes = data?.performedUserActionTypes ?? []
 
-  const { performeduserActionObj } = useGridCTAs({
+  const { performedUserActionObj } = useGridCTAs({
     performedUserActionTypes,
   })
 
@@ -37,7 +37,7 @@ export default function UserActionCampaigns() {
       <UserActionGridCampaignsDialogContent
         campaigns={cta.campaigns}
         description={cta.description}
-        performedUserActions={performeduserActionObj}
+        performedUserActions={performedUserActionObj}
         title={cta.title}
       />
     </div>

src/app/[locale]/(homepageDialogDeeplink)/action/become-member/page.tsx

@@ -1,6 +1,9 @@
+import { UserActionType } from '@prisma/client'
+
 import { getAuthenticatedData } from '@/components/app/pageUserProfile/getAuthenticatedData'
 import { RedirectToSignUpComponent } from '@/components/app/redirectToSignUp'
 import { PageProps } from '@/types'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 import { PageBecomeMember } from './pageBecomeMember'
 
@@ -11,8 +14,40 @@ export default async function UserActionBecomeMemberDeepLink({ params }: PagePro
   const user = await getAuthenticatedData()
 
   if (!user) {
-    return <RedirectToSignUpComponent callbackDestination="becomeMember" locale={locale} />
+    return (
+      <ErrorBoundary
+        extras={{
+          action: {
+            isDeeplink: true,
+            actionType: UserActionType.OPT_IN,
+          },
+        }}
+        severityLevel="error"
+        tags={{
+          domain: 'UserActionBecomeMemberDeepLink',
+          component: 'RedirectToSignUpComponent',
+        }}
+      >
+        <RedirectToSignUpComponent callbackDestination="becomeMember" locale={locale} />
+      </ErrorBoundary>
+    )
   }
 
-  return <PageBecomeMember hasOptedInToMembership={user.hasOptedInToMembership} />
+  return (
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.OPT_IN,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionBecomeMemberDeepLink',
+        component: 'PageBecomeMember',
+      }}
+    >
+      <PageBecomeMember hasOptedInToMembership={user.hasOptedInToMembership} />
+    </ErrorBoundary>
+  )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/call/page.tsx

@@ -1,19 +1,35 @@
+import { UserActionType } from '@prisma/client'
+
 import { HomepageDialogDeeplinkLayout } from '@/components/app/homepageDialogDeeplinkLayout'
 import { UserActionFormCallCongresspersonDeeplinkWrapper } from '@/components/app/userActionFormCallCongressperson/homepageDialogDeeplinkWrapper'
 import { dialogContentPaddingStyles } from '@/components/ui/dialog/styles'
 import { PageProps } from '@/types'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
 import { cn } from '@/utils/web/cn'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION.HOUR
 export const dynamic = 'error'
 
 export default function UserActionCallCongresspersonDeepLink({ params }: PageProps) {
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <div className={cn('max-md:h-full', dialogContentPaddingStyles)}>
-        <UserActionFormCallCongresspersonDeeplinkWrapper />
-      </div>
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.CALL,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionCallCongresspersonDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <div className={cn('max-md:h-full', dialogContentPaddingStyles)}>
+          <UserActionFormCallCongresspersonDeeplinkWrapper />
+        </div>
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/email-debate/page.tsx

@@ -1,15 +1,33 @@
+import { UserActionType } from '@prisma/client'
+
 import { HomepageDialogDeeplinkLayout } from '@/components/app/homepageDialogDeeplinkLayout'
 import { UserActionFormEmailDebateDeeplinkWrapper } from '@/components/app/userActionFormEmailDebate/homepageDialogDeeplinkWrapper'
 import { PageProps } from '@/types'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
+import { UserActionEmailCampaignName } from '@/utils/shared/userActionCampaigns'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION.HOUR
 export const dynamic = 'error'
 
 export default function UserActionEmailDebateDeepLink({ params }: PageProps) {
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <UserActionFormEmailDebateDeeplinkWrapper />
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.EMAIL,
+          campaignName: UserActionEmailCampaignName.ABC_PRESIDENTIAL_DEBATE_2024,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionEmailDebateDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <UserActionFormEmailDebateDeeplinkWrapper />
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/email/page.tsx

@@ -1,15 +1,31 @@
+import { UserActionType } from '@prisma/client'
+
 import { HomepageDialogDeeplinkLayout } from '@/components/app/homepageDialogDeeplinkLayout'
 import { UserActionFormEmailCongresspersonDeeplinkWrapper } from '@/components/app/userActionFormEmailCongressperson/homepageDialogDeeplinkWrapper'
 import { PageProps } from '@/types'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION.HOUR
 export const dynamic = 'error'
 
 export default function UserActionEmailCongresspersonDeepLink({ params }: PageProps) {
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <UserActionFormEmailCongresspersonDeeplinkWrapper />
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.EMAIL,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionEmailCongresspersonDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <UserActionFormEmailCongresspersonDeeplinkWrapper />
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/live-event/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import { UserActionType } from '@prisma/client'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
@@ -9,6 +10,7 @@ import { PageProps } from '@/types'
 import { generateMetadataDetails } from '@/utils/server/metadataUtils'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
 import { UserActionLiveEventCampaignName } from '@/utils/shared/userActionCampaigns'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION['30_SECONDS']
 export const dynamic = 'error'
@@ -40,10 +42,24 @@ export default async function UserActionLiveEventDeepLink({ params }: Props) {
   }
 
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <div className={dialogContentPaddingStyles}>
-        <UserActionFormLiveEventDeeplinkWrapper slug={slug as UserActionLiveEventCampaignName} />
-      </div>
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.LIVE_EVENT,
+          campaignName: slug,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionLiveEventDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <div className={dialogContentPaddingStyles}>
+          <UserActionFormLiveEventDeeplinkWrapper slug={slug as UserActionLiveEventCampaignName} />
+        </div>
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/nft-mint/page.tsx

@@ -1,24 +1,40 @@
+import { UserActionType } from '@prisma/client'
+
 import { HomepageDialogDeeplinkLayout } from '@/components/app/homepageDialogDeeplinkLayout'
 import { HomepageDialogDeeplinkNFTMintWrapper } from '@/components/app/userActionFormNFTMint/homepageDialogDeeplinkNFTMintWrapper'
 import { dialogContentPaddingStyles } from '@/components/ui/dialog/styles'
 import { PageProps } from '@/types'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
 import { cn } from '@/utils/web/cn'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION.HOUR
 export const dynamic = 'error'
 
 export default function UserActionNFTMintDeepLink({ params }: PageProps) {
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <div
-        className={cn(
-          'flex flex-col items-center justify-center max-md:h-full',
-          dialogContentPaddingStyles,
-        )}
-      >
-        <HomepageDialogDeeplinkNFTMintWrapper />
-      </div>
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.NFT_MINT,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionNFTMintDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center max-md:h-full',
+            dialogContentPaddingStyles,
+          )}
+        >
+          <HomepageDialogDeeplinkNFTMintWrapper />
+        </div>
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/pledge/page.tsx

@@ -1,15 +1,31 @@
+import { UserActionType } from '@prisma/client'
+
 import { HomepageDialogDeeplinkLayout } from '@/components/app/homepageDialogDeeplinkLayout'
 import { UserActionFormVoterAttestationDeeplinkWrapper } from '@/components/app/userActionFormVoterAttestation/homepageDialogDeeplinkWrapper'
 import { PageProps } from '@/types'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION.HOUR
 export const dynamic = 'error'
 
 export default function UserActionVoterAttestationDeepLink({ params }: PageProps) {
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <UserActionFormVoterAttestationDeeplinkWrapper />
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.VOTER_ATTESTATION,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionVoterAttestationDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <UserActionFormVoterAttestationDeeplinkWrapper />
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/share/page.tsx

@@ -1,11 +1,27 @@
+import { UserActionType } from '@prisma/client'
+
 import { UserActionFormShareOnTwitterDeeplinkWrapper } from '@/components/app/userActionFormShareOnTwitter/homepageDialogDeeplinkWrapper'
 import { dialogContentPaddingStyles } from '@/components/ui/dialog/styles'
 import { cn } from '@/utils/web/cn'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export default function UserActionShareOnTwitterDeepLink() {
   return (
-    <div className={cn(dialogContentPaddingStyles, 'h-full')}>
-      <UserActionFormShareOnTwitterDeeplinkWrapper />
-    </div>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.TWEET,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionShareOnTwitterDeepLink',
+      }}
+    >
+      <div className={cn(dialogContentPaddingStyles, 'h-full')}>
+        <UserActionFormShareOnTwitterDeeplinkWrapper />
+      </div>
+    </ErrorBoundary>
   )
 }

src/app/[locale]/(homepageDialogDeeplink)/action/sign-up/page.tsx

@@ -61,6 +61,7 @@ export default function UserActionOptInSWCDeepLink() {
         'max-md:pt-16',
       )}
     >
+      {/* ThirdwebLoginContent already with its own ErrorBoundary with severity level Fatal */}
       <ThirdwebLoginContent onLoginCallback={() => handleRedirectOnLogin()} />
     </div>
   )

src/app/[locale]/(homepageDialogDeeplink)/action/tweet-at-person/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import { UserActionType } from '@prisma/client'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
@@ -10,6 +11,7 @@ import { generateMetadataDetails } from '@/utils/server/metadataUtils'
 import { SECONDS_DURATION } from '@/utils/shared/seconds'
 import { UserActionTweetAtPersonCampaignName } from '@/utils/shared/userActionCampaigns'
 import { cn } from '@/utils/web/cn'
+import { ErrorBoundary } from '@/utils/web/errorBoundary'
 
 export const revalidate = SECONDS_DURATION['30_SECONDS']
 export const dynamic = 'error'
@@ -47,12 +49,26 @@ export default async function UserActionTweetAtPersonDeepLink({ params }: Props)
   }
 
   return (
-    <HomepageDialogDeeplinkLayout pageParams={params}>
-      <div className={cn(dialogContentPaddingStyles, 'max-md:h-full')}>
-        <UserActionFormTweetToPersonDeeplinkWrapper
-          slug={slug as UserActionTweetAtPersonCampaignName}
-        />
-      </div>
-    </HomepageDialogDeeplinkLayout>
+    <ErrorBoundary
+      extras={{
+        action: {
+          isDeeplink: true,
+          actionType: UserActionType.TWEET_AT_PERSON,
+          campaignName: slug,
+        },
+      }}
+      severityLevel="error"
+      tags={{
+        domain: 'UserActionTweetAtPersonDeepLink',
+      }}
+    >
+      <HomepageDialogDeeplinkLayout pageParams={params}>
+        <div className={cn(dialogContentPaddingStyles, 'max-md:h-full')}>
+          <UserActionFormTweetToPersonDeeplinkWrapper
+            slug={slug as UserActionTweetAtPersonCampaignName}
+          />
+        </div>
+      </HomepageDialogDeeplinkLayout>
+    </ErrorBoundary>
   )
 }