add eruda to debug mobile issues

mrbirddev · Jan 20, 2025 · 786099a · 786099a
1 parent 6a47eed
commit 786099a
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "copy-to-clipboard": "^3.3.3",
+    "eruda": "^3.4.1",
     "immer": "^10.0.3",
     "lodash-es": "^4.17.21",
     "next": "^14.1.4",
@@ -47,6 +48,7 @@
     "sass": "^1.70.0",
     "superjson": "^2.2.1",
     "tiny-invariant": "^1.3.3",
+    "ua-parser-js": "^2.0.0",
     "usehooks-ts": "^3.1.0",
     "webfontloader": "^1.6.28",
     "zod": "^3.22.4",

diff --git a/src/@nextutils/ui/useEruda.tsx b/src/@nextutils/ui/useEruda.tsx
@@ -0,0 +1,30 @@
+import {useUaParserClient} from "@nextutils/ui/useUaParser";
+import {useEffect, useRef} from "react";
+import {useRouter} from "next/router";
+const useEruda = () => {
+  const router = useRouter();
+  const parserResult = useUaParserClient();
+  const erudaLoadedRef = useRef(false);
+  useEffect(() => {
+    if (erudaLoadedRef.current) {
+      return;
+    }
+
+    if (parserResult?.os.name !== 'Android' && parserResult?.os.name !== 'iOS') {
+      return;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      erudaLoadedRef.current = true;
+      void import('eruda').then(eruda => eruda.default.init());
+      return;
+    }
+
+    if (router.isReady && router.query.eruda) {
+      erudaLoadedRef.current = true;
+      void import('eruda').then(eruda => eruda.default.init());
+    }
+  }, [router, parserResult]);
+};
+
+export default useEruda;
diff --git a/src/@nextutils/ui/useUaParser.tsx b/src/@nextutils/ui/useUaParser.tsx
@@ -0,0 +1,13 @@
+import {IResult, UAParser} from 'ua-parser-js';
+import {useEffect, useState} from "react";
+
+export const useUaParserClient = () => {
+  const [result, setResult] = useState<IResult | undefined>(undefined);
+  useEffect(() => {
+    const uaParser = new UAParser();
+    uaParser.setUA(navigator.userAgent);
+    setResult(uaParser.getResult());
+  }, []);
+
+  return result;
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -15,6 +15,7 @@ import {AppFC} from "@nextutils/_app/AppMiddleware";
 import useActionSheetStore from "@nextutils/ui/actionSheet/useActionSheetStore";
 import {useRouter} from "next/router";
 import ActionSheetRenderStack from "@nextutils/ui/actionSheet/ActionSheetRenderStack";
+import useEruda from "@nextutils/ui/useEruda";
 
 const originalToastError = toast.error;
 // do not auto close error toasts by default
@@ -44,6 +45,8 @@ const MyApp: AppFC = ({
     });
   }, []);
 
+  useEruda();
+
   return (
     <>
       <Head>

diff --git a/yarn.lock b/yarn.lock
@@ -2007,6 +2007,11 @@ [email protected]:
   dependencies:
     repeat-string "^1.5.4"
 
+detect-europe-js@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/detect-europe-js/-/detect-europe-js-0.1.2.tgz#aa76642e05dae786efc2e01a23d4792cd24c7b88"
+  integrity sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==
+
 devlop@^1.0.0, devlop@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
@@ -2075,6 +2080,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+eruda@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/eruda/-/eruda-3.4.1.tgz#5ff04fa2c55c3a5f4998e48c952adb759307b53f"
+  integrity sha512-RmaO5yD97URY/9Q0lye3cmmNPoXNKreeePIw7c/zllbscR92CjGFZFuQ70+0fLIvLcKW3Xha8DS8NFhmeNbEBQ==
+
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
   version "1.22.5"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz#1417df4e97cc55f09bf7e58d1e614bc61cb8df46"
@@ -3346,6 +3356,11 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-standalone-pwa@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/is-standalone-pwa/-/is-standalone-pwa-0.1.1.tgz#7a1b0459471a95378aa0764d5dc0a9cec95f2871"
+  integrity sha512-9Cbovsa52vNQCjdXOzeQq5CnCbAcRk05aU62K20WO372NrTv0NxibLFCK6lQ4/iZEFdEA3p3t2VNOn8AJ53F5g==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -5528,6 +5543,20 @@ typescript@^5.1.6:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz#00d1c7c1c46928c5845c1ee8d0cc2791031d4c43"
   integrity sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==
 
+ua-is-frozen@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/ua-is-frozen/-/ua-is-frozen-0.1.2.tgz#bfbc5f06336e379590e36beca444188c7dc3a7f3"
+  integrity sha512-RwKDW2p3iyWn4UbaxpP2+VxwqXh0jpvdxsYpZ5j/MLLiQOfbsV5shpgQiw93+KMYQPcteeMQ289MaAFzs3G9pw==
+
+ua-parser-js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-2.0.0.tgz#fae88e352510198bd29a6dd41624c7cd0d2c7ade"
+  integrity sha512-SASgD4RlB7+SCMmlVNqrhPw0f/2pGawWBzJ2+LwGTD0GgNnrKGzPJDiraGHJDwW9Zm5DH2lTmUpqDpbZjJY4+Q==
+  dependencies:
+    detect-europe-js "^0.1.2"
+    is-standalone-pwa "^0.1.1"
+    ua-is-frozen "^0.1.2"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"