feat: add error-view component #493

zchsh · 2022-01-20T00:38:26Z

🎟️ Asana Task
🔍 Preview Link

Description

This PR adds a @hashicorp/react-error-view component.

Have tested a canary release of this component in hashicorp/vagrant#12651.

PR Checklist 🚀

Items in this checklist may not may not apply to your PR, but please consider each item carefully.

Add Asana and Preview links above.
Conduct thorough self-review.
Add or update tests as appropriate.
Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a Sauce Labs account for this, if you don't have access, just ask!).
Conduct reasonable accessibility review (use the WAS as a guide or an axe browser plugin until we establish more formal checks).
Identify (in the description above) and document (add Asana tasks on this board) any technical debt that you're aware of, but are not addressing as part of this PR.

changeset-bot · 2022-01-20T00:38:28Z

🦋 Changeset detected

Latest commit: 34c8c9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hashicorp/react-error-view	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2022-01-20T00:38:29Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hashicorp/react-components/2nVBRBMT8yMMHtkcfkQzkaRaexXq
✅ Preview: https://react-components-git-zsadd-error-view-hashicorp.vercel.app

github-actions · 2022-01-20T21:24:18Z

📦 Canary Packages Published

Latest commit: 34c8c9c

Published 34 packages

@hashicorp/[email protected]

npm install @hashicorp/react-accordion@canary

@hashicorp/[email protected]

npm install @hashicorp/react-alert-banner@canary

@hashicorp/[email protected]

npm install @hashicorp/react-button@canary

@hashicorp/[email protected]

npm install @hashicorp/react-call-to-action@canary

@hashicorp/[email protected]

npm install @hashicorp/react-callouts@canary

@hashicorp/[email protected]

npm install @hashicorp/react-case-study-slider@canary

@hashicorp/[email protected]

npm install @hashicorp/react-code-block@canary

@hashicorp/[email protected]

npm install @hashicorp/react-combobox@canary

@hashicorp/[email protected]

npm install @hashicorp/react-consent-manager@canary

@hashicorp/[email protected]

npm install @hashicorp/react-content@canary

@hashicorp/[email protected]

npm install @hashicorp/react-content-cta@canary

@hashicorp/[email protected]

npm install @hashicorp/react-docs-page@canary

@hashicorp/[email protected]

npm install @hashicorp/react-error-view@canary

@hashicorp/[email protected]

npm install @hashicorp/react-featured-slider@canary

@hashicorp/[email protected]

npm install @hashicorp/react-feedback-form@canary

@hashicorp/[email protected]

npm install @hashicorp/react-glossary-page@canary

@hashicorp/[email protected]

npm install @hashicorp/react-hashi-stack-menu@canary

@hashicorp/[email protected]

npm install @hashicorp/react-hero@canary

@hashicorp/[email protected]

npm install @hashicorp/react-image@canary

@hashicorp/[email protected]

npm install @hashicorp/react-learn-callout@canary

@hashicorp/[email protected]

npm install @hashicorp/react-logo-grid@canary

@hashicorp/[email protected]

npm install @hashicorp/react-markdown-page@canary

@hashicorp/[email protected]

npm install @hashicorp/react-open-api-page@canary

@hashicorp/[email protected]

npm install @hashicorp/react-product-downloads-page@canary

@hashicorp/[email protected]

npm install @hashicorp/react-product-features-list@canary

@hashicorp/[email protected]

npm install @hashicorp/react-search@canary

@hashicorp/[email protected]

npm install @hashicorp/react-stepped-feature-list@canary

@hashicorp/[email protected]

npm install @hashicorp/react-subnav@canary

@hashicorp/[email protected]

npm install @hashicorp/react-tabbed-accordion@canary

@hashicorp/[email protected]

npm install @hashicorp/react-tabs@canary

@hashicorp/[email protected]

npm install @hashicorp/react-text-split@canary

@hashicorp/[email protected]

npm install @hashicorp/react-text-split-with-code@canary

