@localstack/appinspector-ui 1.0.162 → 1.0.163

package/dist/index.cjs

@@ -2452,6 +2452,13 @@ var ConnectionError = class extends Error {
     this.cause = cause;
   }
 };
+var StaleTokenError = class extends Error {
+  constructor(message, cause) {
+    super(message);
+    this.name = "StaleTokenError";
+    this.cause = cause;
+  }
+};
 
 // src/api/use-api.tsx
 var import_react = require("react");
@@ -16957,7 +16964,8 @@ var import_semver2 = __toESM(require_semver2(), 1);
 var ERROR_MESSAGES = {
   APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
   APP_INSPECTOR_NOT_FOUND: "App Inspector API not found. Please ensure App Inspector is licensed and enabled.",
-  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible."
+  CONNECTION_FAILED: "Failed to connect to LocalStack. Please ensure LocalStack is running and accessible.",
+  STALE_PAGINATION_TOKEN: "Pagination token is from a previous session."
 };
 
 // src/utils/logger.ts
@@ -17020,6 +17028,16 @@ function unixNanoToMilliseconds(unixNanoString) {
 // src/api/client.ts
 var apiLogger = createScopedLogger("API");
 var analyticsLogger = createScopedLogger("ANALYTICS");
+var isStalePaginationTokenMessage = (body) => {
+  let candidate = body;
+  try {
+    const parsed = JSON.parse(body);
+    const messageField = [parsed.message, parsed.error, parsed.detail].find((value) => typeof value === "string");
+    candidate = typeof messageField === "string" ? messageField : body;
+  } catch {
+  }
+  return candidate.toLowerCase().includes("previous session");
+};
 var makeRequest = async (options) => {
   const url = getAppInspectorApiUrl(options.localstackEndpoint, options.endpoint);
   try {
@@ -17043,6 +17061,15 @@ var makeRequest = async (options) => {
           new Error(`503 from ${url}: ${response.statusText}`)
         );
       }
+      if (response.status === 400) {
+        const body = await response.text().catch(() => "");
+        if (isStalePaginationTokenMessage(body)) {
+          throw new StaleTokenError(
+            ERROR_MESSAGES.STALE_PAGINATION_TOKEN,
+            new Error(`400 from ${url}: ${response.statusText}`)
+          );
+        }
+      }
       throw new Error(`API request failed: ${response.status.toString()} ${response.statusText}`);
     }
     options.captureHeaders?.(response.headers);
@@ -19148,6 +19175,35 @@ var AppInspectorContextProvider = (props) => {
 };
 
 // src/hooks/use-spans-ws.tsx
+var wsLogger = createScopedLogger("WS");
+var isLegacySpanFields = (value) => {
+  return typeof value.span_id === "string" && typeof value.trace_id === "string" && typeof value.timestamp === "string";
+};
+var parseSpansWebSocketMessage = (raw) => {
+  const parsed = JSON.parse(raw);
+  if (typeof parsed !== "object" || parsed === null) {
+    return void 0;
+  }
+  const record = parsed;
+  if (record.type === void 0) {
+    return isLegacySpanFields(record) ? { data: record, type: "span" } : void 0;
+  }
+  if (record.type === "epoch" || record.type === "reset") {
+    return typeof record.epoch === "string" ? { epoch: record.epoch, type: record.type } : void 0;
+  }
+  if (record.type === "span") {
+    const data = record.data;
+    if (typeof data !== "object" || data === null || !isLegacySpanFields(data)) {
+      return void 0;
+    }
+    return {
+      data,
+      epoch: typeof record.epoch === "string" ? record.epoch : void 0,
+      type: "span"
+    };
+  }
+  return void 0;
+};
 function useSpansWebSocket(options) {
   const { enabled, onClose, onMessage, onOpen } = options;
   const onMessageRef = (0, import_react46.useRef)(onMessage);
@@ -19169,6 +19225,7 @@ function useSpansWebSocket(options) {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
+    url.searchParams.set("epoch", "1");
     const ws = new WebSocket(url);
     wsRef.current = ws;
     ws.addEventListener("open", () => {
@@ -19176,9 +19233,20 @@ function useSpansWebSocket(options) {
       setConnected(true);
       onOpenRef.current();
     });
-    ws.addEventListener("message", () => {
+    ws.addEventListener("message", (event) => {
       if (wsRef.current !== ws) return;
-      onMessageRef.current();
+      let message;
+      try {
+        message = parseSpansWebSocketMessage(event.data);
+      } catch (error) {
+        wsLogger.warn("Failed to parse WS message:", { error });
+        return;
+      }
+      if (message === void 0) {
+        wsLogger.warn("Received unrecognized WS message shape:", { data: String(event.data) });
+        return;
+      }
+      onMessageRef.current(message);
     });
     ws.addEventListener("close", () => {
       if (wsRef.current !== ws) return;
@@ -19222,7 +19290,7 @@ function useSpansWebSocket(options) {
 var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const { onWsClose, onWsOpen, wsEnabled } = useAppInspectorStatus();
+  const { onWsClose, onWsOpen, status, wsEnabled } = useAppInspectorStatus();
   const [spans, setSpans] = (0, import_react47.useState)();
   const [fetchError, setFetchError] = (0, import_react47.useState)();
   const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
@@ -19245,6 +19313,33 @@ var useSpans = () => {
   const fetchBackward = (0, import_react47.useCallback)(() => {
     void paginationBufferRef.current?.fetchBackward();
   }, []);
+  const [epoch, setEpoch] = (0, import_react47.useState)();
+  const onEpochSeen = (0, import_react47.useCallback)((observedEpoch) => {
+    if (observedEpoch === null || observedEpoch === void 0) {
+      return;
+    }
+    setEpoch(observedEpoch);
+  }, []);
+  const clearCache = (0, import_react47.useCallback)(() => {
+    paginationBufferRef.current?.clear();
+    setTotalCount(void 0);
+    setErrorCount(void 0);
+    setWarningCount(void 0);
+    void paginationBufferRef.current?.fetchForward();
+  }, []);
+  const hasFetchedWithoutEpochRef = (0, import_react47.useRef)(false);
+  const previousEpochRef = (0, import_react47.useRef)();
+  (0, import_react47.useEffect)(() => {
+    if (epoch === void 0) {
+      return;
+    }
+    const isEpochChange = previousEpochRef.current !== void 0 && previousEpochRef.current !== epoch;
+    const isFirstEpochAfterUnknownBackend = previousEpochRef.current === void 0 && hasFetchedWithoutEpochRef.current;
+    if (isEpochChange || isFirstEpochAfterUnknownBackend) {
+      clearCache();
+    }
+    previousEpochRef.current = epoch;
+  }, [epoch, clearCache]);
   const applySearch = (0, import_react47.useCallback)((term) => {
     const normalized = term.trim();
     if (normalized === searchRef.current) {
@@ -19264,23 +19359,37 @@ var useSpans = () => {
   (0, import_react47.useEffect)(() => {
     const buffer = createPaginationBuffer({
       async fetchPage(token, signal) {
-        const response = await api.getSpans({
-          limit: PAGE_SIZE,
-          pagination_token: token,
-          search: searchRef.current || void 0
-        }, { signal });
-        setTotalCount(response.pagination.total_count);
-        setLicenseLimit(response.limits.span_count_limit_license);
-        setSystemLimit(response.limits.span_count_limit_system);
-        setErrorCount(response.error_count);
-        setWarningCount(response.warning_count);
-        return {
-          hasMoreBackward: response.pagination.has_prev,
-          hasMoreForward: response.pagination.has_next,
-          items: response.spans,
-          nextBackwardToken: response.pagination.prev_cursor ?? void 0,
-          nextForwardToken: response.pagination.next_cursor ?? void 0
+        const requestPage = async (paginationToken) => {
+          const response = await api.getSpans({
+            limit: PAGE_SIZE,
+            pagination_token: paginationToken,
+            search: searchRef.current || void 0
+          }, { signal });
+          if (!response.pagination.epoch) {
+            hasFetchedWithoutEpochRef.current = true;
+          }
+          onEpochSeen(response.pagination.epoch);
+          setTotalCount(response.pagination.total_count);
+          setLicenseLimit(response.limits.span_count_limit_license);
+          setSystemLimit(response.limits.span_count_limit_system);
+          setErrorCount(response.error_count);
+          setWarningCount(response.warning_count);
+          return {
+            hasMoreBackward: response.pagination.has_prev,
+            hasMoreForward: response.pagination.has_next,
+            items: response.spans,
+            nextBackwardToken: response.pagination.prev_cursor ?? void 0,
+            nextForwardToken: response.pagination.next_cursor ?? void 0
+          };
         };
+        try {
+          return await requestPage(token);
+        } catch (error) {
+          if (error instanceof StaleTokenError && token !== void 0) {
+            return await requestPage();
+          }
+          throw error;
+        }
       },
       onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
         setFetchError(void 0);
@@ -19291,9 +19400,9 @@ var useSpans = () => {
       onError: (error) => {
         setFetchError(error);
       },
-      onStatusChange(status) {
-        setFetchingBackward(status.fetchingBackward);
-        setFetchingForward(status.fetchingForward);
+      onStatusChange(status2) {
+        setFetchingBackward(status2.fetchingBackward);
+        setFetchingForward(status2.fetchingForward);
       },
       // The spans endpoint is sorted by span ingestion time, which might differ from
       // the span timestamp. In order to accomodate for this, we will sort the spans
@@ -19304,7 +19413,7 @@ var useSpans = () => {
     });
     paginationBufferRef.current = buffer;
     void buffer.fetchForward();
-  }, [api]);
+  }, [api, onEpochSeen]);
   const [clearingSpans, setClearingSpans] = (0, import_react47.useState)(false);
   const clearSpans = (0, import_react47.useCallback)(async () => {
     if (clearingSpans) {
@@ -19336,10 +19445,19 @@ var useSpans = () => {
       void paginationBufferRef.current?.fetchBackward();
     }
   }, [hasMoreBackward, fetchingBackward, fetchingForward]);
+  const [previousStatusEpoch, setPreviousStatusEpoch] = (0, import_react47.useState)();
+  if (status !== void 0 && status.epoch !== previousStatusEpoch) {
+    setPreviousStatusEpoch(status.epoch);
+    onEpochSeen(status.epoch);
+  }
   useSpansWebSocket({
     enabled: wsEnabled,
     onClose: onWsClose,
-    onMessage: () => {
+    onMessage: (message) => {
+      onEpochSeen(message.epoch);
+      if (message.type !== "span") {
+        return;
+      }
       if (clearingSpans) {
         return;
       }