chore (SW-834): Upgrade to Next 15 * wip: apply codemod and upgrade swc plugin * wip: design-system to react 19, fix issues from async (search)params * wip: fix remaining issues from codemod serverClient is now async because context use headers() getLang is now async because it uses headers() * Minor cleanup * Inline react-material-symbols package Package is seemingly not maintained any more and doesn't support React 19. This copies the package source into `design-system`, makes the necessary changes for 19 and export it for others to use. * Fix missing awaits * Disable modal exit animations Enabling modal exit animations via isExiting prop is causing modals to be rendered in "hidden" state and never unmount. Seems to be an issue with react-aria-components, see https://github.com/adobe/react-spectrum/issues/7563. Can probably be fixed by rewriting to a solution similar to https://react-spectrum.adobe.com/react-aria/examples/framer-modal-sheet.html * Remove unstable cache implementation and use in memory cache locally * Fix ref type in SelectFilter * Use cloneElement to add key prop to element Approved-by: Linus Flood
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import * as Sentry from "@sentry/nextjs"
|
|
import { useParams, useRouter, useSearchParams } from "next/navigation"
|
|
import { startTransition, useEffect, useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { login } from "@/constants/routes/handleAuth"
|
|
import { env } from "@/env/client"
|
|
import { SESSION_EXPIRED } from "@/server/errors/trpc"
|
|
|
|
import styles from "./error.module.css"
|
|
|
|
import type { 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>(undefined)
|
|
const isFirstLoadRef = useRef<boolean>(true)
|
|
|
|
useEffect(() => {
|
|
if (!error) return
|
|
|
|
console.error(error)
|
|
|
|
if (error.message === SESSION_EXPIRED) {
|
|
const loginUrl = login[params.lang]
|
|
window.location.assign(loginUrl)
|
|
return
|
|
}
|
|
|
|
Sentry.captureException(error)
|
|
}, [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])
|
|
|
|
return (
|
|
<section className={styles.layout}>
|
|
<div className={styles.content}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Something went wrong!",
|
|
})}
|
|
{env.NEXT_PUBLIC_NODE_ENV === "development" && (
|
|
<pre>{error.stack || error.message}</pre>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|