73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
"use client" // Error components must be Client Components
|
|
|
|
import {
|
|
useParams,
|
|
usePathname,
|
|
useRouter,
|
|
useSearchParams,
|
|
} from "next/navigation"
|
|
import { startTransition, useEffect, useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { login } from "@/constants/routes/handleAuth"
|
|
import { SESSION_EXPIRED } from "@/server/errors/trpc"
|
|
|
|
import { findLang } from "@/utils/languages"
|
|
|
|
import styles from "./error.module.css"
|
|
|
|
import { LangParams } from "@/types/params"
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string }
|
|
reset: () => void
|
|
}) {
|
|
const intl = useIntl()
|
|
const params = useParams<LangParams>()
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const currentSearchParamsRef = useRef<string>()
|
|
const isFirstLoadRef = useRef<boolean>(true)
|
|
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error(error)
|
|
|
|
if (error.message === SESSION_EXPIRED) {
|
|
const loginUrl = login[params.lang]
|
|
window.location.assign(loginUrl)
|
|
}
|
|
}, [error, params.lang])
|
|
|
|
useEffect(() => {
|
|
// This is to reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page
|
|
const currentSearchParams = searchParams.toString()
|
|
|
|
if (
|
|
currentSearchParamsRef.current !== currentSearchParams &&
|
|
!isFirstLoadRef.current
|
|
) {
|
|
startTransition(() => {
|
|
reset()
|
|
router.refresh()
|
|
})
|
|
}
|
|
isFirstLoadRef.current = false
|
|
currentSearchParamsRef.current = currentSearchParams
|
|
}, [searchParams, reset, router])
|
|
|
|
const pathname = usePathname()
|
|
const lang = findLang(pathname)
|
|
|
|
return (
|
|
<section className={styles.layout}>
|
|
<div className={styles.content}>
|
|
{lang}: {intl.formatMessage({ id: "Something went wrong!" })}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|