feat: Implement enhanced storage management with error handling and validation

- Added EnhancedStorageManager for improved storage operations with validation and error handling.
- Introduced TabManager for managing tab-specific storage instances.
- Implemented batch updates, query and mutation updates with deserialization.
- Added subscription management for storage changes.

feat: Create error recovery system with exponential backoff and circuit breaker

- Developed ErrorRecovery class for retrying operations with configurable backoff strategies.
- Added support for circuit breaker pattern to prevent repeated failures.
- Included statistics tracking for operations and retries.

feat: Implement message batching system for performance optimization

- Created MessageBatcher class to handle batching of messages for efficient processing.
- Added configuration options for batch size, interval, and frame rate limiting.

feat: Develop type-safe message router for handling various message types

- Introduced TypeSafeMessageRouter for routing messages to appropriate handlers based on type.
- Implemented PostMessageRouter and ChromeRuntimeRouter for specific message handling contexts.

feat: Enhance message validation system with runtime type checking

- Utilized Zod for schema validation of various message types.
- Implemented validation functions for different message formats.

feat: Create serialization manager for complex data structures

- Developed SerializationManager for safe serialization and deserialization of data.
- Added MessageSerializer and StorageSerializer for handling message and storage data.

feat: Implement data validation utilities for deserialized data

- Created DataValidator for ensuring data integrity after deserialization.

Author: dborysov

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+tsconfig.tsbuildinfo
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

memory-bank

@@ -1,7 +1,7 @@
 {
   "name": "tanstack-query-chrome-devtools",
   "private": true,
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "TanStack Query DevTools",
   "homepage": "https://github.com/DeeCode-inc/tanstack-query-chrome-devtools#readme",
@@ -17,7 +17,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build --mode main && vite build --mode content",
+    "build": "tsc -b && vite build --mode main && vite build --mode content",
     "lint": "eslint .",
     "preview": "vite preview",
     "prettier:format": "prettier --write .",

package-lock.json

@@ -36,11 +36,13 @@ chrome.runtime.onMessage.addListener(
 
       // Handle action results from content scripts - update artificial states in storage
       if (message.type === "QUERY_ACTION_RESULT") {
-        // Update artificial states in storage for TRIGGER_LOADING and TRIGGER_ERROR
+        // Update artificial states in storage for all artificial state actions
         if (
           message.success &&
           (message.action === "TRIGGER_LOADING" ||
-            message.action === "TRIGGER_ERROR") &&
+            message.action === "TRIGGER_ERROR" ||
+            message.action === "CANCEL_LOADING" ||
+            message.action === "CANCEL_ERROR") &&
           message.queryHash
         ) {
           (async () => {
@@ -54,21 +56,17 @@ chrome.runtime.onMessage.addListener(
               const artificialStates = { ...currentData.artificialStates };
 
               if (message.action === "TRIGGER_LOADING") {
-                if (artificialStates[queryHash] === "loading") {
-                  // Cancel loading state
-                  delete artificialStates[queryHash];
-                } else {
-                  // Start loading state
-                  artificialStates[queryHash] = "loading";
-                }
+                // Start loading state
+                artificialStates[queryHash] = "loading";
+              } else if (message.action === "CANCEL_LOADING") {
+                // Cancel loading state
+                delete artificialStates[queryHash];
               } else if (message.action === "TRIGGER_ERROR") {
-                if (artificialStates[queryHash] === "error") {
-                  // Cancel error state
-                  delete artificialStates[queryHash];
-                } else {
-                  // Start error state
-                  artificialStates[queryHash] = "error";
-                }
+                // Start error state
+                artificialStates[queryHash] = "error";
+              } else if (message.action === "CANCEL_ERROR") {
+                // Cancel error state
+                delete artificialStates[queryHash];
               }
 
               // Update storage with new artificial states

package.json

@@ -33,7 +33,8 @@ export function QueryActions({
     artificialStates.get(selectedQuery.queryHash) === "error";
 
   // Disable all buttons when any action is loading or when artificial loading is active
-  const shouldDisableButtons = actionLoading !== null || isArtificialLoading;
+  const shouldDisableButtons =
+    actionLoading !== null || isArtificialLoading || isArtificialError;
 
   return (
     <div className="p-4 border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800">
@@ -74,21 +75,30 @@ export function QueryActions({
         </button>
 
         <button
-          onClick={() => handleAction("TRIGGER_LOADING")}
+          onClick={() =>
+            handleAction(
+              isArtificialLoading ? "CANCEL_LOADING" : "TRIGGER_LOADING",
+            )
+          }
+          disabled={isArtificialError}
           className={buttonVariants({
             variant: isArtificialLoading ? "gray" : "green",
           })}
         >
           {actionLoading === "TRIGGER_LOADING"
             ? "Triggering..."
-            : isArtificialLoading
-              ? "Cancel Loading"
-              : "Trigger Loading"}
+            : actionLoading === "CANCEL_LOADING"
+              ? "Canceling..."
+              : isArtificialLoading
+                ? "Cancel Loading"
+                : "Trigger Loading"}
         </button>
 
         <button
-          onClick={() => handleAction("TRIGGER_ERROR")}
-          disabled={shouldDisableButtons}
+          onClick={() =>
+            handleAction(isArtificialError ? "CANCEL_ERROR" : "TRIGGER_ERROR")
+          }
+          disabled={isArtificialLoading}
           className={buttonVariants({
             variant: isArtificialError ? "gray" : "red",
           })}