test explor

src/App.tsx

@@ -8,6 +8,7 @@ import { TaskBoard, TaskProvider } from './features/tasks';
 import { AuthProvider, useAuth } from './features/auth';
 import { ProjectProvider } from './features/projects';
 import { ToastProvider } from './shared/components/Toast';
+import { ErrorBoundary } from './shared/components/ErrorBoundary';
 import { GlobalSearch, SearchTrigger } from './features/search';
 import { Spinner } from './shared/components/Loading';
 import { Avatar } from './shared/components/Avatar';
@@ -485,13 +486,15 @@ function AppLayout() {
 
 function App() {
   return (
-    <ToastProvider>
-      <AuthProvider>
-        <ProjectProvider>
-          <AppLayout />
-        </ProjectProvider>
-      </AuthProvider>
-    </ToastProvider>
+    <ErrorBoundary>
+      <ToastProvider>
+        <AuthProvider>
+          <ProjectProvider>
+            <AppLayout />
+          </ProjectProvider>
+        </AuthProvider>
+      </ToastProvider>
+    </ErrorBoundary>
   );
 }
 

src/core/api/http-client.ts

@@ -172,12 +172,18 @@ class HttpClient {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), timeout);
 
-        const response = await fetch(fullUrl, {
-          ...fetchConfig,
-          headers,
-          body,
-          signal: controller.signal,
-        });
+        let response: Response;
+        try {
+          response = await fetch(fullUrl, {
+            ...fetchConfig,
+            headers,
+            body,
+            signal: controller.signal,
+          });
+        } catch (fetchError) {
+          clearTimeout(timeoutId);
+          throw fetchError;
+        }
 
         clearTimeout(timeoutId);
 
@@ -317,6 +323,13 @@ class HttpClient {
         };
       }
 
+      if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+        return {
+          code: ERROR_CODES.NETWORK_ERROR,
+          message: 'Network connection failed. Please check your internet connection.',
+        };
+      }
+
       return {
         code: ERROR_CODES.NETWORK_ERROR,
         message: error.message || 'Network error occurred',

src/core/hooks/index.ts

@@ -34,3 +34,4 @@ export { useInterval, useTimeout, useCountdown, useTimer, usePolling } from './u
 export { useToggle } from './useToggle';
 export { useDisclosure, useDisclosures, useModal, useConfirmDialog } from './useDisclosure';
 export type { UseDisclosureReturn, UseDisclosureOptions } from './useDisclosure';
+export { useThrottle, useIdleCallback, useIntersectionObserver } from './usePerformance';

src/core/hooks/usePerformance.ts

@@ -0,0 +1,85 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+export function useThrottle<T extends (...args: unknown[]) => unknown>(
+  callback: T,
+  delay: number
+): T {
+  const lastRun = useRef<number>(0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const throttledCallback = useCallback(
+    ((...args: Parameters<T>) => {
+      const now = Date.now();
+      const timeSinceLastRun = now - lastRun.current;
+
+      if (timeSinceLastRun >= delay) {
+        lastRun.current = now;
+        return callback(...args);
+      }
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        lastRun.current = Date.now();
+        callback(...args);
+      }, delay - timeSinceLastRun);
+    }) as T,
+    [callback, delay]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return throttledCallback;
+}
+
+export function useIdleCallback(callback: () => void, deps: unknown[] = []) {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (typeof requestIdleCallback !== 'undefined') {
+      const id = requestIdleCallback(() => {
+        callbackRef.current();
+      });
+      return () => cancelIdleCallback(id);
+    } else {
+      const timeoutId = setTimeout(() => {
+        callbackRef.current();
+      }, 1);
+      return () => clearTimeout(timeoutId);
+    }
+  }, deps);
+}
+
+export function useIntersectionObserver(
+  elementRef: React.RefObject<Element>,
+  callback: (isIntersecting: boolean) => void,
+  options?: IntersectionObserverInit
+) {
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      callback(entry.isIntersecting);
+    }, options);
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [elementRef, callback, options]);
+}
+