Show error when build is limited (account is out of snapshots)

package.json

@@ -12,7 +12,8 @@
     "chromatic": "^11.0.0",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",
-    "react-confetti": "^6.1.0"
+    "react-confetti": "^6.1.0",
+    "strip-ansi": "^7.1.0"
   },
   "description": "Visual Testing addon with Chromatic",
   "devDependencies": {

src/Panel.tsx

@@ -16,7 +16,7 @@ import {
 } from "./constants";
 import { Project } from "./gql/graphql";
 import { Authentication } from "./screens/Authentication/Authentication";
-import { GitNotFound } from "./screens/GitNotFound/GitNotFound";
+import { GitNotFound } from "./screens/Errors/GitNotFound";
 import { LinkedProject } from "./screens/LinkProject/LinkedProject";
 import { LinkingProjectFailed } from "./screens/LinkProject/LinkingProjectFailed";
 import { LinkProject } from "./screens/LinkProject/LinkProject";

src/SidebarTop.tsx

@@ -34,7 +34,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
   const [localBuildProgress] = useSharedState<LocalBuildProgress>(LOCAL_BUILD_PROGRESS);
   const isRunning =
     !!localBuildProgress &&
-    !["aborted", "complete", "error"].includes(localBuildProgress.currentStep);
+    !["aborted", "complete", "error", "limited"].includes(localBuildProgress.currentStep);
 
   const [configInfo] = useSharedState<ConfigInfoPayload>(CONFIG_INFO);
   const hasConfigProblem = Object.keys(configInfo?.problems || {}).length > 0;
@@ -125,6 +125,23 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
         link: undefined,
       });
     }
+
+    if (localBuildProgress?.currentStep === "limited") {
+      addNotification({
+        id: `${ADDON_ID}/build-limited`,
+        content: {
+          headline: "Build limited",
+          subHeadline:
+            "Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
+        },
+        icon: {
+          name: "failed",
+          color: color.negative,
+        },
+        // @ts-expect-error SB needs a proper API for no link
+        link: undefined,
+      });
+    }
   }, [
     addNotification,
     clearNotification,

src/buildSteps.ts

@@ -114,6 +114,14 @@ export const BUILD_STEP_CONFIG: Record<
     renderComplete: () => `Build failed`,
     estimateDuration: 0,
   },
