client: improve error page design, fix isPageRequest regex in middleware

This commit is contained in:
Max Leiter 2022-04-06 16:31:41 -07:00
parent 2a9e7ba6fc
commit bc6362e412
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 39 additions and 3 deletions

View file

@ -0,0 +1,19 @@
import { Page } from '@geist-ui/core'
const Error = ({ status }: {
status: number
}) => {
return (
<Page title={status.toString() || 'Error'}>
{status === 404 ? (
<h1>This page cannot be found.</h1>
) : (
<section>
<p>An error occurred: {status}</p>
</section>
)}
</Page>
)
}
export default Error

17
client/pages/_error.tsx Normal file
View file

@ -0,0 +1,17 @@
import ErrorComponent from '@components/error'
function Error({ statusCode }: {
statusCode: number
}) {
return <ErrorComponent status={statusCode} />
}
Error.getInitialProps = ({ res, err }: {
res: any
err: any
}) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
export default Error

View file

@ -1,14 +1,14 @@
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
const PUBLIC_FILE = /.(.*)$/
const PUBLIC_FILE = /\.(.*)$/
export function middleware(req: NextRequest, event: NextFetchEvent) {
const pathname = req.nextUrl.pathname
const signedIn = req.cookies['drift-token']
const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
const isPageRequest =
!PUBLIC_FILE.test(req.nextUrl.pathname) &&
!req.nextUrl.pathname.startsWith('/api') &&
!PUBLIC_FILE.test(pathname) &&
!pathname.startsWith('/api') &&
// header added when next/link pre-fetches a route
!req.headers.get('x-middleware-preflight')