feat(vercel): Refactor Vercel integration components for improved functionality and error handling

Author: 0ski

apps/webapp/app/components/integrations/VercelBuildSettings.tsx

@@ -7,7 +7,7 @@ import {
   environmentFullTitle,
   environmentTextClassName,
 } from "~/components/environments/EnvironmentLabel";
-import type { EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
+import { envSlugToType, type EnvSlug } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
 type BuildSettingsFieldsProps = {
   availableEnvSlugs: EnvSlug[];
@@ -20,10 +20,6 @@ type BuildSettingsFieldsProps = {
   envVarsConfigLink?: string;
 };
 
-function slugToEnvType(slug: EnvSlug) {
-  return slug === "prod" ? "PRODUCTION" : slug === "stg" ? "STAGING" : "PREVIEW";
-}
-
 export function BuildSettingsFields({
   availableEnvSlugs,
   pullEnvVarsBeforeBuild,
@@ -66,7 +62,7 @@ export function BuildSettingsFields({
         </div>
         <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
           {availableEnvSlugs.map((slug) => {
-            const envType = slugToEnvType(slug);
+            const envType = envSlugToType(slug);
             return (
               <div key={slug} className="flex items-center justify-between">
                 <div className="flex items-center gap-1.5">
@@ -125,7 +121,7 @@ export function BuildSettingsFields({
         </div>
         <div className="flex flex-col gap-2 rounded border bg-charcoal-800 p-3">
           {availableEnvSlugs.map((slug) => {
-            const envType = slugToEnvType(slug);
+            const envType = envSlugToType(slug);
             const isPullDisabled = !pullEnvVarsBeforeBuild.includes(slug);
             return (
               <div

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -49,6 +49,18 @@ import { vercelResourcePath } from "~/routes/resources.orgs.$organizationSlug.pr
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { useEffect, useState, useCallback, useRef } from "react";
 
+function safeRedirectUrl(url: string): string | null {
+  try {
+    const parsed = new URL(url, window.location.origin);
+    if (parsed.protocol === "https:" || parsed.origin === window.location.origin) {
+      return parsed.toString();
+    }
+  } catch {
+    // Invalid URL
+  }
+  return null;
+}
+
 function formatVercelTargets(targets: string[]): string {
   const targetLabels: Record<string, string> = {
     production: "Production",
@@ -241,9 +253,12 @@ export function VercelOnboardingModal({
       isGitHubConnectedForOnboarding
     ) {
       hasTriggeredMarketplaceRedirectRef.current = true;
-      setTimeout(() => {
-        window.location.href = nextUrl;
-      }, 100);
+      const validUrl = safeRedirectUrl(nextUrl);
+      if (validUrl) {
+        setTimeout(() => {
+          window.location.href = validUrl;
+        }, 100);
+      }
     }
   }, [isOpen, fromMarketplaceContext, nextUrl, isOnboardingComplete, isGitHubConnectedForOnboarding]);
 

apps/webapp/app/presenters/v3/VercelSettingsPresenter.server.ts

@@ -1,5 +1,5 @@
 import { type PrismaClient } from "@trigger.dev/database";
-import { fromPromise, ok, okAsync, ResultAsync } from "neverthrow";
+import { type Result, fromPromise, ok, okAsync, ResultAsync } from "neverthrow";
 import { env } from "~/env.server";
 import { logger } from "~/services/logger.server";
 import { OrgIntegrationRepository } from "~/models/orgIntegration.server";
@@ -62,7 +62,7 @@ export class VercelSettingsPresenter extends BasePresenter {
   /**
    * Get Vercel integration settings for the settings page
    */
-  public async call({ projectId, organizationId }: VercelSettingsOptions) {
+  public async call({ projectId, organizationId }: VercelSettingsOptions): Promise<Result<VercelSettingsResult, unknown>> {
     const vercelIntegrationEnabled = OrgIntegrationRepository.isVercelSupported;
 
     if (!vercelIntegrationEnabled) {

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx

@@ -74,6 +74,8 @@ import {
 } from "~/v3/environmentVariables/repository";
 import { UserAvatar } from "~/components/UserProfilePhoto";
 import { VercelIntegrationService } from "~/services/vercelIntegration.server";
+import { fromPromise } from "neverthrow";
+import { logger } from "~/services/logger.server";
 import { shouldSyncEnvVar, isPullEnvVarsEnabledForEnvironment, type TriggerEnvironmentType } from "~/v3/vercel/vercelProjectIntegrationSchema";
 
 export const meta: MetaFunction = () => {
@@ -121,7 +123,7 @@ const schema = z.discriminatedUnion("action", [
     action: z.literal("update-vercel-sync"),
     key: z.string(),
     environmentType: z.enum(["PRODUCTION", "STAGING", "PREVIEW", "DEVELOPMENT"]),
-    syncEnabled: z.string().transform((val) => val === "true"),
+    syncEnabled: z.union([z.literal("true"), z.literal("false")]).transform((val) => val === "true"),
   }),
 ]);
 
@@ -187,22 +189,31 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
         return json(submission);
       }
 
-      // Clean up syncEnvVarsMapping if Vercel integration exists
+      // Clean up syncEnvVarsMapping if Vercel integration exists (best-effort)
+      const { environmentId, key } = submission.value;
       const vercelService = new VercelIntegrationService();
-      const integration = await vercelService.getVercelProjectIntegration(project.id);
-      if (integration) {
-        const runtimeEnv = await prisma.runtimeEnvironment.findUnique({
-          where: { id: submission.value.environmentId },
-          select: { type: true },
-        });
-        if (runtimeEnv) {
-          await vercelService.removeSyncEnvVarForEnvironment(
-            project.id,
-            submission.value.key,
-            runtimeEnv.type as TriggerEnvironmentType
-          );
-        }
-      }
+      await fromPromise(
+        (async () => {
+          const integration = await vercelService.getVercelProjectIntegration(project.id);
+          if (integration) {
+            const runtimeEnv = await prisma.runtimeEnvironment.findUnique({
+              where: { id: environmentId },
+              select: { type: true },
+            });
+            if (runtimeEnv) {
+              await vercelService.removeSyncEnvVarForEnvironment(
+                project.id,
+                key,
+                runtimeEnv.type as TriggerEnvironmentType
+              );
+            }
+          }
+        })(),
+        (error) => error
+      ).mapErr((error) => {
+        logger.error("Failed to remove Vercel sync mapping", { error });
+        return error;
+      });
 
       return redirectWithSuccessMessage(
         v3EnvironmentVariablesPath(

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -349,7 +349,7 @@ export default function Page() {
         if (!isModalOpen) {
           openVercelOnboarding();
         }
-      } else if (vercelFetcher.state === "idle" && !vercelFetcher.data?.onboardingData) {
+      } else if (vercelFetcher.state === "idle" && vercelFetcher.data === undefined) {
         // Load onboarding data
         vercelFetcher.load(
           `${vercelResourcePath(organization.slug, project.slug, environment.slug)}?vercelOnboarding=true`

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github.tsx

@@ -538,9 +538,11 @@ export function ConnectGitHubRepoModal({
                   </Button>
                 }
                 cancelButton={
-                  <DialogClose asChild>
-                    <Button variant="tertiary/medium">Cancel</Button>
-                  </DialogClose>
+                  preventDismiss ? undefined : (
+                    <DialogClose asChild>
+                      <Button variant="tertiary/medium">Cancel</Button>
+                    </DialogClose>
+                  )
                 }
               />
             </Fieldset>

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel.tsx

@@ -158,24 +158,21 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   }
 
   const presenter = new VercelSettingsPresenter();
-  const resultOrFail = await fromPromise(
-    presenter.call({
-      projectId: project.id,
-      organizationId: project.organizationId,
-    }),
-    (error) => error
-  );
+  const resultOrFail = await presenter.call({
+    projectId: project.id,
+    organizationId: project.organizationId,
+  });
 
-  if (resultOrFail.isErr() || !resultOrFail.value?.isOk()) {
+  if (resultOrFail.isErr()) {
     logger.error("Failed to load Vercel settings", {
       url: request.url,
       params,
-      error: resultOrFail.isErr() ? resultOrFail.error : undefined,
+      error: resultOrFail.error,
     });
     throw new Response("Failed to load Vercel settings", { status: 500 });
   }
 
-  const result = resultOrFail.value.value;
+  const result = resultOrFail.value;
   const url = new URL(request.url);
   const needsOnboarding = url.searchParams.get("vercelOnboarding") === "true";
   const vercelEnvironmentId = url.searchParams.get("vercelEnvironmentId") || undefined;