dinou 1.4.3 → 1.6.0

package/README.md

@@ -54,6 +54,8 @@ dinou main features are:
 
 - Support for the use of an import alias in `tsconfig.json` or `jsconfig.json` file.
 
+- Error handling with `error.tsx` pages, differentiationg behaviour in production and in development.
+
 ## Table of contents
 
 - [Routing system, layouts, pages, not found pages, ...](#routing-system-layouts-pages-not-found-pages-)
@@ -98,6 +100,8 @@ dinou main features are:
 
   - [Not Found Handling](#not-found-handling)
 
+  - [Error Handling](#error-handling)
+
 - [`favicons` folder](#favicons-folder)
 
 - [`.env` file](#env-file)
@@ -126,6 +130,10 @@ dinou main features are:
 
 - If you don't want a `page` to be applied layouts define a `no_layout` file (without extension) in the same folder. A `no_layout` file, if present, also applies to the `not_found` file if present in the same folder. There exists also a `no_layout_not_found` file if you don't want a `not_found` file to be applied layouts but you do in `page` component.
 
+- `reset_layout` file (without extension) if present in the same folder as a `layout.tsx` file, will ignore previous layouts in the layout hierarchy.
+
+- If found any `error.tsx` (or `.jsx`) page in the route hierarchy, the more nested one will be rendered in case of error in the page. Layouts are also applied to error pages if no `no_layout` or `no_layout_error` files (without extension) exists in the folder where `error.tsx` is defined.
+
 ## page_functions.ts (or `.tsx`, `.js`, `.jsx`)
 
 `page_functions.ts` is a file for defining four diferent possible functions. These are:
@@ -841,6 +849,8 @@ The routing system is file-based and supports static routes, dynamic routes, opt
 
 - If a **`no_layout`** file exists in a directory (**without extension**), the layout hierarchy is skipped, and only the page content is rendered.
 
+- If a **`reset_layout`** file (**without extension**) exists in a directory where a `layout.tsx` file is defined, previous layouts in the hierarchy will be ignored.
+
 ### Not Found Handling
 
 - If no `page.tsx` is found for a route, the system looks for a `not_found.tsx` file in the route hierarchy.
@@ -855,6 +865,51 @@ The routing system is file-based and supports static routes, dynamic routes, opt
 
 - Layouts are applied to `not_found.tsx` pages too, unless a `no_layout` or **`no_layout_not_found`** files (**without extension**) are found in the directory in which the `not_found.tsx` page is defined, in which case layouts will not be applied to `not_found.tsx` page.
 
+### Error Handling
+
+- In case of error in a page, the more nested `error.tsx` (or `.jsx`) page will rendered if exists. **If it does not exist, then in production the error will be written in the console, and in development a default error page will be rendered informing about the error message and the error stack**.
+
+- Layouts are applied to `error.tsx` pages, if no `no_layout` or `no_layout_error` files (without extension) exists in the folder where `error.tsx` is defined.
+
+- `error.tsx` pages are **dynamically rendered**, so avoid using server components (async functions) and fetching data in their body definition because this will delay the rendering of the page. Use `Suspense` instead if you need to fetch data.
+
+- There not exists a `error_functions.ts` functionality, so there is no `getProps` for error pages. Again, if you need to fetch data use `Suspense`.
+
+- The error page receives `params`, `query`, and `error`. `error` is an object with properties `message` and `stack` which are strings.
+
+- Example:
+
+  ```typescript
+  "use client";
+
+  export default function Page({
+    error: { message, stack },
+  }: {
+    error: Error;
+  }) {
+    return (
+      <main className="flex-1 flex flex-col items-center justify-center p-4">
+        <div className="max-w-md w-full text-center space-y-6">
+          <h1 className="text-3xl font-bold text-red-600">Error</h1>
+          <p className="text-lg text-gray-700">
+            An unexpected error has occurred baby. Please try again later.
+          </p>
+          <a
+            href="/"
+            className="inline-block px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+          >
+            Go to Home
+          </a>
+        </div>
+        <div className="mt-6 text-sm text-gray-500">
+          <pre className="whitespace-pre-wrap break-words">{message}</pre>
+          <pre className="whitespace-pre-wrap break-words">{stack}</pre>
+        </div>
+      </main>
+    );
+  }
+  ```
+
 ## `favicons` folder
 
 If you want to show a favicon, generate one with an online tool (e.g. [favicon.io](https://favicon.io/)), unzip the downloaded folder with the favicons, paste it in the root of the project and rename it to `favicons`. Then update your `layout` or `page` to include this in the `head` tag:

package/dinou/build-static-pages.js

@@ -382,6 +382,18 @@ async function buildStaticPages() {
             }
             jsx = React.createElement(Layout, props, jsx);
             jsx = { ...jsx, __modulePath: layoutPath };
+            const layoutFolderPath = path.dirname(layoutPath);
+            if (
+              getFilePathAndDynamicParams(
+                [],
+                {},
+                layoutFolderPath,
+                "reset_layout",
+                false
+              )[0]
+            ) {
+              break;
+            }
             index++;
           }
         }
@@ -548,6 +560,18 @@ async function buildStaticPage(reqPath) {
           }
           jsx = React.createElement(Layout, layoutProps, jsx);
           jsx = { ...jsx, __modulePath: layoutPath };
+          const layoutFolderPath = path.dirname(layoutPath);
+          if (
+            getFilePathAndDynamicParams(
+              [],
+              {},
+              layoutFolderPath,
+              "reset_layout",
+              false
+            )[0]
+          ) {
+            break;
+          }
           index++;
         }
       }

package/dinou/client-error.jsx

@@ -0,0 +1,36 @@
+import { use } from "react";
+import { createFromFetch } from "react-server-dom-webpack/client";
+import { hydrateRoot } from "react-dom/client";
+
+const cache = new Map();
+const route = window.location.href.replace(window.location.origin, "");
+
+function Root() {
+  let content = cache.get(route);
+  if (!content) {
+    content = createFromFetch(
+      fetch("/____rsc_payload_error____" + route, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown error",
+            stack: window.__DINOU_ERROR_STACK__ || "No stack trace available",
+          },
+        }),
+      })
+    );
+    cache.set(route, content);
+  }
+
+  return use(content);
+}
+
+hydrateRoot(document, <Root />);
+
+// HMR
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

