refactor: improve fix regarding navigation from error boundary (#84)

* refactor: improve fix regarding navigation from error boundary

* remove console.log

app/root.tsx

@@ -8,16 +8,17 @@ import {
     json,
     useLoaderData,
     useNavigate,
+    useNavigation,
     useRouteError,
 } from '@remix-run/react';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { EcomAPIContextProvider } from '~/api/ecom-api-context-provider';
 import { CartOpenContextProvider } from '~/components/cart/cart-open-context';
 import { ErrorComponent } from '~/components/error-component/error-component';
 import { SiteWrapper } from '~/components/site-wrapper/site-wrapper';
 import { ROUTES } from '~/router/config';
 import '~/styles/index.scss';
-import { getErrorMessage } from '~/utils';
+import { getErrorMessage, routeLocationToUrl } from '~/utils';
 
 export async function loader() {
     return json({
@@ -60,21 +61,17 @@ export default function App() {
 }
 
 export function ErrorBoundary() {
-    const locationRef = useRef<string | undefined>(typeof window !== 'undefined' ? window.location.href : undefined);
-
     const error = useRouteError();
+    const navigation = useNavigation();
 
     useEffect(() => {
-        const interval = setInterval(() => {
-            if (window.location.href !== locationRef.current) {
-                locationRef.current = window.location.href;
-                clearInterval(interval);
-                // force full page reload after navigating from error boundary
-                // to fix remix issue with style tags disappearing
-                window.location.reload();
-            }
-        }, 100);
-    }, []);
+        if (navigation.state === 'loading') {
+            const url = routeLocationToUrl(navigation.location, window.location.origin);
+            // force full page reload after navigating from error boundary
+            // to fix remix issue with style tags disappearing
+            window.location.assign(url);
+        }
+    }, [navigation]);
 
     const navigate = useNavigate();
 

src/utils/common.ts

@@ -1,4 +1,4 @@
-import { isRouteErrorResponse } from '@remix-run/react';
+import { isRouteErrorResponse, Location } from '@remix-run/react';
 import { isEcomSDKError } from '~/api/types';
 
 export function getUrlOriginWithPath(url: string) {
@@ -46,3 +46,13 @@ export function getErrorMessage(error: unknown): string {
 
     return String(error);
 }
+
+/**
+ * Converts Remix Location object into a standard URL object.
+ */
+export function routeLocationToUrl(location: Location, origin: string): URL {
+    const url = new URL(location.pathname, origin);
+    url.search = location.search;
+    url.hash = location.hash;
+    return url;
+}