chore: swap in pre-release of @hashicorp/react-error-view

website/components/error-view/index.tsx

-import s from './style.module.css'
-import Link from 'next/link'
-import useErrorPageAnalytics from './use-error-page-analytics'
-
-interface ErrorPageProps {
-  /** Error code to be recorded via window.analytics.track  */
-  statusCode: number
-}
-
-const CONTENT_DICT = {
-  404: {
-    heading: 'Not Found',
-    message: "We're sorry, but we can't find the page you're looking for.",
-  },
-  fallback: {
-    heading: 'Something went wrong.',
-    message:
-      "We're sorry, but the requested page isn't available right now. We've logged this as an error, and will look into it. Please check back soon.",
-  },
-}
-
-function ErrorPage({ statusCode }: ErrorPageProps): React.ReactElement {
-  useErrorPageAnalytics(statusCode)
-
-  const { heading, message } = CONTENT_DICT[statusCode] || CONTENT_DICT.fallback
-  return (
-    <div className={s.root}>
-      <h1 className={s.heading}>{heading}</h1>
-      <p>{message}</p>
-      <p>
-        <Link href="/">
-          <a className={s.link}>Back to Home</a>
-        </Link>
-      </p>
-    </div>
-  )
-}
-
-export { useErrorPageAnalytics }
-export default ErrorPage

website/components/error-view/style.module.css

-.root {
-  composes: .g-grid-container from global;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 64px auto;
-
-  /* max-width overrides g-grid-container default */
-  max-width: 784px;
-  min-height: 50vh;
-  padding-inline: 32px;
-  text-align: center;
-
-  @media (--large) {
-    padding-inline: 24px;
-  }
-}
-
-.heading {
-  composes: g-type-display-3 from global;
-}
-
-.link {
-  color: var(--highlight-color);
-}

website/components/error-view/use-error-page-analytics.ts

-import { useEffect } from 'react'
-
-/**
- * Given an error category to record,
- * make a call to window.analytics.track on mount
- * to record the specified error category at the
- * current window.location.href.
- *
- * Relies on window.analytics.track() being a valid function
- * which can be called as window.analytics.track(href, { category, label }).
- */
-export default function useErrorPageAnalytics(
-  /** The type of error. Used to send specific category values
-   * to window.analytics.track. */
-  statusCode: number
-): void {
-  useEffect(() => {
-    if (
-      typeof window !== 'undefined' &&
-      typeof window?.analytics?.track === 'function' &&
-      typeof window?.document?.referrer === 'string' &&
-      typeof window?.location?.href === 'string'
-    )
-      window.analytics.track(window.location.href, {
-        category: `${statusCode} Response`,
-        label: window.document.referrer || 'No Referrer',
-      })
-  }, [])
-}

website/package-lock.json

@@ -18,6 +18,7 @@
         "@hashicorp/react-code-block": "^4.1.5",
         "@hashicorp/react-consent-manager": "^7.1.0",
         "@hashicorp/react-docs-page": "^14.12.0",
+        "@hashicorp/react-error-view": "^0.0.1-canary-2022020214421",
         "@hashicorp/react-hashi-stack-menu": "^2.1.2",
         "@hashicorp/react-head": "^3.1.2",
         "@hashicorp/react-inline-svg": "^6.0.3",
@@ -2557,6 +2558,15 @@
         "@hashicorp/nextjs-scripts": ">=17.x"
       }
     },
+    "node_modules/@hashicorp/react-error-view": {
+      "version": "0.0.1-canary-2022020214421",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-error-view/-/react-error-view-0.0.1-canary-2022020214421.tgz",
+      "integrity": "sha512-2WUQ/AsK297R3806exTmwS2qMDtkZ0vPHo24E6Z+CaSQkEOimFP9clGr/ljL5Gg1nbXWOp8NzcctMEcWkgUJqA==",
+      "peerDependencies": {
+        "@hashicorp/mktg-global-styles": ">=3.x",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@hashicorp/react-global-styles": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.6.1.tgz",
@@ -23458,6 +23468,12 @@
         "@hashicorp/js-utils": "^1.0.10"
       }
     },
+    "@hashicorp/react-error-view": {
+      "version": "0.0.1-canary-2022020214421",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-error-view/-/react-error-view-0.0.1-canary-2022020214421.tgz",
+      "integrity": "sha512-2WUQ/AsK297R3806exTmwS2qMDtkZ0vPHo24E6Z+CaSQkEOimFP9clGr/ljL5Gg1nbXWOp8NzcctMEcWkgUJqA==",
+      "requires": {}
+    },
     "@hashicorp/react-global-styles": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.6.1.tgz",

website/package.json

@@ -14,6 +14,7 @@
     "@hashicorp/react-code-block": "^4.1.5",
     "@hashicorp/react-consent-manager": "^7.1.0",
     "@hashicorp/react-docs-page": "^14.12.0",
+    "@hashicorp/react-error-view": "^0.0.1-canary-2022020214421",
     "@hashicorp/react-hashi-stack-menu": "^2.1.2",
     "@hashicorp/react-head": "^3.1.2",
     "@hashicorp/react-inline-svg": "^6.0.3",

website/pages/404.tsx

-import ErrorView from 'components/error-view'
+import ErrorView from '@hashicorp/react-error-view'
 
 export default function FourOhFour() {
   return <ErrorView statusCode={404} />

website/pages/500.tsx

-import ErrorView from 'components/error-view'
+import ErrorView from '@hashicorp/react-error-view'
 
 export default function FiveHundred() {
   return <ErrorView statusCode={500} />

website/pages/_error.tsx

-import ErrorView from 'components/error-view'
+import ErrorView from '@hashicorp/react-error-view'
 import Bugsnag from '@hashicorp/platform-runtime-error-monitoring'
 
 function Error({ statusCode }) {