package/dinou/get-error-jsx.js

@@ -0,0 +1,122 @@
+const path = require("path");
+const { existsSync } = require("fs");
+const React = require("react");
+const {
+  getFilePathAndDynamicParams,
+} = require("./get-file-path-and-dynamic-params");
+
+function getErrorJSX(reqPath, query, error) {
+  const srcFolder = path.resolve(process.cwd(), "src");
+  const reqSegments = reqPath.split("/").filter(Boolean);
+  const folderPath = path.join(srcFolder, ...reqSegments);
+  let pagePath;
+  if (existsSync(folderPath)) {
+    for (const ext of [".tsx", ".ts", ".jsx", ".js"]) {
+      const candidatePath = path.join(folderPath, `error${ext}`);
+      if (existsSync(candidatePath)) {
+        pagePath = candidatePath;
+      }
+    }
+  }
+  let dynamicParams;
+
+  if (!pagePath) {
+    const [filePath, dParams] = getFilePathAndDynamicParams(
+      reqSegments,
+      query,
+      srcFolder,
+      "error"
+    );
+    pagePath = filePath;
+    dynamicParams = dParams ?? {};
+  }
+
+  let jsx;
+
+  if (!pagePath) {
+    const [errorPath, dParams] = getFilePathAndDynamicParams(
+      reqSegments,
+      query,
+      srcFolder,
+      "error",
+      true,
+      false
+    );
+    if (errorPath) {
+      pagePath = errorPath;
+      dynamicParams = dParams ?? {};
+    }
+  }
+
+  if (pagePath) {
+    const pageModule = require(pagePath);
+    const Page = pageModule.default ?? pageModule;
+    jsx = React.createElement(Page, {
+      params: dynamicParams ?? {},
+      query,
+      error,
+    });
+
+    const noLayoutErrorPath = path.join(
+      pagePath.split("\\").slice(0, -1).join("\\"),
+      `no_layout_error`
+    );
+    if (existsSync(path.resolve(process.cwd(), `${noLayoutErrorPath}`))) {
+      return jsx;
+    }
+
+    if (
+      getFilePathAndDynamicParams(
+        reqSegments,
+        query,
+        srcFolder,
+        "no_layout",
+        false
+      )[0]
+    ) {
+      return jsx;
+    }
+
+    const layouts = getFilePathAndDynamicParams(
+      reqSegments,
+      query,
+      srcFolder,
+      "layout",
+      true,
+      false,
+      undefined,
+      0,
+      {},
+      true
+    );
+
+    if (layouts && Array.isArray(layouts)) {
+      let index = 0;
+      for (const [layoutPath, dParams, slots] of layouts.reverse()) {
+        const layoutModule = require(layoutPath);
+        const Layout = layoutModule.default ?? layoutModule;
+        let props = { params: dParams, query, ...slots };
+        jsx = React.createElement(Layout, props, jsx);
+        const layoutFolderPath = path.dirname(layoutPath);
+        if (
+          getFilePathAndDynamicParams(
+            [],
+            {},
+            layoutFolderPath,
+            "reset_layout",
+            false
+          )[0]
+        ) {
+          break;
+        }
+        index++;
+      }
+    }
+  }
+
+  return jsx;
+}
+
+module.exports = {
+  getErrorJSX,
+};

