From 89a03dac44a0c6ff0fd3d9c30f93668982543b4d Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 15:51:26 +0800 Subject: [PATCH 1/6] refactor(web): organize devtools components --- web/app/components/devtools/index.ts | 2 ++ web/app/components/{ => devtools}/react-scan.tsx | 0 .../components/{devtools.tsx => devtools/tanstack-devtools.tsx} | 0 web/app/layout.tsx | 2 +- 4 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 web/app/components/devtools/index.ts rename web/app/components/{ => devtools}/react-scan.tsx (100%) rename web/app/components/{devtools.tsx => devtools/tanstack-devtools.tsx} (100%) diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts new file mode 100644 index 00000000000000..54c8aa81114a1f --- /dev/null +++ b/web/app/components/devtools/index.ts @@ -0,0 +1,2 @@ +export { ReactScan } from './react-scan' +export { TanStackDevtoolsWrapper } from './tanstack-devtools' diff --git a/web/app/components/react-scan.tsx b/web/app/components/devtools/react-scan.tsx similarity index 100% rename from web/app/components/react-scan.tsx rename to web/app/components/devtools/react-scan.tsx diff --git a/web/app/components/devtools.tsx b/web/app/components/devtools/tanstack-devtools.tsx similarity index 100% rename from web/app/components/devtools.tsx rename to web/app/components/devtools/tanstack-devtools.tsx diff --git a/web/app/layout.tsx b/web/app/layout.tsx index c182f12dc99277..f04b2fe39a51bb 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,8 +8,8 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' +import { ReactScan } from './components/devtools' 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' From 36d7c3266572493471f2fdabeceb1c19ff87f7ec Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 15:54:20 +0800 Subject: [PATCH 2/6] refactor(web): add React Scan loader --- web/app/components/devtools/index.ts | 1 + .../components/devtools/react-scan-loader.tsx | 23 +++++++++++++++++++ web/app/layout.tsx | 4 ++-- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 web/app/components/devtools/react-scan-loader.tsx diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 54c8aa81114a1f..029218598bec40 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,2 +1,3 @@ export { ReactScan } from './react-scan' +export { default as ReactScanLoader } from './react-scan-loader' export { TanStackDevtoolsWrapper } from './tanstack-devtools' diff --git a/web/app/components/devtools/react-scan-loader.tsx b/web/app/components/devtools/react-scan-loader.tsx new file mode 100644 index 00000000000000..abd816024551ef --- /dev/null +++ b/web/app/components/devtools/react-scan-loader.tsx @@ -0,0 +1,23 @@ +'use client' + +import { lazy, Suspense } from 'react' +import { IS_DEV } from '@/config' + +const ReactScan = lazy(() => + import('./react-scan').then(module => ({ + default: module.ReactScan, + })), +) + +const ReactScanLoader = () => { + if (!IS_DEV) + return null + + return ( + + + + ) +} + +export default ReactScanLoader diff --git a/web/app/layout.tsx b/web/app/layout.tsx index f04b2fe39a51bb..c4306556f328c1 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,7 +8,7 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' -import { ReactScan } from './components/devtools' +import { ReactScanLoader } from './components/devtools' import I18nServer from './components/i18n-server' import SentryInitializer from './components/sentry-initializer' import RoutePrefixHandle from './routePrefixHandle' @@ -90,7 +90,7 @@ const LocaleLayout = async ({ className="color-scheme h-full select-auto" {...datasetMap} > - + Date: Mon, 29 Dec 2025 15:57:06 +0800 Subject: [PATCH 3/6] refactor(web): organize devtools per tool --- web/app/components/devtools/index.ts | 4 ++-- web/app/components/devtools/react-scan/index.ts | 2 ++ .../{react-scan-loader.tsx => react-scan/loader.tsx} | 6 ++---- .../devtools/{react-scan.tsx => react-scan/scan.tsx} | 0 .../{tanstack-devtools.tsx => tanstack/devtools.tsx} | 0 web/app/components/devtools/tanstack/index.ts | 1 + web/context/query-client.tsx | 2 +- 7 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 web/app/components/devtools/react-scan/index.ts rename web/app/components/devtools/{react-scan-loader.tsx => react-scan/loader.tsx} (71%) rename web/app/components/devtools/{react-scan.tsx => react-scan/scan.tsx} (100%) rename web/app/components/devtools/{tanstack-devtools.tsx => tanstack/devtools.tsx} (100%) create mode 100644 web/app/components/devtools/tanstack/index.ts diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 029218598bec40..2964b277c56bf9 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,3 +1,3 @@ export { ReactScan } from './react-scan' -export { default as ReactScanLoader } from './react-scan-loader' -export { TanStackDevtoolsWrapper } from './tanstack-devtools' +export { ReactScanLoader } from './react-scan' +export { TanStackDevtoolsWrapper } from './tanstack' diff --git a/web/app/components/devtools/react-scan/index.ts b/web/app/components/devtools/react-scan/index.ts new file mode 100644 index 00000000000000..3a328c075f24be --- /dev/null +++ b/web/app/components/devtools/react-scan/index.ts @@ -0,0 +1,2 @@ +export { ReactScanLoader } from './loader' +export { ReactScan } from './scan' diff --git a/web/app/components/devtools/react-scan-loader.tsx b/web/app/components/devtools/react-scan/loader.tsx similarity index 71% rename from web/app/components/devtools/react-scan-loader.tsx rename to web/app/components/devtools/react-scan/loader.tsx index abd816024551ef..ee702216f7cca4 100644 --- a/web/app/components/devtools/react-scan-loader.tsx +++ b/web/app/components/devtools/react-scan/loader.tsx @@ -4,12 +4,12 @@ import { lazy, Suspense } from 'react' import { IS_DEV } from '@/config' const ReactScan = lazy(() => - import('./react-scan').then(module => ({ + import('./scan').then(module => ({ default: module.ReactScan, })), ) -const ReactScanLoader = () => { +export const ReactScanLoader = () => { if (!IS_DEV) return null @@ -19,5 +19,3 @@ const ReactScanLoader = () => { ) } - -export default ReactScanLoader diff --git a/web/app/components/devtools/react-scan.tsx b/web/app/components/devtools/react-scan/scan.tsx similarity index 100% rename from web/app/components/devtools/react-scan.tsx rename to web/app/components/devtools/react-scan/scan.tsx diff --git a/web/app/components/devtools/tanstack-devtools.tsx b/web/app/components/devtools/tanstack/devtools.tsx similarity index 100% rename from web/app/components/devtools/tanstack-devtools.tsx rename to web/app/components/devtools/tanstack/devtools.tsx diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts new file mode 100644 index 00000000000000..bad4aa87082a98 --- /dev/null +++ b/web/app/components/devtools/tanstack/index.ts @@ -0,0 +1 @@ +export { TanStackDevtoolsWrapper } from './devtools' diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 8882048a630a4b..e360cbed381c5c 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -6,7 +6,7 @@ import { lazy, Suspense } from 'react' import { IS_DEV } from '@/config' const TanStackDevtoolsWrapper = lazy(() => - import('@/app/components/devtools').then(module => ({ + import('@/app/components/devtools/tanstack').then(module => ({ default: module.TanStackDevtoolsWrapper, })), ) From 0bea1279588cdb1ddb241141ae0a00a0081354ad Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 16:09:17 +0800 Subject: [PATCH 4/6] refactor(web): use standardized Loader pattern for TanStack devtools --- web/app/components/devtools/index.ts | 5 ++--- web/app/components/devtools/tanstack/index.ts | 1 + .../components/devtools/tanstack/loader.tsx | 21 +++++++++++++++++++ web/context/query-client.tsx | 15 ++----------- 4 files changed, 26 insertions(+), 16 deletions(-) create mode 100644 web/app/components/devtools/tanstack/loader.tsx diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts index 2964b277c56bf9..016ef4d168245b 100644 --- a/web/app/components/devtools/index.ts +++ b/web/app/components/devtools/index.ts @@ -1,3 +1,2 @@ -export { ReactScan } from './react-scan' -export { ReactScanLoader } from './react-scan' -export { TanStackDevtoolsWrapper } from './tanstack' +export * from './react-scan' +export * from './tanstack' diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts index bad4aa87082a98..b73550d5c76c61 100644 --- a/web/app/components/devtools/tanstack/index.ts +++ b/web/app/components/devtools/tanstack/index.ts @@ -1 +1,2 @@ export { TanStackDevtoolsWrapper } from './devtools' +export { TanStackDevtoolsLoader } from './loader' diff --git a/web/app/components/devtools/tanstack/loader.tsx b/web/app/components/devtools/tanstack/loader.tsx new file mode 100644 index 00000000000000..673ea0da90ef80 --- /dev/null +++ b/web/app/components/devtools/tanstack/loader.tsx @@ -0,0 +1,21 @@ +'use client' + +import { lazy, Suspense } from 'react' +import { IS_DEV } from '@/config' + +const TanStackDevtoolsWrapper = lazy(() => + import('./devtools').then(module => ({ + default: module.TanStackDevtoolsWrapper, + })), +) + +export const TanStackDevtoolsLoader = () => { + if (!IS_DEV) + return null + + return ( + + + + ) +} diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index e360cbed381c5c..45c7f4d612a6bd 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -2,14 +2,7 @@ import type { FC, PropsWithChildren } from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { lazy, Suspense } from 'react' -import { IS_DEV } from '@/config' - -const TanStackDevtoolsWrapper = lazy(() => - import('@/app/components/devtools/tanstack').then(module => ({ - default: module.TanStackDevtoolsWrapper, - })), -) +import { TanStackDevtoolsLoader } from '@/app/components/devtools' const STALE_TIME = 1000 * 60 * 30 // 30 minutes @@ -26,11 +19,7 @@ export const TanstackQueryInitializer: FC = (props) => { return ( {children} - {IS_DEV && ( - - - - )} + ) } From 8d4d8d490360a0c5d289e97ff4547afd43cf3f5d Mon Sep 17 00:00:00 2001 From: yyh Date: Mon, 29 Dec 2025 16:16:35 +0800 Subject: [PATCH 5/6] refactor: remove devtools barrel files and update direct import paths for devtool loaders --- web/app/components/devtools/index.ts | 2 -- web/app/components/devtools/react-scan/index.ts | 2 -- web/app/components/devtools/tanstack/index.ts | 2 -- web/app/layout.tsx | 2 +- web/context/query-client.tsx | 2 +- 5 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 web/app/components/devtools/index.ts delete mode 100644 web/app/components/devtools/react-scan/index.ts delete mode 100644 web/app/components/devtools/tanstack/index.ts diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts deleted file mode 100644 index 016ef4d168245b..00000000000000 --- a/web/app/components/devtools/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './react-scan' -export * from './tanstack' diff --git a/web/app/components/devtools/react-scan/index.ts b/web/app/components/devtools/react-scan/index.ts deleted file mode 100644 index 3a328c075f24be..00000000000000 --- a/web/app/components/devtools/react-scan/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ReactScanLoader } from './loader' -export { ReactScan } from './scan' diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts deleted file mode 100644 index b73550d5c76c61..00000000000000 --- a/web/app/components/devtools/tanstack/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TanStackDevtoolsWrapper } from './devtools' -export { TanStackDevtoolsLoader } from './loader' diff --git a/web/app/layout.tsx b/web/app/layout.tsx index c4306556f328c1..fa1f7d48b553ba 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -8,7 +8,7 @@ import { getLocaleOnServer } from '@/i18n-config/server' import { DatasetAttr } from '@/types/feature' import { cn } from '@/utils/classnames' import BrowserInitializer from './components/browser-initializer' -import { ReactScanLoader } from './components/devtools' +import { ReactScanLoader } from './components/devtools/react-scan/loader' import I18nServer from './components/i18n-server' import SentryInitializer from './components/sentry-initializer' import RoutePrefixHandle from './routePrefixHandle' diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 45c7f4d612a6bd..9562686f6fd046 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -2,7 +2,7 @@ import type { FC, PropsWithChildren } from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { TanStackDevtoolsLoader } from '@/app/components/devtools' +import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader' const STALE_TIME = 1000 * 60 * 30 // 30 minutes From e3f76cb74f2b64c5eff96c44df47d5551850d614 Mon Sep 17 00:00:00 2001 From: tomerqodo Date: Wed, 21 Jan 2026 15:56:38 +0200 Subject: [PATCH 6/6] update pr --- web/app/components/devtools/react-scan/loader.tsx | 7 +++++-- web/app/components/devtools/tanstack/loader.tsx | 4 +++- web/context/query-client.tsx | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/web/app/components/devtools/react-scan/loader.tsx b/web/app/components/devtools/react-scan/loader.tsx index ee702216f7cca4..a72b271dc8e0e9 100644 --- a/web/app/components/devtools/react-scan/loader.tsx +++ b/web/app/components/devtools/react-scan/loader.tsx @@ -6,7 +6,10 @@ import { IS_DEV } from '@/config' const ReactScan = lazy(() => import('./scan').then(module => ({ default: module.ReactScan, - })), + })).catch((error) => { + console.error('Failed to load React Scan devtools:', error) + return { default: () => null } + }), ) export const ReactScanLoader = () => { @@ -14,7 +17,7 @@ export const ReactScanLoader = () => { return null return ( - + Loading devtools...}> ) diff --git a/web/app/components/devtools/tanstack/loader.tsx b/web/app/components/devtools/tanstack/loader.tsx index 673ea0da90ef80..08b2bda2e0f24a 100644 --- a/web/app/components/devtools/tanstack/loader.tsx +++ b/web/app/components/devtools/tanstack/loader.tsx @@ -6,7 +6,9 @@ import { IS_DEV } from '@/config' const TanStackDevtoolsWrapper = lazy(() => import('./devtools').then(module => ({ default: module.TanStackDevtoolsWrapper, - })), + })).catch(() => { + return { default: () => null } + }), ) export const TanStackDevtoolsLoader = () => { diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx index 9562686f6fd046..a8c19fd4f461e1 100644 --- a/web/context/query-client.tsx +++ b/web/context/query-client.tsx @@ -18,8 +18,8 @@ export const TanstackQueryInitializer: FC = (props) => { const { children } = props return ( - {children} + {children} ) }