♻️ refactor: upgrade react scan (#5104)

* ⬆️ refactor: upgrade react scan

* 🔧 chore: add react scan in prod

* add regression config

* 🚨 ci: fix lint

* Update ReactScan.tsx

* Update ReactScan.tsx

next.config.mjs

@@ -1,9 +1,11 @@
 import analyzer from '@next/bundle-analyzer';
 import { withSentryConfig } from '@sentry/nextjs';
 import withSerwistInit from '@serwist/next';
+import ReactComponentName from 'react-scan/react-component-name/webpack';
 
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
+const enableReactScan = !!process.env.REACT_SCAN_MONITOR_API_KEY;
 
 // if you need to proxy the api endpoint to remote server
 const API_PROXY_ENDPOINT = process.env.API_PROXY_ENDPOINT || '';
@@ -178,6 +180,10 @@ const nextConfig = {
       layers: true,
     };
 
+    if (enableReactScan) {
+      config.plugins.push(ReactComponentName({}));
+    }
+
     // to fix shikiji compile error
     // refs: https://github.com/antfu/shikiji/issues/23
     config.module.rules.push({

package.json

@@ -202,7 +202,7 @@
     "react-layout-kit": "^1.9.0",
     "react-lazy-load": "^4.0.1",
     "react-pdf": "^9.2.1",
-    "react-scan": "^0.0.46",
+    "react-scan": "^0.0.51",
     "react-virtuoso": "^4.12.0",
     "react-wrap-balancer": "^1.1.1",
     "remark": "^14.0.3",

src/components/Analytics/ReactScan.tsx

@@ -1,4 +1,4 @@
-import { Monitoring } from 'react-scan/dist/core/monitor/params/next';
+import { Monitoring } from 'react-scan/monitoring/next';
 
 interface ReactScanProps {
   apiKey: string;