package/dinou/get-jsx.js

@@ -129,6 +129,18 @@ async function getJSX(reqPath, query) {
         props = { ...props, ...(pageFunctionsProps?.layout ?? {}) };
       }
       jsx = React.createElement(Layout, props, jsx);
+      const layoutFolderPath = path.dirname(layoutPath);
+      if (
+        getFilePathAndDynamicParams(
+          [],
+          {},
+          layoutFolderPath,
+          "reset_layout",
+          false
+        )[0]
+      ) {
+        break;
+      }
       index++;
     }
   }

package/dinou/render-html.js

@@ -25,14 +25,92 @@ addHook({
 
 const { renderToPipeableStream } = require("react-dom/server");
 const { getJSX, getSSGJSX } = require("./get-jsx");
+const { getErrorJSX } = require("./get-error-jsx");
 const { renderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
 
-// Render the app to a stream
-async function renderToStream() {
-  try {
-    const reqPath = process.argv[2];
-    const query = JSON.parse(process.argv[3]);
+function formatErrorHtml(error) {
+  const message = error.message || "Unknown error";
+  const stack = error.stack
+    ? error.stack.replace(/\n/g, "<br>").replace(/\s/g, "&nbsp;")
+    : "No stack trace available";
+
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Error</title>
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          margin: 0;
+          padding: 20px;
+          background-color: #f8f8f8;
+          color: #333;
+        }
+        .error-container {
+          max-width: 800px;
+          margin: 0 auto;
+          background-color: #fff;
+          padding: 20px;
+          border-radius: 8px;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .error-title {
+          color: #d32f2f;
+          font-size: 24px;
+          margin-bottom: 10px;
+        }
+        .error-message {
+          font-size: 18px;
+          margin-bottom: 20px;
+        }
+        .error-stack {
+          background-color: #f5f5f5;
+          padding: 15px;
+          border-radius: 4px;
+          font-family: Consolas, monospace;
+          font-size: 14px;
+          overflow-x: auto;
+        }
+        .error-footer {
+          margin-top: 20px;
+          font-size: 14px;
+          color: #666;
+        }
+      </style>
+    </head>
+    <body>
+      <div class="error-container">
+        <h1 class="error-title">An Error Occurred</h1>
+        <p class="error-message">${message}</p>
+        <div class="error-stack">${stack}</div>
+      </div>
+    </body>
+    </html>
+  `;
+}
+
+function formatErrorHtmlProduction(error) {
+  const escapedMessage = JSON.stringify(`Render error: ${error.message}`);
+  const escapedStack = JSON.stringify(error.stack || "");
 
+  return `
+    <!DOCTYPE html>
+    <html>
+      <head><meta charset="utf-8"></head>
+      <body>
+        <script>
+          console.error(${escapedMessage} + "\\n" + ${escapedStack});
+        </script>
+      </body>
+    </html>
+  `;
+}
+
+async function renderToStream(reqPath, query) {
+  try {
     const jsx = Object.keys(query).length
       ? renderJSXToClientJSX(await getJSX(reqPath, query))
       : getSSGJSX(reqPath) ??
@@ -40,9 +118,54 @@ async function renderToStream() {
 
     const stream = renderToPipeableStream(jsx, {
       onError(error) {
-        console.error("Render error:", error);
-        process.stderr.write(JSON.stringify({ error: error.message }));
-        process.exit(1);
+        const isProd = process.env.NODE_ENV === "production";
+
+        try {
+          const errorJSX = getErrorJSX(reqPath, query, error);
+
+          if (errorJSX === undefined) {
+            process.stdout.write(
+              isProd ? formatErrorHtmlProduction(error) : formatErrorHtml(error)
+            );
+            process.stderr.write(
+              JSON.stringify({ error: error.message, stack: error.stack })
+            );
+            process.exit(1);
+          }
+
+          const errorStream = renderToPipeableStream(errorJSX, {
+            onShellReady() {
+              errorStream.pipe(process.stdout);
+            },
+            onError(err) {
+              console.error("Error rendering error JSX:", err);
+              process.stdout.write(
+                isProd
+                  ? formatErrorHtmlProduction(error)
+                  : formatErrorHtml(error)
+              );
+              process.stderr.write(
+                JSON.stringify({ error: error.message, stack: error.stack })
+              );
+              process.exit(1);
+            },
+            bootstrapScripts: ["/error.js"],
+            bootstrapScriptContent: `window.__DINOU_ERROR_MESSAGE__=${JSON.stringify(
+              error.message || "Unknown error"
+            )};window.__DINOU_ERROR_STACK__=${JSON.stringify(
+              error.stack || "No stack trace available"
+            )};`,
+          });
+        } catch (err) {
+          console.error("Render error (no error.tsx?):", err);
+          process.stdout.write(
+            isProd ? formatErrorHtmlProduction(error) : formatErrorHtml(error)
+          );
+          process.stderr.write(
+            JSON.stringify({ error: error.message, stack: error.stack })
+          );
+          process.exit(1);
+        }
       },
       onShellReady() {
         stream.pipe(process.stdout);
@@ -50,21 +173,41 @@ async function renderToStream() {
       bootstrapScripts: ["/main.js"],
     });
   } catch (error) {
-    process.stderr.write(JSON.stringify({ error: error.message }));
+    process.stdout.write(formatErrorHtml(error));
+    process.stderr.write(
+      JSON.stringify({
+        error: error.message,
+        stack: error.stack,
+      })
+    );
     process.exit(1);
   }
 }
 
+const reqPath = process.argv[2];
+const query = JSON.parse(process.argv[3]);
+
 process.on("uncaughtException", (error) => {
-  process.stderr.write(JSON.stringify({ error: error.message }));
+  process.stdout.write(formatErrorHtml(error));
+  process.stderr.write(
+    JSON.stringify({
+      error: error.message,
+      stack: error.stack,
+    })
+  );
   process.exit(1);
 });
 
 process.on("unhandledRejection", (reason) => {
+  const error = reason instanceof Error ? reason : new Error(String(reason));
+  process.stdout.write(formatErrorHtml(error));
   process.stderr.write(
-    JSON.stringify({ error: reason.message || "Unhandled promise rejection" })
+    JSON.stringify({
+      error: error.message,
+      stack: error.stack,
+    })
   );
   process.exit(1);
 });
 
-renderToStream();
+renderToStream(reqPath, query);

package/dinou/server.js

@@ -11,6 +11,7 @@ const webpackDevMiddleware = require("webpack-dev-middleware");
 const webpackHotMiddleware = require("webpack-hot-middleware");
 const webpackConfig = require(path.resolve(__dirname, "../webpack.config.js"));
 const { getSSGJSXOrJSX } = require("./get-jsx.js");
+const { getErrorJSX } = require("./get-error-jsx.js");
 const addHook = require("./asset-require-hook.js");
 webpackRegister();
 const babelRegister = require("@babel/register");
@@ -37,6 +38,7 @@ addHook({
 });
 
 const app = express();
+app.use(express.json());
 const isDevelopment = process.env.NODE_ENV !== "production";
 
 if (isDevelopment) {
@@ -57,7 +59,26 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
     const reqPath = (
       req.path.endsWith("/") ? req.path : req.path + "/"
     ).replace("/____rsc_payload____", "");
-    jsx = await getSSGJSXOrJSX(reqPath, { ...req.query });
+    const jsx = await getSSGJSXOrJSX(reqPath, { ...req.query });
+    const manifest = readFileSync(
+      path.resolve(process.cwd(), "____public____/react-client-manifest.json"),
+      "utf8"
+    );
+    const moduleMap = JSON.parse(manifest);
+    const { pipe } = renderToPipeableStream(jsx, moduleMap);
+    pipe(res);
+  } catch (error) {
+    console.error("Error rendering RSC:", error);
+    res.status(500).send("Internal Server Error");
+  }
+});
+
+app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
+  try {
+    const reqPath = (
+      req.path.endsWith("/") ? req.path : req.path + "/"
+    ).replace("/____rsc_payload_error____", "");
+    const jsx = await getErrorJSX(reqPath, { ...req.query }, req.body.error);
     const manifest = readFileSync(
       path.resolve(process.cwd(), "____public____/react-client-manifest.json"),
       "utf8"
@@ -74,11 +95,15 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
 // Render HTML via child process, returning a stream
 function renderAppToHtml(reqPath, paramsString) {
   return new Promise((resolve, reject) => {
-    const child = spawn("node", [
-      path.resolve(__dirname, "render-html.js"),
-      reqPath,
-      paramsString,
-    ]);
+    const child = spawn(
+      "node",
+      [path.resolve(__dirname, "render-html.js"), reqPath, paramsString],
+      {
+        env: {
+          ...process.env,
+        },
+      }
+    );
 
     let errorOutput = "";
     child.stderr.on("data", (data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "1.4.3",
+  "version": "1.6.0",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {

package/webpack.config.js

@@ -29,10 +29,14 @@ module.exports = {
       isDevelopment && "webpack-hot-middleware/client?reload=true",
       path.resolve(__dirname, "./dinou/client.jsx"),
     ].filter(Boolean),
+    error: [
+      isDevelopment && "webpack-hot-middleware/client?reload=true",
+      path.resolve(__dirname, "./dinou/client-error.jsx"),
+    ].filter(Boolean),
   },
   output: {
     path: path.resolve(process.cwd(), "./____public____"),
-    filename: "main.js",
+    filename: "[name].js",
     publicPath: "/",
     clean: true,
   },