Add 404 page
This commit is contained in:
parent
451639b0c3
commit
d56fe0ee55
@ -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,
|
||||||
},
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
16
src/presets/not-found.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user