<ErrorView> Component

A component used to display an error view, within layouts that use g-grid-container.

<ErrorView statusCode={404} />

useErrorPageAnalytics

This component leverages a useErrorPageAnalytics hook internally, which reports the page error using window.location.track().

Note that window.location.track() is initialized in ConsentManager.

This hook is intended for use cases where the opinionated, g-grid-container-based styles of the default ErrorView component are not suited to a project.

/**
 * eg 404.tsx or 500.tsx
 * ref: https://nextjs.org/docs/advanced-features/custom-error-page
 */
import { useErrorPageAnalytics } from '@hashicorp/react-error-view'
import s from './custom-styles.module.css'

export default function CustomFourOhFourPage(): React.ReactElement {
  useErrorPageAnalytics(404)

  return (
    <p>
      Oops, something went wrong! We logged an error. Please enjoy this "Back to
      Home" link.
    </p>
  )
}

/**
 * eg 404.tsx or 500.tsx
 * ref: https://nextjs.org/docs/advanced-features/custom-error-page
 */
import { useErrorPageAnalytics } from '@hashicorp/react-error-view'
import s from './custom-styles.module.css'
 
export default function CustomFourOhFourPage(): React.ReactElement {
  useErrorPageAnalytics(404)
 
  return (
    <p>
      Oops, something went wrong! We logged an error. Please enjoy this "Back to
      Home" link.
    </p>
  )
}

Props

Examples

statusCode={404}

<ErrorView statusCode={404} />

Fallback (for 500 pages, and any non-404 statusCode)

<ErrorView statusCode={500} />