@hashicorp/[email protected]

npm install @hashicorp/react-text-splits@canary

@hashicorp/[email protected]

npm install @hashicorp/react-vertical-text-block-list@canary

zchsh · 2022-01-20T21:32:34Z

packages/error-view/README.md

+
+A component used to display an error view. For further details on this component, see [docs.mdx](./docs.mdx). These docs can also be viewed through our [Swingset instance](https://react-components.vercel.app).
+
+## `useErrorPageAnalytics`


Kept this README pretty minimal, to avoid duplicating content in the docs.mdx file.

zchsh · 2022-01-20T21:34:13Z

packages/error-view/index.tsx

+  statusCode: number
+}
+
+const CONTENT_DICT = {


Went with a very fixed content approach for this component. I think this will satisfy most of our existing use cases, and have provided the useErrorPageAnalytics in case we need to do something more custom (in terms of either content or styles).

zchsh · 2022-01-20T21:35:49Z

pages/api/fetch-registry-data/[...name].js

@@ -19,13 +19,19 @@ async function fetchRegistryData(packageName) {
  // Otherwise, refetch
  try {
    const response = await fetch(registryUrl)
+    // If status is not 200, throw an error
+    if (response.status !== 200) {


Ran into an issue here since the package isn't published yet. I think it makes sense here to bail and throw an error if the npm registry URL responds with anything other than a successful response.

zchsh · 2022-01-20T21:36:31Z

swingset-extensions/release-details/index.js

@@ -28,18 +28,19 @@ function ReleaseDetails({ packageJson = {} }) {
      const [error, registryData] = await response.json()
      if (error) {
        let msg = `Error fetching registry data for ${name}. `
-        msg += `Full error: ${JSON.stringify(error)}`
+        msg += `error.toString(): ${JSON.stringify(error)}`


Felt this format might be more helpful and transparent for when there are errors.

zchsh · 2022-01-20T21:36:56Z

swingset-extensions/release-details/index.js

-          const isStable = parseInt(z).toString() === z
-          return isStable
-        })
+        const versions = registryData.versions || {}


registryData may not be defined, needed to handle that case.

zchsh · 2022-01-23T16:50:32Z

packages/error-view/__tests__/use-error-page-analytics.test.tsx

+    const forMockRestore = window.analytics
+    // $TSFixMe loosens window.analytics type to diverge from Segment type
+    // defined in @hashicorp/platform-types
+    window.analytics = { track: jest.fn() } as $TSFixMe


Without the ... as $TSFixMe I'd end up with TypeScript getting mad that this doesn't match the type defined in https://github.com/hashicorp/web-platform-packages/blob/6062939845d5d841d78afade8225e891cd428aa3/packages/types/index.d.ts#L34. Hopefully this makes sense, but wanted to flag in case anyone has a better workaround.

brkalow

💯

brkalow · 2022-01-24T23:19:20Z

@zchsh do you think it'd be acceptable to export additional error views from this package? I'm thinking of the shared versioned docs not found page, which is currently implemented here: https://github.com/hashicorp/waypoint/blob/main/website/pages/404.jsx#L41-L60

An alternative would be to add it to the CONTENT_DICT and add additional props to access it that way, but wanted to get your take before I went down that route. 🙏

adds versioned error view

Versioned view is being moved into dev-portal, so removing it here

brkalow · 2022-01-31T19:53:06Z

@zchsh FYI, I just moved the versioned error view out of this PR and into dev-portal like we discussed last week!

zchsh · 2022-02-04T15:23:46Z

Apologies for the delay here - I think this is ready to merge in, so going to do that now, and then run a release off react-components 👍

feat: add error-view component

70deae2

zchsh added the release:canary Triggers a canary release for commits to this pull request label Jan 20, 2022

chore: add changeset file

76751ea

vercel bot deployed to Preview January 20, 2022 00:44 View deployment

chore: checkout package files from main

d29e4a7

vercel bot had a problem deploying to Preview January 20, 2022 21:18 Failure

docs: add import to useErrorPageAnalytics example

1854bca

vercel bot had a problem deploying to Preview January 20, 2022 21:22 Failure

docs: add README

34efb60

vercel bot had a problem deploying to Preview January 20, 2022 21:25 Failure

docs: add trail to further docs to README

4df7e87

vercel bot had a problem deploying to Preview January 20, 2022 21:29 Failure

fix: link in error-view README

88c5857

vercel bot had a problem deploying to Preview January 20, 2022 21:30 Failure

fix: nit extra word in README

1084f0a

vercel bot had a problem deploying to Preview January 20, 2022 21:32 Failure

zchsh commented Jan 20, 2022

View reviewed changes

fix: issue with MDX pre without code

98f6cdd

vercel bot deployed to Preview January 20, 2022 21:40 View deployment

Merge branch 'main' into zs.add-error-view

d392ccc

vercel bot deployed to Preview January 20, 2022 21:42 View deployment

test(error-view): add test for error view hook

bc8dece

vercel bot deployed to Preview January 23, 2022 16:44 View deployment

chore: add comment on in test file

9fd11bc

vercel bot deployed to Preview January 23, 2022 16:49 View deployment

zchsh commented Jan 23, 2022

View reviewed changes

zchsh marked this pull request as ready for review January 23, 2022 16:52

zchsh requested review from brkalow and dstaley January 23, 2022 16:52

brkalow approved these changes Jan 24, 2022

View reviewed changes

Bryce Kalow added 2 commits January 25, 2022 12:15

adds versioned error view

7b52c88

Adjust types and add a doc comment

a0817c0

brkalow mentioned this pull request Jan 25, 2022

adds versioned error view #497

Merged

6 tasks

Merge pull request #497 from hashicorp/brk.feat/versioned-error-view

5ca636c

adds versioned error view

vercel bot deployed to Preview January 28, 2022 00:39 View deployment

Delete versioned-view.tsx

87f2f03

Versioned view is being moved into dev-portal, so removing it here

vercel bot deployed to Preview January 31, 2022 19:42 View deployment

add use404Redirects hook (#502)

34c8c9c

vercel bot deployed to Preview January 31, 2022 23:29 View deployment

zchsh merged commit 2ab7135 into main Feb 4, 2022

zchsh deleted the zs.add-error-view branch February 4, 2022 15:24

github-actions bot mentioned this pull request Feb 4, 2022

Version Packages #506

Merged


		A component used to display an error view. For further details on this component, see [docs.mdx](./docs.mdx). These docs can also be viewed through our [Swingset instance](https://react-components.vercel.app).

		## `useErrorPageAnalytics`

feat: add error-view component #493

feat: add error-view component #493

Conversation

zchsh commented Jan 20, 2022 • edited Loading

Description

PR Checklist 🚀

changeset-bot bot commented Jan 20, 2022 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 20, 2022 • edited Loading

github-actions bot commented Jan 20, 2022 • edited Loading

📦 Canary Packages Published

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

@hashicorp/[email protected]

zchsh Jan 20, 2022

Choose a reason for hiding this comment

zchsh Jan 20, 2022

Choose a reason for hiding this comment

zchsh Jan 20, 2022

Choose a reason for hiding this comment

zchsh Jan 20, 2022

Choose a reason for hiding this comment

zchsh Jan 20, 2022

Choose a reason for hiding this comment

zchsh Jan 23, 2022

Choose a reason for hiding this comment

brkalow left a comment

Choose a reason for hiding this comment

brkalow commented Jan 24, 2022

brkalow commented Jan 31, 2022

zchsh commented Feb 4, 2022

zchsh commented Jan 20, 2022 •

edited

Loading

changeset-bot bot commented Jan 20, 2022 •

edited

Loading

vercel bot commented Jan 20, 2022 •

edited

Loading

github-actions bot commented Jan 20, 2022 •

edited

Loading