Proper 404 Handling #6335

uSkizzik · 2023-05-06T20:58:25Z

uSkizzik
May 6, 2023

The Issue

Okay so, I recently decided to port my project from Next to Remix due to the superior routing. One thing I don't like about Remix (besides the major issues with the dev tools) is the fact it doesn't support proper 404 pages like Next. I want to be able to display the same 404 page regardless of if the page wasn't found or if my loader function couldn't find the data it needs.

The way Next does this is by having a 404.js file in the root of the pages folder which is displayed whenever a route is not found or when their equivalent of loader (getServerSideProps) returns notFound: true.

The Proposed Solution

I propose Remix adds something similar. The 404 page would be stored in the app directory instead, at the same level as root (keep in mind I'm personally using v1 routing so idk how v2 works exactly). Then the load function of a page can throw the result of a notFound function or something like that and Remix would display the 404 page instead.

Why not an ErrorBoundary?

Well from my experience, a boundary on the root level doesn't load the CSS of the page. I tried moving my root layout to a separate Content component and then loading it in both the body element and when a 404 occurs and it didn't work because of the Script component which appears to be responsible for both the CSS loading (trough the links export) and the routing.

Here's an example of what I mean:

export const links = () => [{ rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [])]

function Content({ children }) {
	return (
		<div id="layout">
			<div className="page-wrapper">
				<Navigation />
				{children}
			</div>
			<Footer />
        
			<ScrollRestoration />
			<Scripts />
			<LiveReload />
		</div>
	)
}

export function ErrorBoundary() {
	const error = useRouteError()
	console.debug(error)
	
	if (error?.id === "RESOURCE_NOT_FOUND") {
		return (
			<Contents>
				<Custom404Page />
			</Contents>
		)
	}

	return (
		<div>
			<h1>Uh oh ...</h1>
			<p>Something went wrong.</p>
		</div>
	)
}

export default function App() {
	const { i18nPrefix, sidebar } = {}

	return (
		<html lang="en" data-bs-theme="dark">
				<head>
					<meta charSet="utf-8" />
					<meta content="width=device-width, initial-scale=1" name="viewport" />

					<Meta />
					<Links />
				</head>
				<body>
					<Contents>
						<Outlet />
					</Contents>
				</body>
		</html>
	)
}

The issue here is whenever the Script tag is enabled, it'd end up with a page with the "Uh oh" message and whenever it was disabled it would end up with the expected result but with no styling.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Proper 404 Handling #6335

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Proper 404 Handling #6335

Uh oh!

uSkizzik May 6, 2023

The Issue

The Proposed Solution

Why not an ErrorBoundary?

Replies: 0 comments

uSkizzik
May 6, 2023