track-container-exits

Author: Flo4604

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/deployment-progress.tsx

@@ -38,6 +38,20 @@ export function DeploymentProgress({ stepsData }: { stepsData?: StepsData }) {
 
   const { getDomainsForDeployment, projectId } = useProjectData();
 
+  // Fetch instance errors for the failed deployment banner.
+  // Only enabled when the deployment has failed so we don't waste queries on healthy deploys.
+  const { data: deploymentTree } = trpc.deploy.network.get.useQuery(
+    { deploymentId: deployment.id },
+    { enabled: isFailed },
+  );
+  const instanceErrors = isFailed
+    ? (deploymentTree?.children ?? [])
+        .flatMap((sentinel) => ("children" in sentinel && sentinel.children) ? sentinel.children : [])
+        .filter((inst) => inst.metadata.type === "instance" && "message" in inst.metadata && inst.metadata.message)
+        .map((inst) => (inst.metadata as { message: string }).message)
+        .filter((msg, i, arr) => arr.indexOf(msg) === i) // dedupe
+    : [];
+
   const [now, setNow] = useState(Date.now);
   useEffect(() => {
     if (isFailed) {
@@ -210,6 +224,7 @@ export function DeploymentProgress({ stepsData }: { stepsData?: StepsData }) {
           redeployOpen={redeployOpen}
           onRedeployClose={() => setRedeployOpen(false)}
           deployment={deployment}
+          instanceErrors={instanceErrors}
         />
       )}
       {network?.completed && (

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/failed-deployment-banner.tsx

@@ -32,15 +32,21 @@ export function FailedDeploymentBanner({
   redeployOpen,
   onRedeployClose,
   deployment,
+  instanceErrors,
 }: {
   steps: StepEntry[];
   settingsUrl: string;
   onRedeploy: () => void;
   redeployOpen: boolean;
   onRedeployClose: () => void;
   deployment: Deployment;
+  instanceErrors?: string[];
 }) {
-  const errorMessage = steps.find((s) => s?.error)?.error ?? "Deployment failed";
+  const stepError = steps.find((s) => s?.error)?.error;
+  const errorMessage = stepError
+    ?? (instanceErrors && instanceErrors.length > 0
+      ? instanceErrors.join("; ")
+      : "Deployment failed");
   const showSettingsLink = isSettingsRelatedError(errorMessage);
 
   return (

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/deployment-utils.ts

@@ -40,6 +40,11 @@ export function deriveStatusFromSteps(
     return "finalizing";
   }
   if (finalizing?.completed) {
+    // Pipeline completed, but the deployment may have been marked as failed
+    // post-deploy (e.g. all instances crashed). Respect the DB status.
+    if (fallback === "failed") {
+      return "failed";
+    }
     return "ready";
   }
   if (network && !network.endedAt) {

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/instance-node.tsx

@@ -12,7 +12,7 @@ type InstanceNodeProps = {
 };
 
 export function InstanceNode({ node, flagCode, deploymentId }: InstanceNodeProps) {
-  const { cpu, memory, health } = node.metadata;
+  const { cpu, memory, health, message } = node.metadata;
 
   const { data: rps } = trpc.deploy.network.getInstanceRps.useQuery(
     {
@@ -34,7 +34,7 @@ export function InstanceNode({ node, flagCode, deploymentId }: InstanceNodeProps
           </div>
         }
         title={node.label}
-        subtitle="Instance Replica"
+        subtitle={health === "unhealthy" && message ? message : "Instance Replica"}
         health={health}
       />
       <CardFooter type="instance" flagCode={flagCode} rps={rps} cpu={cpu} memory={memory} />

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/types.ts

@@ -37,6 +37,8 @@ type InstanceNode = BaseNode & {
     type: "instance";
     description: string;
     replicas: number;
+    message?: string;
+    failureReason?: string;
   } & BaseMetrics;
 };
 

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/overlay/node-details-panel/region-node/sentinel-instances.tsx

@@ -88,6 +88,11 @@ export function SentinelInstances({ instances }: SentinelInstancesProps) {
                     showGlow={health !== "normal"}
                   />
                 </div>
+                {health === "unhealthy" && instance.metadata.type === "instance" && instance.metadata.message && (
+                  <div className="text-[11px] text-error-11 mt-1">
+                    {instance.metadata.message}
+                  </div>
+                )}
               </div>
             </div>
           );

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 import { trpc } from "@/lib/trpc/client";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useParams } from "next/navigation";
 import { DeploymentDomainsCard } from "../../../components/deployment-domains-card";
 import { ProjectContentWrapper } from "../../../components/project-content-wrapper";
 import { useProjectData } from "../../data-provider";
 import { DeploymentApproval } from "./(deployment-progress)/deployment-approval";
 import { DeploymentInfo } from "./(deployment-progress)/deployment-info";
+import { FailedDeploymentBanner } from "./(deployment-progress)/failed-deployment-banner";
 import { DeploymentProgress } from "./(deployment-progress)/deployment-progress";
 import { SkippedDeploymentView } from "./(deployment-progress)/skipped-deployment-view";
 import { DeploymentNetworkSection } from "./(overview)/components/sections/deployment-network-section";
@@ -35,6 +37,29 @@ export default function DeploymentOverview() {
     [stepsQuery.data, deployment.status, skipped],
   );
 
+  // A post-deploy failure is when the pipeline completed successfully but the
+  // deployment was later marked as failed (e.g. all instances crashed).
+  const pipelineCompleted = stepsQuery.data?.finalizing?.completed === true;
+  const isPostDeployFailure = derivedStatus === "failed" && pipelineCompleted;
+
+  const [redeployOpen, setRedeployOpen] = useState(false);
+  const params = useParams();
+  const workspaceSlug = params.workspaceSlug as string;
+  const { projectId } = useProjectData();
+
+  // Fetch instance errors for post-deploy failure banner
+  const { data: deploymentTree } = trpc.deploy.network.get.useQuery(
+    { deploymentId: deployment.id },
+    { enabled: isPostDeployFailure },
+  );
+  const instanceErrors = isPostDeployFailure
+    ? (deploymentTree?.children ?? [])
+        .flatMap((sentinel) => ("children" in sentinel && sentinel.children) ? sentinel.children : [])
+        .filter((inst) => inst.metadata.type === "instance" && "message" in inst.metadata && inst.metadata.message)
+        .map((inst) => (inst.metadata as { message: string }).message)
+        .filter((msg, i, arr) => arr.indexOf(msg) === i)
+    : [];
+
   useEffect(() => {
     if (ready) {
       stepsQuery.refetch();
@@ -60,8 +85,19 @@ export default function DeploymentOverview() {
         <div key="skipped" className="animate-fade-slide-in">
           <SkippedDeploymentView />
         </div>
-      ) : ready ? (
+      ) : ready || isPostDeployFailure ? (
         <div key="ready" className="flex flex-col gap-5 animate-fade-slide-in">
+          {isPostDeployFailure && (
+            <FailedDeploymentBanner
+              steps={[]}
+              settingsUrl={`/${workspaceSlug}/projects/${projectId}/settings`}
+              onRedeploy={() => setRedeployOpen(true)}
+              redeployOpen={redeployOpen}
+              onRedeployClose={() => setRedeployOpen(false)}
+              deployment={deployment}
+              instanceErrors={instanceErrors}
+            />
+          )}
           <DeploymentDomainsCard />
           <DeploymentNetworkSection />
         </div>