846fd904a6
feat(SW-2859): Create trpc package * Add isEdge, safeTry and dataCache to new common package * Add eslint and move prettier config * Clean up tests * Create trpc package and move initialization * Move errors and a few procedures * Move telemetry to common package * Move tokenManager to common package * Add Sentry to procedures * Clean up procedures * Fix self-referencing imports * Add exports to packages and lint rule to prevent relative imports * Add env to trpc package * Add eslint to trpc package * Apply lint rules * Use direct imports from trpc package * Add lint-staged config to trpc * Move lang enum to common * Restructure trpc package folder structure * Fix lang imports Approved-by: Linus Flood
75 lines
2.0 KiB
TypeScript
75 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 { SESSION_EXPIRED } from "@scandic-hotels/trpc/errors"
|
|
|
|
import { login } from "@/constants/routes/handleAuth"
|
|
import { env } from "@/env/client"
|
|
|
|
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>
|
|
)
|
|
}
|