Allow application to provide express error middleware

[vineetdigit]

I'm using React router 7 in framework mode.

Route loader and action functions are expected to throw route errors by wrapping them with data().

Many of these errors simply originate from external api called from loader or action function, and simply need to be translated to data() for error boundaries to consume them.

I'd prefer not having to try/catch api errors in every loader/action, and instead prefer one single place to do this.

There are multiple ways to do this including writing a higher order functions, but ideally I prefer writing a custom express error handler.

What it seems to me that RR7 doesn't really call next(error) internally for the request to continue and reach my custom middleware.

I'd like to start a conversation on supporting this.

import compression from "compression";
import express from "express";
import morgan from "morgan";

// Short-circuit the type-checking of the built output.
const BUILD_PATH = "./build/server/index.js";
const DEVELOPMENT = process.env.NODE_ENV === "development";
const PORT = Number.parseInt(process.env.PORT || "4000");

const app = express();

app.use(compression());
app.disable("x-powered-by");
app.use(morgan("tiny"));

if (DEVELOPMENT) {
  console.log("Starting development server");
  const viteDevServer = await import("vite").then((vite) =>
    vite.createServer({
      server: { middlewareMode: true },
    })
  );
  app.use(viteDevServer.middlewares);
  app.use(async (req, res, next) => {
    try {
      const source = await viteDevServer.ssrLoadModule("./server/app.ts");
      return await source.app(req, res, next);
    } catch (error) {
      if (typeof error === "object" && error instanceof Error) {
        viteDevServer.ssrFixStacktrace(error);
      }
      next(error);
    }
  });
} else {
  console.log("Starting production server");
  app.use(
    "/assets",
    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
  );
  app.use(express.static("build/client", { maxAge: "1h" }));
  app.use(await import(BUILD_PATH).then((mod) => mod.app));
}

//
// This never reaches.
// 
app.use((err, req, res, next) => {
  console.error("error middleware");
  res.status(500).send(err);
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});