From 786099abc3f82a1b39260b966000712e371b6190 Mon Sep 17 00:00:00 2001 From: Mr Bird <168046335+mrbirddev@users.noreply.github.com> Date: Mon, 20 Jan 2025 17:11:36 +0800 Subject: [PATCH] add eruda to debug mobile issues --- package.json | 2 ++ src/@nextutils/ui/useEruda.tsx | 30 ++++++++++++++++++++++++++++++ src/@nextutils/ui/useUaParser.tsx | 13 +++++++++++++ src/pages/_app.tsx | 3 +++ yarn.lock | 29 +++++++++++++++++++++++++++++ 5 files changed, 77 insertions(+) create mode 100644 src/@nextutils/ui/useEruda.tsx create mode 100644 src/@nextutils/ui/useUaParser.tsx diff --git a/package.json b/package.json index bd4b21e..3e1e1aa 100644 --- 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 new file mode 100644 index 0000000..70c1add --- /dev/null +++ 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 new file mode 100644 index 0000000..b923435 --- /dev/null +++ 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(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 index 3080a6a..040027d 100644 --- 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 ( <> diff --git a/yarn.lock b/yarn.lock index ea2eed2..18ba7f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2007,6 +2007,11 @@ detab@2.0.4: 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"