fix: unhelpful error messages when custom background image was not a valid url

Author: Miodec

frontend/src/ts/commandline/lists.ts

@@ -106,7 +106,10 @@ import * as TestStats from "../test/test-stats";
 import * as QuoteSearchModal from "../modals/quote-search";
 import * as FPSCounter from "../elements/fps-counter";
 import { migrateConfig } from "../utils/config";
-import { PartialConfigSchema } from "@monkeytype/contracts/schemas/configs";
+import {
+  CustomBackgroundSchema,
+  PartialConfigSchema,
+} from "@monkeytype/contracts/schemas/configs";
 import { Command, CommandsSubgroup } from "./types";
 import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
 
@@ -307,6 +310,14 @@ export const commands: CommandsSubgroup = {
       },
       input: true,
       exec: ({ input }): void => {
+        const parsed = CustomBackgroundSchema.safeParse(input);
+        if (!parsed.success) {
+          Notifications.add(
+            `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+            0
+          );
+          return;
+        }
         UpdateConfig.setCustomBackground(input ?? "");
       },
     },

frontend/src/ts/pages/settings.ts

@@ -22,6 +22,7 @@ import * as Skeleton from "../utils/skeleton";
 import * as CustomBackgroundFilter from "../elements/custom-background-filter";
 import {
   ConfigValue,
+  CustomBackgroundSchema,
   CustomLayoutFluid,
 } from "@monkeytype/contracts/schemas/configs";
 import {
@@ -1108,11 +1109,21 @@ $(".pageSettings .sectionGroupTitle").on("click", (e) => {
 $(
   ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton button.save"
 ).on("click", () => {
-  UpdateConfig.setCustomBackground(
-    $(
-      ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
-    ).val() as string
-  );
+  const newVal = $(
+    ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
+  ).val() as string;
+
+  const parsed = CustomBackgroundSchema.safeParse(newVal);
+
+  if (!parsed.success) {
+    Notifications.add(
+      `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+      0
+    );
+    return;
+  }
+
+  UpdateConfig.setCustomBackground(newVal);
 });
 
 $(
@@ -1125,11 +1136,21 @@ $(
   ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
 ).on("keypress", (e) => {
   if (e.key === "Enter") {
-    UpdateConfig.setCustomBackground(
-      $(
-        ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
-      ).val() as string
-    );
+    const newVal = $(
+      ".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
+    ).val() as string;
+
+    const parsed = CustomBackgroundSchema.safeParse(newVal);
+
+    if (!parsed.success) {
+      Notifications.add(
+        `Invalid custom background URL (${parsed.error.issues[0]?.message})`,
+        0
+      );
+      return;
+    }
+
+    UpdateConfig.setCustomBackground(newVal);
   }
 });