@checkstack/healthcheck-frontend 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @checkstack/healthcheck-frontend
 
+## 0.4.3
+
+### Patch Changes
+
+- dd07c14: Fix collector add button failing in HTTP contexts by replacing `crypto.randomUUID()` with the `uuid` package
+
 ## 0.4.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "main": "src/index.tsx",
   "scripts": {
@@ -26,13 +26,14 @@
     "react-router-dom": "^6.20.0",
     "react-simple-code-editor": "^0.14.1",
     "recharts": "^3.6.0",
+    "uuid": "^13.0.0",
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@checkstack/scripts": "workspace:*",
+    "@checkstack/tsconfig": "workspace:*",
     "@types/prismjs": "^1.26.5",
-    "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "workspace:*",
-    "@checkstack/scripts": "workspace:*"
+    "typescript": "^5.0.0"
   }
 }

package/src/components/CollectorList.tsx

@@ -22,6 +22,7 @@ import {
   Badge,
 } from "@checkstack/ui";
 import { Plus, Trash2 } from "lucide-react";
+import { v4 as generateId } from "uuid";
 import { isBuiltInCollector } from "../hooks/useCollectors";
 import { AssertionBuilder, type Assertion } from "./AssertionBuilder";
 
@@ -67,20 +68,20 @@ export const CollectorList: React.FC<CollectorListProps> = ({
     (index: number, isValid: boolean) => {
       setValidityMap((prev) => ({ ...prev, [index]: isValid }));
     },
-    []
+    [],
   );
   // Separate built-in and external collectors
   const builtInCollectors = availableCollectors.filter((c) =>
-    isBuiltInCollector(c.id, strategyId)
+    isBuiltInCollector(c.id, strategyId),
   );
   const externalCollectors = availableCollectors.filter(
-    (c) => !isBuiltInCollector(c.id, strategyId)
+    (c) => !isBuiltInCollector(c.id, strategyId),
   );
 
   // Get collectors that can still be added
   const getAddableCollectors = () => {
     const configuredIds = new Set(
-      configuredCollectors.map((c) => c.collectorId)
+      configuredCollectors.map((c) => c.collectorId),
     );
 
     return availableCollectors.filter((c) => {
@@ -100,7 +101,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
     if (!collector) return;
 
     const newEntry: CollectorConfigEntry = {
-      id: crypto.randomUUID(),
+      id: generateId(),
       collectorId,
       config: {},
       assertions: [],
@@ -122,7 +123,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
 
   const handleConfigChange = (
     index: number,
-    config: Record<string, unknown>
+    config: Record<string, unknown>,
   ) => {
     const updated = [...configuredCollectors];
     updated[index] = { ...updated[index], config };
@@ -224,7 +225,7 @@ export const CollectorList: React.FC<CollectorListProps> = ({
               const collector = getCollectorDetails(entry.collectorId);
               const isBuiltIn = isBuiltInCollector(
                 entry.collectorId,
-                strategyId
+                strategyId,
               );
 
               return (