'use client'
import * as React from 'react'
import type { RouteError } from './RouteErrorBoundary'
export interface GlobalErrorProps {
/** The error thrown during render — matches the Next.js `global-error.tsx` contract. */
error: RouteError
/** Re-render the root — matches the Next.js `global-error.tsx` contract. */
reset: () => void
/** `lang` attribute for the replacement `` element. */
lang?: string
/** Document title shown while the global error surface is active. */
pageTitle?: string
/** Heading shown above the message. */
title?: string
/** Body copy shown to users. */
description?: string
/** Label for the primary (retry) action. */
retryLabel?: string
/** Label for the secondary (home) action. Hidden when `homeHref` is null. */
homeLabel?: string
/** Destination for the secondary action. Pass `null` to hide it. Defaults to `/`. */
homeHref?: string | null
/** Accent color used for the primary button. Defaults to a neutral blue. */
accentColor?: string
/** Called once on mount with the error — wire up your logger/Sentry here. */
onError?: (error: RouteError) => void
}
/**
* Standalone global error surface for an app's `app/global-error.tsx`.
*
* Because `global-error.tsx` replaces the root layout, this renders its own
* ``/`` and uses inline styles only — it does NOT depend on the
* app's Tailwind/CSS being loaded. Brandable via the `accentColor` and copy
* props.
*
* @example
* // app/global-error.tsx
* 'use client'
* import { GlobalError } from '@startsimpli/ui'
* export default function Error(props: { error: Error & { digest?: string }; reset: () => void }) {
* return
* }
*/
export function GlobalError({
error,
reset,
lang = 'en',
pageTitle = 'Application error',
title = 'Application error',
description = 'We encountered a problem loading the application. Please try refreshing the page, or contact support if the issue persists.',
retryLabel = 'Try again',
homeLabel = 'Go home',
homeHref = '/',
accentColor = '#2563eb',
onError,
}: GlobalErrorProps) {
React.useEffect(() => {
onError?.(error)
}, [error, onError])
const isDevelopment = process.env.NODE_ENV === 'development'
const goHome = () => {
if (homeHref && typeof window !== 'undefined') {
window.location.href = homeHref
}
}
return (
{pageTitle}