client: improve error page design, fix isPageRequest regex in middleware
This commit is contained in:
parent
2a9e7ba6fc
commit
bc6362e412
3 changed files with 39 additions and 3 deletions
19
client/components/error/index.tsx
Normal file
19
client/components/error/index.tsx
Normal 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
17
client/pages/_error.tsx
Normal 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
|
|
@ -1,14 +1,14 @@
|
||||||
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
|
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
|
||||||
|
|
||||||
const PUBLIC_FILE = /.(.*)$/
|
const PUBLIC_FILE = /\.(.*)$/
|
||||||
|
|
||||||
export function middleware(req: NextRequest, event: NextFetchEvent) {
|
export function middleware(req: NextRequest, event: NextFetchEvent) {
|
||||||
const pathname = req.nextUrl.pathname
|
const pathname = req.nextUrl.pathname
|
||||||
const signedIn = req.cookies['drift-token']
|
const signedIn = req.cookies['drift-token']
|
||||||
const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
|
const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
|
||||||
const isPageRequest =
|
const isPageRequest =
|
||||||
!PUBLIC_FILE.test(req.nextUrl.pathname) &&
|
!PUBLIC_FILE.test(pathname) &&
|
||||||
!req.nextUrl.pathname.startsWith('/api') &&
|
!pathname.startsWith('/api') &&
|
||||||
// header added when next/link pre-fetches a route
|
// header added when next/link pre-fetches a route
|
||||||
!req.headers.get('x-middleware-preflight')
|
!req.headers.get('x-middleware-preflight')
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue