feat(webapp/deployments): Vercel improvements & fixes

.vscode/launch.json

@@ -31,6 +31,15 @@
       "cwd": "${workspaceFolder}/apps/webapp",
       "sourceMaps": true
     },
+    {
+      "type": "node-terminal",
+      "request": "launch",
+      "name": "Debug opened test file",
+      "command": "pnpm run test -- ./${relativeFile}",
+      "envFile": "${workspaceFolder}/.env",
+      "cwd": "${workspaceFolder}",
+      "sourceMaps": true
+    },
     {
       "type": "chrome",
       "request": "launch",

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

@@ -47,6 +47,7 @@ import { type VercelOnboardingData } from "~/presenters/v3/VercelSettingsPresent
 import { vercelAppInstallPath, v3ProjectSettingsPath, githubAppInstallPath, vercelResourcePath } from "~/utils/pathBuilder";
 import type { loader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 import { useEffect, useState, useCallback, useRef } from "react";
+import { usePostHogTracking } from "~/hooks/usePostHog";
 
 function safeRedirectUrl(url: string): string | null {
   try {
@@ -114,6 +115,7 @@ export function VercelOnboardingModal({
   nextUrl?: string;
   onDataReload?: (vercelStagingEnvironment?: string) => void;
 }) {
+  const { capture, startSessionRecording } = usePostHogTracking();
   const navigation = useNavigation();
   const fetcher = useTypedFetcher<typeof loader>();
   const envMappingFetcher = useFetcher();
@@ -172,6 +174,33 @@ export function VercelOnboardingModal({
     prevIsOpenRef.current = isOpen;
   }, [isOpen, state, computeInitialState]);
 
+  const trackOnboarding = useCallback(
+    (eventName: string, extraProperties?: Record<string, unknown>) => {
+      capture(eventName, {
+        origin: fromMarketplaceContext ? "marketplace" : "dashboard",
+        step: state,
+        organization_slug: organizationSlug,
+        project_slug: projectSlug,
+        ...extraProperties,
+      });
+    },
+    [capture, fromMarketplaceContext, state, organizationSlug, projectSlug]
+  );
+
+  const hasTrackedStartRef = useRef(false);
+  const hasTrackedCompletionRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && state === "project-selection" && !hasTrackedStartRef.current) {
+      hasTrackedStartRef.current = true;
+      startSessionRecording();
+      trackOnboarding("vercel onboarding started");
+    }
+    if (!isOpen) {
+      hasTrackedStartRef.current = false;
+      hasTrackedCompletionRef.current = false;
+    }
+  }, [isOpen, state, trackOnboarding, startSessionRecording]);
+
   const [selectedVercelProject, setSelectedVercelProject] = useState<{
     id: string;
     name: string;
@@ -337,14 +366,17 @@ export function VercelOnboardingModal({
 
   useEffect(() => {
     if (state === "project-selection" && fetcher.data && "success" in fetcher.data && fetcher.data.success && fetcher.state === "idle") {
+      trackOnboarding("vercel onboarding project selected", {
+        vercel_project_name: selectedVercelProject?.name,
+      });
       setState("loading-env-mapping");
       if (onDataReload) {
         onDataReload();
       }
     } else if (fetcher.data && "error" in fetcher.data && typeof fetcher.data.error === "string") {
       setProjectSelectionError(fetcher.data.error);
     }
-  }, [state, fetcher.data, fetcher.state, onDataReload]);
+  }, [state, fetcher.data, fetcher.state, onDataReload, trackOnboarding, selectedVercelProject?.name]);
 
   // For marketplace origin, skip env-mapping step
   useEffect(() => {
@@ -449,14 +481,23 @@ export function VercelOnboardingModal({
       method: "post",
       action: actionUrl,
     });
-  }, [actionUrl, fetcher, onClose, nextUrl, fromMarketplaceContext]);
+  }, [actionUrl, fetcher, onClose, fromMarketplaceContext]);
 
   const handleSkipEnvMapping = useCallback(() => {
+    trackOnboarding("vercel onboarding env mapping completed", {
+      skipped: true,
+      staging_environment: null,
+    });
     setVercelStagingEnvironment(null);
     setState("loading-env-vars");
-  }, []);
+  }, [trackOnboarding]);
 
   const handleUpdateEnvMapping = useCallback(() => {
+    trackOnboarding("vercel onboarding env mapping completed", {
+      skipped: false,
+      staging_environment: vercelStagingEnvironment?.displayName ?? null,
+    });
+
     if (!vercelStagingEnvironment) {
       setState("loading-env-vars");
       return;
@@ -471,9 +512,11 @@ export function VercelOnboardingModal({
       action: actionUrl,
     });
 
-  }, [vercelStagingEnvironment, envMappingFetcher, actionUrl]);
+  }, [vercelStagingEnvironment, envMappingFetcher, actionUrl, trackOnboarding]);
 
   const handleBuildSettingsNext = useCallback(() => {
+    trackOnboarding("vercel onboarding build settings completed");
+
     if (nextUrl && fromMarketplaceContext && isGitHubConnectedForOnboarding) {
       setIsRedirecting(true);
     }
@@ -501,7 +544,7 @@ export function VercelOnboardingModal({
     if (!isGitHubConnectedForOnboarding) {
       setState("github-connection");
     }
-  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl]);
+  }, [vercelStagingEnvironment, pullEnvVarsBeforeBuild, atomicBuilds, discoverEnvVars, syncEnvVarsMapping, nextUrl, fromMarketplaceContext, isGitHubConnectedForOnboarding, completeOnboardingFetcher, actionUrl, trackOnboarding]);
 
   const handleFinishOnboarding = useCallback((e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -530,10 +573,14 @@ export function VercelOnboardingModal({
   }, [completeOnboardingFetcher.data, completeOnboardingFetcher.state, state]);
 
   useEffect(() => {
-    if (state === "completed") {
+    if (state === "completed" && !hasTrackedCompletionRef.current) {
+      hasTrackedCompletionRef.current = true;
+      trackOnboarding("vercel onboarding completed", {
+        github_connected: isGitHubConnectedForOnboarding,
+      });
       onClose();
     }
-  }, [state, onClose]);
+  }, [state, onClose, trackOnboarding, isGitHubConnectedForOnboarding]);
 
   useEffect(() => {
     if (state === "installing") {
@@ -565,6 +612,12 @@ export function VercelOnboardingModal({
     }
   }, [state, customEnvironments, vercelStagingEnvironment]);
 
+  useEffect(() => {
+    if (state === "project-selection" && availableProjects.length > 0 && !selectedVercelProject) {
+      setSelectedVercelProject(availableProjects[0]);
+    }
+  }, [state, availableProjects, selectedVercelProject]);
+
   if (!isOpen || onboardingData?.authInvalid) {
     return null;
   }
@@ -578,7 +631,14 @@ export function VercelOnboardingModal({
 
   if (isLoadingState) {
     return (
-      <Dialog open={isOpen} onOpenChange={(open) => !open && !fromMarketplaceContext && onClose()}>
+      <Dialog open={isOpen} onOpenChange={(open) => {
+        if (!open && !fromMarketplaceContext) {
+          if (state as string !== "completed") {
+            trackOnboarding("vercel onboarding abandoned");
+          }
+          onClose();
+        }
+      }}>
         <DialogContent className="max-w-lg">
           <DialogHeader>
             <div className="flex items-center gap-2">
@@ -601,7 +661,14 @@ export function VercelOnboardingModal({
   const showGitHubConnection = state === "github-connection";
 
   return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && !fromMarketplaceContext && onClose()}>
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open && !fromMarketplaceContext) {
+        if (state !== "completed") {
+          trackOnboarding("vercel onboarding abandoned");
+        }
+        onClose();
+      }
+    }}>
       <DialogContent className="max-w-lg">
         <DialogHeader>
           <div className="flex items-center gap-2">
@@ -625,6 +692,7 @@ export function VercelOnboardingModal({
                 </Callout>
               ) : (
                 <Select
+                  disabled={availableProjects.length === 1}
                   value={selectedVercelProject?.id || ""}
                   setValue={(value) => {
                     if (!Array.isArray(value)) {
@@ -634,6 +702,7 @@ export function VercelOnboardingModal({
                     }
                   }}
                   items={availableProjects}
+                  filter={availableProjects.length > 5 ? { keys: ["name"] } : undefined}
                   variant="tertiary/medium"
                   placeholder="Select a Vercel project"
                   dropdownIcon
@@ -894,6 +963,10 @@ export function VercelOnboardingModal({
                   <Button
                     variant="primary/medium"
                     onClick={() => {
+                      trackOnboarding("vercel onboarding env vars configured", {
+                        env_vars_enabled: enabledEnvVars.length,
+                        env_vars_total: syncableEnvVars.length,
+                      });
                       if (fromMarketplaceContext) {
                         handleBuildSettingsNext();
                       } else {

apps/webapp/app/hooks/usePostHog.ts

@@ -1,6 +1,6 @@
 import { useLocation } from "@remix-run/react";
 import posthog from "posthog-js";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useOrganizationChanged } from "./useOrganizations";
 import { useOptionalUser, useUserChanged } from "./useUser";
 import { useProjectChanged } from "./useProject";
@@ -68,3 +68,18 @@ export const usePostHog = (apiKey?: string, logging = false, debug = false): voi
     posthog.capture("$pageview");
   }, [location, logging]);
 };
+
+export function usePostHogTracking() {
+  const capture = useCallback(
+    (eventName: string, properties?: Record<string, unknown>) => {
+      posthog.capture(eventName, properties);
+    },
+    []
+  );
+
+  const startSessionRecording = useCallback(() => {
+    posthog.startSessionRecording();
+  }, []);
+
+  return { capture, startSessionRecording };
+}

apps/webapp/app/routes/api.v1.deployments.$deploymentId.progress.ts

@@ -48,6 +48,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
       contentHash: body.data.contentHash,
       git: body.data.gitMeta,
       runtime: body.data.runtime,
+      buildServerMetadata: body.data.buildServerMetadata,
     })
     .match(
       () => {

apps/webapp/app/v3/services/deployment.server.ts

@@ -2,7 +2,12 @@ import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { BaseService } from "./baseService.server";
 import { errAsync, fromPromise, okAsync, type ResultAsync } from "neverthrow";
 import { type WorkerDeployment, type Project } from "@trigger.dev/database";
-import { BuildServerMetadata, logger, type GitMeta, type DeploymentEvent } from "@trigger.dev/core/v3";
+import {
+  BuildServerMetadata,
+  logger,
+  type GitMeta,
+  type DeploymentEvent,
+} from "@trigger.dev/core/v3";
 import { TimeoutDeploymentService } from "./timeoutDeployment.server";
 import { env } from "~/env.server";
 import { createRemoteImageBuild } from "../remoteImageBuilder.server";
@@ -38,9 +43,20 @@ export class DeploymentService extends BaseService {
   public progressDeployment(
     authenticatedEnv: AuthenticatedEnvironment,
     friendlyId: string,
-    updates: Partial<Pick<WorkerDeployment, "contentHash" | "runtime"> & { git: GitMeta }>
+    updates: Partial<
+      Pick<WorkerDeployment, "contentHash" | "runtime"> & {
+        git: GitMeta;
+        buildServerMetadata: BuildServerMetadata;
+      }
+    >
   ) {
-    const validateDeployment = (deployment: Pick<WorkerDeployment, "id" | "status"> & { buildServerMetadata?: BuildServerMetadata }) => {
+    const { buildServerMetadata: newBuildServerMetadata, ...restUpdates } = updates;
+
+    const validateDeployment = (
+      deployment: Pick<WorkerDeployment, "id" | "status"> & {
+        buildServerMetadata?: BuildServerMetadata;
+      }
+    ) => {
       if (deployment.status !== "PENDING" && deployment.status !== "INSTALLING") {
         logger.warn(
           "Attempted progressing deployment that is not in PENDING or INSTALLING status",
@@ -54,12 +70,24 @@ export class DeploymentService extends BaseService {
       return okAsync(deployment);
     };
 
-    const progressToInstalling = (deployment: Pick<WorkerDeployment, "id">) =>
-      fromPromise(
+    const progressToInstalling = (
+      deployment: Pick<WorkerDeployment, "id"> & { buildServerMetadata?: BuildServerMetadata }
+    ) => {
+      const existingBuildServerMetadata = deployment.buildServerMetadata;
+
+      return fromPromise(
         this._prisma.workerDeployment.updateMany({
           where: { id: deployment.id, status: "PENDING" }, // status could've changed in the meantime, we're not locking the row
           data: {
-            ...updates,
+            ...restUpdates,
+            ...(newBuildServerMetadata
+              ? {
+                  buildServerMetadata: {
+                    ...(existingBuildServerMetadata ?? {}),
+                    ...newBuildServerMetadata,
+                  },
+                }
+              : {}),
             status: "INSTALLING",
             startedAt: new Date(),
           },
@@ -74,6 +102,7 @@ export class DeploymentService extends BaseService {
         }
         return okAsync({ id: deployment.id, status: "INSTALLING" as const });
       });
+    };
 
     const progressToBuilding = (
       deployment: Pick<WorkerDeployment, "id"> & { buildServerMetadata?: BuildServerMetadata }
@@ -85,13 +114,26 @@ export class DeploymentService extends BaseService {
           cause: error,
         }));
 
+      const existingBuildServerMetadata = deployment.buildServerMetadata as
+        | BuildServerMetadata
+        | null
+        | undefined;
+
       return createRemoteBuildIfNeeded
         .andThen((externalBuildData) =>
           fromPromise(
             this._prisma.workerDeployment.updateMany({
               where: { id: deployment.id, status: "INSTALLING" }, // status could've changed in the meantime, we're not locking the row
               data: {
-                ...updates,
+                ...restUpdates,
+                ...(newBuildServerMetadata
+                  ? {
+                      buildServerMetadata: {
+                        ...(existingBuildServerMetadata ?? {}),
+                        ...newBuildServerMetadata,
+                      },
+                    }
+                  : {}),
                 externalBuildData,
                 status: "BUILDING",
                 installedAt: new Date(),

apps/webapp/app/v3/services/initializeDeployment.server.ts

@@ -200,6 +200,7 @@ export class InitializeDeploymentService extends BaseService {
                     artifactKey: payload.artifactKey,
                     skipPromotion: payload.skipPromotion,
                     configFilePath: payload.configFilePath,
+                    skipEnqueue: payload.skipEnqueue,
                   }
                 : {}),
             }
@@ -238,7 +239,8 @@ export class InitializeDeploymentService extends BaseService {
         new Date(Date.now() + timeoutMs)
       );
 
-      if (payload.isNativeBuild) {
+      // For github integration there is no artifactKey, hence we skip it here
+      if (payload.isNativeBuild && payload.artifactKey && !payload.skipEnqueue) {
         const result = await deploymentService
           .enqueueBuild(environment, deployment, payload.artifactKey, {
             skipPromotion: payload.skipPromotion,