Make mobile detection work on error pages

regalijan · Oct 19, 2023 · 510c912 · 510c912
1 parent 8b0b3e6
commit 510c912
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -25,17 +25,27 @@ import { LinksFunction } from "@remix-run/cloudflare";
 import MobileDetect from "mobile-detect";
 import Login from "../components/Login.js";
 import Navigation from "../components/Navigation.js";
-
 import { type ReactNode, StrictMode, useContext, useEffect } from "react";
 import theme from "../theme.js";
 import { withEmotionCache } from "@emotion/react";
 
+function isMobile(ua: string | null, secChIsMobile: string | null): string {
+  if (secChIsMobile && ["?0", "?1"].includes(secChIsMobile))
+    return secChIsMobile;
+
+  if (ua) return `?${Number(new MobileDetect(ua).mobile())}`;
+
+  return "?0";
+}
+
 export function ErrorBoundary() {
   const error = useRouteError() as ErrorResponse;
+  const { ch, ua } = JSON.parse(error.data);
+  const mobile = isMobile(ua, ch);
 
   if (!isRouteErrorResponse(error))
     return getMarkup(
-      { hide: true },
+      { hide: true, mobile },
       <Container maxW="container.lg" pt="8vh" textAlign="left">
         <Heading size="4xl">???</Heading>
         <br />
@@ -59,14 +69,14 @@ export function ErrorBoundary() {
       return "";
 
     case 401:
-      return getMarkup({ hide: true }, <Login />);
+      return getMarkup({ hide: true, mobile }, <Login />);
 
     case 403:
-      return getMarkup({ hide: true }, <Forbidden />);
+      return getMarkup({ hide: true, mobile }, <Forbidden />);
 
     case 404:
       return getMarkup(
-        { hide: true },
+        { hide: true, mobile },
         <Container maxW="container.lg" pt="8vh" textAlign="left">
           <Heading size="4xl">404</Heading>
           <br />
@@ -82,7 +92,7 @@ export function ErrorBoundary() {
 
     default:
       return getMarkup(
-        { hide: true },
+        { hide: true, mobile },
         <Container maxW="container.lg" pt="8vh" textAlign="left">
           <Heading size="4xl">500</Heading>
           <br />
@@ -118,17 +128,10 @@ export async function loader({
   if (context.env.DSN) data.dsn = context.env.DSN;
   if (context.data.theme) data.theme = context.data.theme;
 
-  const isMobileCH = context.request.headers.get("sec-ch-ua-mobile");
-
-  if (isMobileCH) {
-    data.mobile = isMobileCH;
-    return data;
-  }
-
-  const ua = context.request.headers.get("user-agent");
-
-  if (!ua) data.mobile = "?0";
-  else data.mobile = `?${Number(new MobileDetect(ua).mobile())}`;
+  data.mobile = isMobile(
+    context.request.headers.get("user-agent"),
+    context.request.headers.get("sec-ch-ua-mobile")
+  );
 
   return data;
 }