dinou 5.0.2 → 5.1.0

package/dinou/core/client-error-webpack.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "react-server-dom-webpack/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy-webpack.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/client-error.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "@roggc/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }