Merge pull request #280 from datum-cloud/fix/272-cursor-error

fix(data-table): Auto-handle expired cursor tokens (410 errors)

Author: gaghan430

app/modules/axios/axios.client.ts

@@ -1,3 +1,4 @@
+import { isExpiredCursorError } from '@/modules/datum-ui/data-table/lib/data-table';
 import { logger } from '@/utils/logger';
 import { captureApiError } from '@/utils/logger';
 import { toast } from '@datum-ui/toast';
@@ -102,9 +103,14 @@ const onResponseError = (error: AxiosError): Promise<AxiosError> => {
     responseData: error.response?.data,
   });
 
-  // For all other errors, show toast with meaningful info
-  const title = errorInfo.requestId ? `Request ID: ${errorInfo.requestId}` : 'Error';
-  toast.error(title, { description: errorInfo.message });
+  // Check if this is an expired cursor error (410) - these are handled automatically by data tables
+  const isExpiredCursor = isExpiredCursorError(error);
+  // Skip toast for expired cursor errors - they're handled automatically by data tables
+  if (!isExpiredCursor) {
+    // For all other errors, show toast with meaningful info
+    const title = errorInfo.requestId ? `Request ID: ${errorInfo.requestId}` : 'Error';
+    toast.error(title, { description: errorInfo.message });
+  }
 
   return Promise.reject(error);
 };

app/modules/datum-ui/data-table/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { getCommonPinningStyles } from '../lib/data-table';
+import { getCommonPinningStyles, isExpiredCursorError } from '../lib/data-table';
 import { useDataTableInstance } from '../providers/data-table.provider';
 import { DataTableLoading } from './data-table-loading';
 import { DataTablePagination } from './data-table-pagination';
@@ -28,16 +28,18 @@ export function DataTable<TData>({
 }: DataTableProps<TData>) {
   const { table, query } = useDataTableInstance<TData>();
 
-  // Show loading state when query is loading
-  if (query.isLoading) {
+  // Show loading state when query is loading or when we're handling an expired cursor error
+  // (expired cursor errors are automatically handled by clearing the cursor and refetching)
+  const isExpiredCursor = query.isError && isExpiredCursorError(query.error);
+  if (query.isLoading || isExpiredCursor) {
     return (
       <DataTableLoading<TData> rows={5} actionBar={actionBar} className={className} {...props}>
         {children}
       </DataTableLoading>
     );
   }
 
-  // Show error state when query has error
+  // Show error state when query has error (but not expired cursor errors, which are handled automatically)
   if (query.isError) {
     return (
       <div className={cn('flex w-full flex-col gap-2.5 overflow-auto', className)} {...props}>

app/modules/datum-ui/data-table/hooks/useDataTableQuery.tsx

@@ -1,3 +1,4 @@
+import { isExpiredCursorError } from '../lib/data-table';
 import { ListQueryParams } from '@/resources/schemas';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import {
@@ -245,8 +246,26 @@ export function useDataTableQuery<T>({
       }),
     placeholderData: keepPreviousData,
     enabled,
+    retry: (failureCount, error) => {
+      if (isExpiredCursorError(error)) {
+        return false;
+      }
+      return failureCount < 3;
+    },
   });
 
+  // Auto-handle expired cursor tokens
+  useEffect(() => {
+    if (!cursor || !query.isError) {
+      return;
+    }
+
+    const error = query.error;
+    if (isExpiredCursorError(error)) {
+      setCursor('');
+    }
+  }, [query.isError, query.error, cursor, setCursor]);
+
   // --- Memoized Setters ---
   const setSorting = useMemo(() => {
     if (!useSorting) return undefined;

app/modules/datum-ui/data-table/lib/data-table.ts

@@ -64,3 +64,57 @@ export function getValidFilters<TData>(
         : filter.value !== '' && filter.value !== null && filter.value !== undefined)
   );
 }
+
+/**
+ * Checks if an error is a 410 ResourceExpired error (expired cursor token).
+ * This is used to automatically handle expired pagination tokens by clearing
+ * the cursor and refetching from the beginning.
+ */
+export function isExpiredCursorError(error: unknown): boolean {
+  // Check for AxiosError with 410 status
+  if (error && typeof error === 'object' && 'response' in error) {
+    const axiosError = error as { response?: { status?: number; data?: any } };
+    if (axiosError.response?.status === 410) {
+      return true;
+    }
+    // Also check error message in response data
+    if (axiosError.response?.data) {
+      const data = axiosError.response.data;
+      const errorMessage =
+        typeof data === 'string' ? data : (data as any)?.error || (data as any)?.message || '';
+      if (errorMessage) {
+        const message = String(errorMessage).toLowerCase();
+        if (
+          message.includes('continue') ||
+          message.includes('token') ||
+          message.includes('too old') ||
+          message.includes('expired') ||
+          message.includes('provided continue parameter')
+        ) {
+          return true;
+        }
+      }
+    }
+  }
+
+  // Check for error message containing ResourceExpired or 410
+  if (error instanceof Error) {
+    const message = error.message.toLowerCase();
+    return (
+      message.includes('410') ||
+      message.includes('resourceexpired') ||
+      message.includes('continue token') ||
+      message.includes('continue parameter') ||
+      message.includes('provided continue parameter') ||
+      message.includes('too old') ||
+      message.includes('inconsistent list')
+    );
+  }
+
+  // Check for error object with status code
+  if (error && typeof error === 'object' && 'status' in error) {
+    return (error as { status?: number }).status === 410;
+  }
+
+  return false;
+}

app/modules/datum-ui/data-table/providers/data-table.provider.tsx

@@ -141,6 +141,14 @@ export function DataTableProvider<TData, TQuery = DataTableQuery<TData>>({
     }
   }, [sorting, filters, limit]);
 
+  // Reset pagination when cursor is cleared (e.g., expired token)
+  useEffect(() => {
+    if (!cursor && currentPage > 0) {
+      setCursorHistory(['']);
+      setCurrentPage(0);
+    }
+  }, [cursor, currentPage]);
+
   // Add selection to first column (embedded) and actions column (separate)
   const enhancedColumns = useMemo(() => {
     const hasActions = actions && actions.length > 0;