alepha 0.18.2 → 0.18.3

package/src/react/router/components/ErrorViewer.tsx

@@ -1,43 +1,142 @@
 import type { Alepha } from "alepha";
-import type { CSSProperties } from "react";
+import { type CSSProperties, useState } from "react";
+import { useRouterState } from "../hooks/useRouterState.ts";
 
-interface ErrorViewerProps {
+export interface ErrorViewerProps {
   error: Error;
   alepha: Alepha;
+  onRetry?: () => void;
 }
 
 const mono =
   'ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace';
 
-const ErrorViewer = ({ error, alepha }: ErrorViewerProps) => {
-  if (alepha.isProduction()) {
-    return <div style={s.root}>Something went wrong.</div>;
+const ErrorViewer = (props: ErrorViewerProps) => {
+  if (props.alepha.isProduction()) {
+    return <ProdErrorPage error={props.error} />;
   }
 
+  return <DevErrorPage {...props} />;
+};
+
+export default ErrorViewer;
+
+// ----- Dev Error Page -----
+
+const DevErrorPage = (props: ErrorViewerProps) => {
+  const [copied, setCopied] = useState(false);
+  const state = useRouterState();
+  const pathname = state.url.pathname;
+
+  const handleCopy = () => {
+    const text = buildErrorText(props.error);
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const status = getHttpStatus(props.error);
+
   return (
-    <div style={s.root}>
-      <ErrorBlock error={error} />
+    <div style={dev.overlay}>
+      <div style={dev.card}>
+        <div style={dev.header}>
+          <div style={dev.headerLeft}>
+            <div style={dev.icon}>!</div>
+            <div style={dev.title}>{props.error.name || "Error"}</div>
+          </div>
+          <div style={dev.headerRight}>
+            {props.onRetry && (
+              <button
+                type="button"
+                style={dev.retryBtn}
+                onClick={props.onRetry}
+              >
+                Retry
+              </button>
+            )}
+            <button type="button" style={dev.copyBtn} onClick={handleCopy}>
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+        </div>
+
+        <ErrorBlock error={props.error} />
+
+        <div style={dev.meta}>
+          {pathname && <span style={dev.metaItem}>{pathname}</span>}
+          <span style={dev.metaItem}>{new Date().toLocaleTimeString()}</span>
+          {status && <span style={dev.statusBadge}>{status}</span>}
+        </div>
+      </div>
     </div>
   );
 };
 
-export default ErrorViewer;
+// ----- Error Block (recursive) -----
+
+const ErrorBlock = (props: { error: Error; depth?: number }) => {
+  const { error, depth = 0 } = props;
 
-function ErrorBlock({ error, depth = 0 }: { error: Error; depth?: number }) {
   return (
     <>
-      {depth > 0 && <div style={s.caused}>Caused by:</div>}
-      <div style={s.name}>
+      {depth > 0 && <div style={dev.causedBy}>Caused by:</div>}
+      <pre style={dev.messageBlock}>
         {error.name}: {error.message}
-      </div>
-      {error.stack && <pre style={s.stack}>{cleanStack(error.stack)}</pre>}
+      </pre>
+      {error.stack && (
+        <>
+          <div style={dev.stackLabel}>STACK TRACE</div>
+          <pre style={dev.stackBlock}>{cleanStack(error.stack)}</pre>
+        </>
+      )}
       {error.cause instanceof Error && (
         <ErrorBlock error={error.cause} depth={depth + 1} />
       )}
     </>
   );
+};
+
+// ----- Prod Error Page -----
+
+interface ProdErrorPageProps {
+  error: Error;
 }
 
+const ProdErrorPage = (props: ProdErrorPageProps) => {
+  const requestId = (props.error as any).requestId;
+
+  const handleReload = () => {
+    if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div style={prod.page}>
+      <div style={prod.card}>
+        <div style={prod.heading}>Something went wrong</div>
+        <div style={prod.subtitle}>
+          We're having trouble processing your request.
+        </div>
+        {requestId && <div style={prod.refText}>Reference: {requestId}</div>}
+        <div style={prod.actions}>
+          <button type="button" style={prod.reloadBtn} onClick={handleReload}>
+            Reload page
+          </button>
+          <a href="/" style={prod.homeLink}>
+            Go home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ----- Helpers -----
+
 function cleanStack(stack: string): string {
   return stack
     .split("\n")
@@ -46,41 +145,241 @@ function cleanStack(stack: string): string {
     .join("\n");
 }
 
-const s: Record<string, CSSProperties> = {
-  root: {
+function buildErrorText(error: Error): string {
+  const parts: string[] = [];
+
+  const append = (err: Error, depth: number) => {
+    if (depth > 0) {
+      parts.push(`\nCaused by:`);
+    }
+    parts.push(`${err.name}: ${err.message}`);
+    if (err.stack) {
+      parts.push(cleanStack(err.stack));
+    }
+    if (err.cause instanceof Error) {
+      append(err.cause, depth + 1);
+    }
+  };
+
+  append(error, 0);
+  return parts.join("\n");
+}
+
+function getHttpStatus(error: Error): number | undefined {
+  if ("status" in error && typeof (error as any).status === "number") {
+    return (error as any).status;
+  }
+  return undefined;
+}
+
+// ----- Dev Styles -----
+
+const dev: Record<string, CSSProperties> = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483647,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     padding: "24px",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    backdropFilter: "blur(4px)",
     fontFamily: mono,
     fontSize: "13px",
-    color: "#333",
-    backgroundColor: "#fff",
+    color: "#e5e7eb",
+    boxSizing: "border-box",
+    overflow: "auto",
   },
-  name: {
-    color: "#dc2626",
-    fontSize: "14px",
+  card: {
+    width: "100%",
+    maxWidth: "900px",
+    maxHeight: "90vh",
+    overflow: "auto",
+    padding: "24px",
+    backgroundColor: "#111",
+    borderLeft: "4px solid #ef4444",
+    borderRadius: "8px",
+    boxShadow: "0 25px 50px rgba(0, 0, 0, 0.5)",
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "20px",
+    flexWrap: "wrap",
+    gap: "12px",
+  },
+  headerLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    minWidth: 0,
+  },
+  headerRight: {
+    display: "flex",
+    gap: "8px",
+    flexShrink: 0,
+  },
+  icon: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "50%",
+    backgroundColor: "#ef4444",
+    color: "#fff",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 700,
+    fontSize: "16px",
+    flexShrink: 0,
+  },
+  title: {
+    color: "#f87171",
+    fontSize: "18px",
+    fontWeight: 700,
+  },
+  retryBtn: {
+    padding: "6px 16px",
+    backgroundColor: "#2563eb",
+    color: "#fff",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontFamily: mono,
+    fontSize: "12px",
     fontWeight: 600,
-    marginBottom: "8px",
+  },
+  copyBtn: {
+    padding: "6px 16px",
+    backgroundColor: "transparent",
+    color: "#9ca3af",
+    border: "1px solid #374151",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontFamily: mono,
+    fontSize: "12px",
+    fontWeight: 600,
+  },
+  messageBlock: {
+    margin: "0 0 12px",
+    padding: "12px",
+    backgroundColor: "#1f2937",
+    borderRadius: "6px",
+    color: "#f9fafb",
+    fontSize: "13px",
+    lineHeight: 1.6,
+    whiteSpace: "pre-wrap",
     wordBreak: "break-word",
+    overflow: "auto",
   },
-  stack: {
+  stackLabel: {
+    fontSize: "10px",
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "1.5px",
+    marginBottom: "6px",
+    fontWeight: 600,
+  },
+  stackBlock: {
     margin: "0 0 20px",
     padding: "12px",
-    backgroundColor: "#f5f5f5",
-    borderRadius: "4px",
-    border: "1px solid #e0e0e0",
+    backgroundColor: "#0f172a",
+    borderRadius: "6px",
+    color: "#94a3b8",
     fontSize: "12px",
     lineHeight: 1.6,
-    color: "#666",
-    overflow: "auto",
     whiteSpace: "pre-wrap",
     wordBreak: "break-all",
+    overflow: "auto",
   },
-  caused: {
-    fontSize: "11px",
-    color: "#999",
+  causedBy: {
+    fontSize: "10px",
+    color: "#6b7280",
     textTransform: "uppercase",
-    letterSpacing: "1px",
-    marginBottom: "6px",
-    paddingTop: "4px",
-    borderTop: "1px solid #e0e0e0",
+    letterSpacing: "1.5px",
+    marginBottom: "8px",
+    paddingTop: "12px",
+    borderTop: "1px solid #374151",
+    fontWeight: 600,
+  },
+  meta: {
+    display: "flex",
+    gap: "16px",
+    alignItems: "center",
+    paddingTop: "12px",
+    borderTop: "1px solid #1f2937",
+    flexWrap: "wrap",
+  },
+  metaItem: {
+    fontSize: "11px",
+    color: "#6b7280",
+  },
+  statusBadge: {
+    fontSize: "11px",
+    color: "#fbbf24",
+    backgroundColor: "#422006",
+    padding: "2px 8px",
+    borderRadius: "4px",
+    fontWeight: 600,
+  },
+};
+
+// ----- Prod Styles -----
+
+const prod: Record<string, CSSProperties> = {
+  page: {
+    minHeight: "100vh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#0f172a",
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: "24px",
+  },
+  card: {
+    textAlign: "center",
+    maxWidth: "440px",
+  },
+  heading: {
+    fontSize: "28px",
+    fontWeight: 700,
+    color: "#f1f5f9",
+    marginBottom: "12px",
+  },
+  subtitle: {
+    fontSize: "16px",
+    color: "#94a3b8",
+    marginBottom: "24px",
+    lineHeight: 1.5,
+  },
+  refText: {
+    fontSize: "13px",
+    color: "#64748b",
+    marginBottom: "24px",
+    fontFamily: mono,
+  },
+  actions: {
+    display: "flex",
+    gap: "12px",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  reloadBtn: {
+    padding: "10px 24px",
+    backgroundColor: "#2563eb",
+    color: "#fff",
+    border: "none",
+    borderRadius: "8px",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 600,
+  },
+  homeLink: {
+    padding: "10px 24px",
+    color: "#94a3b8",
+    textDecoration: "none",
+    fontSize: "14px",
   },
 };

package/src/react/router/components/NestedView.tsx

@@ -9,7 +9,7 @@ import ErrorViewer from "./ErrorViewer.tsx";
 
 export interface NestedViewProps {
   children?: ReactNode;
-  errorBoundary?: false | ((error: Error) => ReactNode);
+  errorBoundary?: false | ((error: Error, reset: () => void) => ReactNode);
 }
 
 /**
@@ -39,6 +39,7 @@ const NestedView = (props: NestedViewProps) => {
   const onError = routerLayer?.onError;
   const state = useRouterState();
   const alepha = useAlepha();
+  const [boundaryKey, setBoundaryKey] = useState(0);
 
   const [view, setView] = useState<ReactNode | undefined>(
     state.layers[index]?.element,
@@ -147,7 +148,9 @@ const NestedView = (props: NestedViewProps) => {
 
   if (props.errorBoundary) {
     return (
-      <ErrorBoundary fallback={props.errorBoundary}>{element}</ErrorBoundary>
+      <ErrorBoundary key={boundaryKey} fallback={props.errorBoundary}>
+        {element}
+      </ErrorBoundary>
     );
   }
 
@@ -161,7 +164,11 @@ const NestedView = (props: NestedViewProps) => {
     return result as ReactNode;
   };
 
-  return <ErrorBoundary fallback={fallback}>{element}</ErrorBoundary>;
+  return (
+    <ErrorBoundary key={boundaryKey} fallback={fallback}>
+      {element}
+    </ErrorBoundary>
+  );
 };
 
 export default memo(NestedView);

package/src/react/router/primitives/$page.browser.spec.tsx

@@ -167,6 +167,40 @@ describe("$page browser tests", () => {
     });
   });
 
+  describe("redirect", () => {
+    it("should redirect to another page", async () => {
+      class App {
+        home = $page({
+          path: "/",
+          redirect: "/dashboard",
+        });
+
+        dashboard = $page({
+          path: "/dashboard",
+          component: () => <div data-testid="dashboard">Dashboard</div>,
+        });
+      }
+
+      alepha = Alepha.create().with(AlephaReact).with(App);
+      await alepha.start();
+
+      const router = alepha.inject(ReactRouter);
+
+      await act(async () => {
+        await router.push("/");
+      });
+
+      await waitFor(() => {
+        expect(
+          document.querySelector('[data-testid="dashboard"]'),
+        ).toBeDefined();
+        expect(
+          document.querySelector('[data-testid="dashboard"]')?.textContent,
+        ).toBe("Dashboard");
+      });
+    });
+  });
+
   describe("errorHandler", () => {
     it("should handle errors and redirect", async () => {
       let isAuthenticated = false;

package/src/react/router/primitives/$page.spec.tsx

@@ -649,6 +649,26 @@ describe("$page primitive tests", () => {
     expect(rendered.html).toBe("Child received: from parent and from parent");
   });
 
+  test("$page - redirect shorthand", async ({ expect }) => {
+    class App {
+      home = $page({
+        path: "/",
+        redirect: "/dashboard",
+      });
+
+      dashboard = $page({
+        path: "/dashboard",
+        component: () => "Dashboard",
+      });
+    }
+
+    const app = alepha.inject(App);
+    await alepha.start();
+
+    const rendered = await app.home.render();
+    expect(rendered.redirect).toBe("/dashboard");
+  });
+
   test("$page - cache configuration without static", async ({ expect }) => {
     class App {
       cached = $page({

package/src/react/router/primitives/$page.ts

@@ -372,6 +372,30 @@ export interface PagePrimitiveOptions<
    */
   head?: Head | ((props: TProps, previous?: Head) => Head);
 
+  /**
+   * Redirect to another path when this page is matched.
+   *
+   * This is a shorthand for throwing a `Redirection` in the loader.
+   * The redirect is performed before any loader or component rendering.
+   *
+   * @example
+   * ```ts
+   * home = $page({
+   *   path: "/",
+   *   redirect: "/dashboard",
+   * });
+   * ```
+   */
+  redirect?: string;
+
+  /**
+   * Label for the page, used for navigation menus or breadcrumbs.
+   *
+   * This is optional and can be used by the application to display a user-friendly name for the page.
+   * It has no functional impact on routing or rendering.
+   */
+  label?: string;
+
   /**
    * Source path for SSR module preloading.
    *

package/src/react/router/providers/ReactBrowserRouterProvider.ts

@@ -5,6 +5,7 @@ import { type Route, RouterProvider } from "alepha/router";
 import { ForbiddenError } from "alepha/server";
 import { createElement, type ReactNode } from "react";
 import NotFoundPage from "../components/NotFound.tsx";
+import { Redirection } from "../errors/Redirection.ts";
 import {
   isPageRoute,
   type PageRoute,
@@ -36,7 +37,7 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
     handler: async () => {
       for (const page of this.pageApi.getPages()) {
         // mount only if a view is provided
-        if (page.component || page.lazy) {
+        if (page.component || page.lazy || page.redirect) {
           this.push({
             path: page.match,
             page,
@@ -120,10 +121,21 @@ export class ReactBrowserRouterProvider extends RouterProvider<BrowserRoute> {
       await this.alepha.events.emit("react:transition:success", { state });
     } catch (e) {
       this.log.error("Transition has failed", e);
+
+      let element: ReactNode | undefined;
+      try {
+        const result = state.onError(e as Error, state);
+        if (result != null && !(result instanceof Redirection)) {
+          element = result as ReactNode;
+        }
+      } catch {
+        // error handler itself failed, fall through to default
+      }
+
       state.layers = [
         {
           name: "error",
-          element: this.pageApi.renderError(e as Error),
+          element: element ?? this.pageApi.renderError(e as Error),
           index: 0,
           path: "/",
         },