+  limited: {
+    key: "error",
+    emoji: "🚨",
+    renderName: () => `Build limited`,
+    renderProgress: () => `Build limited`,
+    renderComplete: () => `Build limited`,
+    estimateDuration: 0,
+  },
 };
 
 export const INITIAL_BUILD_PAYLOAD = {

src/components/Box.tsx

@@ -0,0 +1,32 @@
+import { styled } from "@storybook/theming";
+
+import { Text } from "./Text";
+
+export const Box = styled.div<{ warning?: boolean }>(
+  ({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: theme.appBorderRadius,
+    background: theme.base === "light" ? theme.color.lightest : theme.color.darkest,
+    border: `1px solid ${theme.appBorderColor}`,
+    padding: 15,
+    flex: 1,
+    gap: 14,
+    maxWidth: "500px",
+  }),
+  ({ theme, warning }) =>
+    warning && { background: theme.base === "dark" ? "#342e1a" : theme.background.warning }
+);
+
+export const BoxContent = styled(Text)(({ theme }) => ({
+  flex: 1,
+  textAlign: "left",
+  whiteSpace: "pre-wrap",
+  color: theme.base === "light" ? theme.color.darker : theme.color.lighter,
+}));
+
+export const BoxTitle = styled.b(() => ({
+  display: "block",
+  marginBottom: 2,
+}));

src/constants.ts

@@ -42,3 +42,5 @@ export const CONFIG_OVERRIDES = {
   // No prompts from the Build proces
   interactive: false,
 };
+
+export const DOCS_URL = "https://www.chromatic.com/docs/visual-tests-addon";

src/runChromaticBuild.test.ts

@@ -43,7 +43,7 @@ describe("runChromaticBuild", () => {
 
 describe("onStartOrProgress", () => {
   beforeEach(() => {
-    store.value = INITIAL_BUILD_PAYLOAD;
+    store.value = JSON.parse(JSON.stringify(INITIAL_BUILD_PAYLOAD));
   });
 
   it("sets build id and branch", () => {
@@ -132,7 +132,7 @@ describe("onStartOrProgress", () => {
 
 describe("onCompleteOrError", () => {
   beforeEach(() => {
-    store.value = INITIAL_BUILD_PAYLOAD;
+    store.value = JSON.parse(JSON.stringify(INITIAL_BUILD_PAYLOAD));
   });
 
   it("sets build progress to 100% on completion of final step", () => {
@@ -156,7 +156,7 @@ describe("onCompleteOrError", () => {
     expect(store.value).toMatchObject({
       buildProgressPercentage: expect.closeTo(41, 0),
       currentStep: "error",
-      stepProgress: { snapshot: { completedAt: expect.any(Number) } },
+      stepProgress: { snapshot: { startedAt: expect.any(Number) } },
       ...error,
     });
   });

src/runChromaticBuild.ts

@@ -50,7 +50,7 @@ export const onStartOrProgress =
     localBuildProgress: ReturnType<typeof SharedState.subscribe<LocalBuildProgress>>,
     timeout?: ReturnType<typeof setTimeout>
   ) =>
-  ({ ...ctx }: Context, { progress, total }: { progress?: number; total?: number } = {}) => {
+  (ctx: Context, { progress, total }: { progress?: number; total?: number } = {}) => {
     clearTimeout(timeout);
 
     if (!isKnownStep(ctx.task)) return;
@@ -63,6 +63,9 @@ export const onStartOrProgress =
     const { buildProgressPercentage, stepProgress, previousBuildProgress } =
       localBuildProgress.value;
 
+    // Ignore progress events for steps that have already completed
+    if (stepProgress[ctx.task]?.completedAt) return;
+
     const { startPercentage, endPercentage, stepPercentage } = getBuildStepData(
       ctx.task,
       previousBuildProgress
@@ -128,17 +131,20 @@ export const onCompleteOrError =
     }
 
     const { buildProgressPercentage, stepProgress } = localBuildProgress.value;
+    const update = {
+      buildId: ctx.announcedBuild?.id,
+      branch: ctx.git?.branch,
+      buildProgressPercentage,
+      stepProgress,
+      previousBuildProgress: stepProgress,
+    };
 
     if (error) {
       localBuildProgress.value = {
-        buildId: ctx.announcedBuild?.id,
-        branch: ctx.git?.branch,
-        buildProgressPercentage,
+        ...update,
         currentStep: abortController?.signal.aborted ? "aborted" : "error",
-        stepProgress,
         formattedError: error.formattedError,
         originalError: error.originalError,
-        previousBuildProgress: stepProgress,
       };
       return;
     }
@@ -150,16 +156,23 @@ export const onCompleteOrError =
       };
     }
 
+    if (ctx.task === "verify" && ctx.build?.wasLimited) {
+      localBuildProgress.value = {
+        ...update,
+        currentStep: "limited",
+        stepProgress,
+        errorDetailsUrl: ctx.build?.app.account?.billingUrl,
+      };
+    }
+
     if (ctx.build && ctx.task === "snapshot") {
       localBuildProgress.value = {
-        buildId: ctx.announcedBuild?.id,
-        branch: ctx.git?.branch,
+        ...update,
         buildProgressPercentage: 100,
         currentStep: "complete",
         stepProgress,
         changeCount: ctx.build.changeCount,
         errorCount: ctx.build.errorCount,
-        previousBuildProgress: stepProgress,
       };
     }
   };

src/screens/Errors/BuildError.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { INITIAL_BUILD_PAYLOAD } from "../../buildSteps";
+import { BuildError } from "./BuildError";
+
+const meta = {
+  component: BuildError,
+  args: {
+    localBuildProgress: {
+      buildProgressPercentage: 50,
+      currentStep: "error",
+      stepProgress: INITIAL_BUILD_PAYLOAD.stepProgress,
+      originalError: new Error("Caught exception in play function"),
+    },
+  },
+} satisfies Meta<typeof BuildError>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/screens/Errors/BuildError.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import stripAnsi from "strip-ansi";
+
+import { Box, BoxContent, BoxTitle } from "../../components/Box";
+import { Container } from "../../components/Container";
+import { Link } from "../../components/design-system";
+import { Heading } from "../../components/Heading";
+import { Screen } from "../../components/Screen";
+import { Stack } from "../../components/Stack";
+import { Text } from "../../components/Text";
+import { DOCS_URL } from "../../constants";
+import { LocalBuildProgress } from "../../types";
+
+export const ErrorBox = ({
+  localBuildProgress,
+  title,
+}: {
+  localBuildProgress: LocalBuildProgress;
+  title?: string;
+}) => (
+  <Box warning>
+    <BoxContent>
+      <div>
+        {title && <b>{title}: </b>}
+        {stripAnsi(
+          Array.isArray(localBuildProgress.originalError)
+            ? localBuildProgress.originalError[0]?.message
+            : localBuildProgress.originalError?.message || "Unknown error"
+        )}
+      </div>
+      <Link
+        target="_blank"
+        href={localBuildProgress.errorDetailsUrl || `${DOCS_URL}#troubleshooting`}
+        withArrow
+      >
+        {localBuildProgress.errorDetailsUrl ? "Details" : "Troubleshooting"}
+      </Link>
+    </BoxContent>
+  </Box>
+);
+
+export const BuildError = ({
+  children,
+  localBuildProgress,
+}: {
+  children?: React.ReactNode;
+  localBuildProgress: LocalBuildProgress;
+}) => {
+  return (
+    <Screen footer={null}>
+      <Container>
+        <Stack>
+          <div>
+            <Heading>Build failed</Heading>
+            <Text>Check the Storybook process on the command line for more details.</Text>
+          </div>
+          <ErrorBox localBuildProgress={localBuildProgress} />
+
+          {children}
+        </Stack>
+      </Container>
+    </Screen>
+  );
+};

src/screens/Errors/BuildLimited.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { INITIAL_BUILD_PAYLOAD } from "../../buildSteps";
+import { BuildLimited } from "./BuildLimited";
+
+const meta = {
+  component: BuildLimited,
+  args: {
+    localBuildProgress: {
+      buildProgressPercentage: 50,
+      currentStep: "error",
+      stepProgress: INITIAL_BUILD_PAYLOAD.stepProgress,
+      errorDetailsUrl: "https://www.chromatic.com/billing?accountId=5af25af03c9f2c4bdccc0fcb",
+    },
+  },
+} satisfies Meta<typeof BuildLimited>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/screens/Errors/BuildLimited.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Button } from "../../components/Button";
+import { Container } from "../../components/Container";
+import { Heading } from "../../components/Heading";
+import { Screen } from "../../components/Screen";
+import { Stack } from "../../components/Stack";
+import { Text } from "../../components/Text";
+import { LocalBuildProgress } from "../../types";
+
+export const BuildLimited = ({
+  children,
+  localBuildProgress,
+}: {
+  children?: React.ReactNode;
+  localBuildProgress: LocalBuildProgress;
+}) => {
+  return (
+    <Screen footer={null}>
+      <Container>
+        <Stack>
+          <div>
+            <Heading>Snapshot limit reached</Heading>
+            <Text>
+              Your account has reached its monthly snapshot limit. Visual testing is disabled.
+              Upgrade your plan to increase your quota.
+            </Text>
+          </div>
+
+          <Button asChild size="medium" variant="solid">
+            <a href={localBuildProgress.errorDetailsUrl} target="_new">
+              Upgrade plan
+            </a>
+          </Button>
+
+          {children}
+        </Stack>
+      </Container>
+    </Screen>
+  );
+};