crush-level-web/src/lib/providers.tsx

"use client"
import { ApiError } from "@/types/api"
import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import React, { useState, useRef, type ReactNode } from "react"
import { toast, Toaster } from "sonner"
import { tokenManager } from "./auth/token"
import { COIN_INSUFFICIENT_ERROR_CODE } from "@/hooks/useWallet"
import { walletKeys } from "./query-keys"
interface ProvidersProps {
  children: ReactNode
}

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

const EXPIRED_ERROR_CODES = ['10050001', '10050002', '10050003', '10050004', '10050005', '10050006'];

export function Providers({ children }: ProvidersProps) {
  const router = useRouter();
  // 用于错误去重的引用
  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const lastErrorRef = useRef<string>('');
  const [showDevtools, setShowDevtools] = React.useState(false)
  
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // 全局查询配置
            staleTime: 5 * 60 * 1000, // 5分钟后数据过期
            gcTime: 10 * 60 * 1000, // 10分钟后清除缓存
            refetchOnWindowFocus: false, // 窗口聚焦时不重新请求
            retry: 0, // 失败重试次数
          },
          mutations: {
            // 全局修改配置
            retry: 0,
          },
        },
        queryCache: new QueryCache({
          onError: (error) => {
            handleError(error as ApiError)
          }
        }),
        mutationCache: new MutationCache({
          onError: (error) => {
            handleError(error as ApiError)
          }
        })
      })
  )
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const searchParamsString = searchParams.toString()
  const redirectURL = `${pathname}${searchParamsString ? `?${searchParamsString}` : ''}`

  const handleError = (error: ApiError) => {
    if (error.errorCode === COIN_INSUFFICIENT_ERROR_CODE) {
      queryClient.invalidateQueries({ queryKey: walletKeys.getWalletBalance() })
    }
    if (EXPIRED_ERROR_CODES.includes(error.errorCode)) {
      // 清除 cookie 中的 st
      tokenManager.removeToken();
      router.push('/login?redirect=' + encodeURIComponent(redirectURL));
      return; // 对于登录过期错误，不显示错误toast，直接跳转
    }
    if (error.ignoreError) {
      return;
    }

    // 错误去重逻辑：只显示最后一次的错误
    const errorKey = `${error.errorCode}:${error.errorMsg}`;
    
    // 清除之前的定时器
    if (errorTimeoutRef.current) {
      clearTimeout(errorTimeoutRef.current);
    }
    
    // 更新最后一次错误信息
    lastErrorRef.current = errorKey;
    
    // 设置新的定时器，延迟显示错误
    errorTimeoutRef.current = setTimeout(() => {
      // 只有当前错误仍然是最后一次错误时才显示
      if (lastErrorRef.current === errorKey) {
        toast.error(error.errorMsg)
      }
    }, 100) // 100ms 延迟，确保能捕获到快速连续的错误
  }

  React.useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old)
  }, [])

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <Toaster 
        position="top-center"
        richColors
        // closeButton=
        visibleToasts={1}
        duration={4000}
        // duration={2000000}
        icons={{
          error: <img src="/icons/status-error.svg" />,
          success: <img src="/icons/status-successful.svg" />,
        }}
        toastOptions={{
          className: '!bg-surface-base-normal !border-none !px-4 !py-3 !rounded-m !txt-body-m !text-txt-primary-normal',
        }}
      />
      <ReactQueryDevtools initialIsOpen={true} />

      {showDevtools && (
        <React.Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </React.Suspense>
      )}
    </QueryClientProvider>
  )
}