Add 404 page

This commit is contained in:
Benjamin Toby 2026-03-17 15:29:57 +01:00
parent 451639b0c3
commit d56fe0ee55
4 changed files with 68 additions and 26 deletions

View File

@ -11,6 +11,8 @@ import path from "path";
import AppNames from "../../../utils/grab-app-names"; import AppNames from "../../../utils/grab-app-names";
import { existsSync } from "fs"; import { existsSync } from "fs";
class NotFoundError extends Error {}
type Params = { type Params = {
req?: Request; req?: Request;
file_path?: string; file_path?: string;
@ -23,7 +25,7 @@ export default async function grabPageComponent({
const url = req?.url ? new URL(req.url) : undefined; const url = req?.url ? new URL(req.url) : undefined;
const router = grabRouter(); const router = grabRouter();
const { BUNX_ROOT_500_PRESET_COMPONENT, PAGES_DIR } = grabDirNames(); const { BUNX_ROOT_500_PRESET_COMPONENT, BUNX_ROOT_404_PRESET_COMPONENT, PAGES_DIR } = grabDirNames();
const routeParams = req ? await grabRouteParams({ req }) : undefined; const routeParams = req ? await grabRouteParams({ req }) : undefined;
@ -31,9 +33,7 @@ export default async function grabPageComponent({
const match = url ? router.match(url.pathname) : undefined; const match = url ? router.match(url.pathname) : undefined;
if (!match?.filePath && url?.pathname) { if (!match?.filePath && url?.pathname) {
const errMsg = `Page ${url.pathname} not found`; throw new NotFoundError(`Page ${url.pathname} not found`);
// console.error(errMsg);
throw new Error(errMsg);
} }
const file_path = match?.filePath || passed_file_path; const file_path = match?.filePath || passed_file_path;
@ -126,9 +126,15 @@ export default async function grabPageComponent({
meta, meta,
}; };
} catch (error: any) { } catch (error: any) {
const is404 = error instanceof NotFoundError;
const errorRoute = is404 ? "/404" : "/500";
const presetComponent = is404
? BUNX_ROOT_404_PRESET_COMPONENT
: BUNX_ROOT_500_PRESET_COMPONENT;
try { try {
const match = router.match("/500"); const match = router.match(errorRoute);
const filePath = match?.filePath || BUNX_ROOT_500_PRESET_COMPONENT; const filePath = match?.filePath || presetComponent;
const bundledMap = match?.filePath const bundledMap = match?.filePath
? (global.BUNDLER_CTX_MAP?.find( ? (global.BUNDLER_CTX_MAP?.find(
@ -147,7 +153,7 @@ export default async function grabPageComponent({
bundledMap, bundledMap,
}; };
} catch { } catch {
const DefaultServerError: FC = () => ( const DefaultNotFound: FC = () => (
<div <div
style={{ style={{
width: "100vw", width: "100vw",
@ -157,16 +163,15 @@ export default async function grabPageComponent({
justifyContent: "center", justifyContent: "center",
}} }}
> >
<span>500 Internal Server Error</span> <span>{is404 ? "404 Not Found" : "500 Internal Server Error"}</span>
</div> </div>
); );
return { return {
component: <DefaultServerError />, component: <DefaultNotFound />,
routeParams, routeParams,
module: { module: { default: DefaultNotFound },
default: DefaultServerError, bundledMap: {} as BundlerCTXMap,
},
}; };
} }
} }

View File

@ -4,7 +4,7 @@ type Params = {
meta: BunextPageModuleMeta; meta: BunextPageModuleMeta;
}; };
export default async function grabWebMetaHTML({ meta }: Params) { export default function grabWebMetaHTML({ meta }: Params) {
let html = ``; let html = ``;
if (meta.title) { if (meta.title) {
@ -40,23 +40,36 @@ export default async function grabWebMetaHTML({ meta }: Params) {
if (meta.og) { if (meta.og) {
const { og } = meta; const { og } = meta;
if (og.title) html += ` <meta property="og:title" content="${og.title}" />\n`; if (og.title)
if (og.description) html += ` <meta property="og:description" content="${og.description}" />\n`; html += ` <meta property="og:title" content="${og.title}" />\n`;
if (og.image) html += ` <meta property="og:image" content="${og.image}" />\n`; if (og.description)
if (og.url) html += ` <meta property="og:url" content="${og.url}" />\n`; html += ` <meta property="og:description" content="${og.description}" />\n`;
if (og.type) html += ` <meta property="og:type" content="${og.type}" />\n`; if (og.image)
if (og.siteName) html += ` <meta property="og:site_name" content="${og.siteName}" />\n`; html += ` <meta property="og:image" content="${og.image}" />\n`;
if (og.locale) html += ` <meta property="og:locale" content="${og.locale}" />\n`; if (og.url)
html += ` <meta property="og:url" content="${og.url}" />\n`;
if (og.type)
html += ` <meta property="og:type" content="${og.type}" />\n`;
if (og.siteName)
html += ` <meta property="og:site_name" content="${og.siteName}" />\n`;
if (og.locale)
html += ` <meta property="og:locale" content="${og.locale}" />\n`;
} }
if (meta.twitter) { if (meta.twitter) {
const { twitter } = meta; const { twitter } = meta;
if (twitter.card) html += ` <meta name="twitter:card" content="${twitter.card}" />\n`; if (twitter.card)
if (twitter.title) html += ` <meta name="twitter:title" content="${twitter.title}" />\n`; html += ` <meta name="twitter:card" content="${twitter.card}" />\n`;
if (twitter.description) html += ` <meta name="twitter:description" content="${twitter.description}" />\n`; if (twitter.title)
if (twitter.image) html += ` <meta name="twitter:image" content="${twitter.image}" />\n`; html += ` <meta name="twitter:title" content="${twitter.title}" />\n`;
if (twitter.site) html += ` <meta name="twitter:site" content="${twitter.site}" />\n`; if (twitter.description)
if (twitter.creator) html += ` <meta name="twitter:creator" content="${twitter.creator}" />\n`; html += ` <meta name="twitter:description" content="${twitter.description}" />\n`;
if (twitter.image)
html += ` <meta name="twitter:image" content="${twitter.image}" />\n`;
if (twitter.site)
html += ` <meta name="twitter:site" content="${twitter.site}" />\n`;
if (twitter.creator)
html += ` <meta name="twitter:creator" content="${twitter.creator}" />\n`;
} }
return html; return html;

16
src/presets/not-found.tsx Normal file
View File

@ -0,0 +1,16 @@
export default function DefaultNotFoundPage() {
return (
<div
style={{
width: "100vw",
height: "100vh",
overflow: "hidden",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<span>404 Not Found</span>
</div>
);
}

View File

@ -30,6 +30,12 @@ export default function grabDirNames() {
`${BUNX_ROOT_500_FILE_NAME}.tsx`, `${BUNX_ROOT_500_FILE_NAME}.tsx`,
); );
const BUNX_ROOT_404_FILE_NAME = `not-found`;
const BUNX_ROOT_404_PRESET_COMPONENT = path.join(
BUNX_ROOT_PRESETS_DIR,
`${BUNX_ROOT_404_FILE_NAME}.tsx`,
);
return { return {
ROOT_DIR, ROOT_DIR,
SRC_DIR, SRC_DIR,
@ -45,6 +51,8 @@ export default function grabDirNames() {
BUNX_ROOT_PRESETS_DIR, BUNX_ROOT_PRESETS_DIR,
BUNX_ROOT_500_PRESET_COMPONENT, BUNX_ROOT_500_PRESET_COMPONENT,
BUNX_ROOT_500_FILE_NAME, BUNX_ROOT_500_FILE_NAME,
BUNX_ROOT_404_PRESET_COMPONENT,
BUNX_ROOT_404_FILE_NAME,
HYDRATION_DST_DIR_MAP_JSON_FILE, HYDRATION_DST_DIR_MAP_JSON_FILE,
}; };
} }