From b759b9aa3ba592b83a290a95a32c6ed897c4fb19 Mon Sep 17 00:00:00 2001
From: Alex Yau <alex.yau@thetradedesk.com>
Date: Wed, 3 Jan 2024 15:42:04 +1100
Subject: [PATCH 1/3] Update unexpected error copy

- Update copy in production code and test.
- Create storybook for ErrorView for easier testing. This included some refactoring - moving the tsx to a core component
---
 src/web/components/Core/ErrorView.stories.tsx | 38 +++++++++++++++++++
 src/web/components/Core/ErrorView.tsx         | 23 +++++++++++
 src/web/utils/ErrorView.tsx                   | 28 --------------
 src/web/utils/PortalErrorBoundary.test.tsx    |  2 +-
 src/web/utils/PortalErrorBoundary.tsx         |  2 +-
 src/web/utils/RouteErrorBoundary.tsx          |  2 +-
 src/web/utils/errorHelpers.ts                 |  6 +++
 7 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 src/web/components/Core/ErrorView.stories.tsx
 create mode 100644 src/web/components/Core/ErrorView.tsx
 delete mode 100644 src/web/utils/ErrorView.tsx
 create mode 100644 src/web/utils/errorHelpers.ts

diff --git a/src/web/components/Core/ErrorView.stories.tsx b/src/web/components/Core/ErrorView.stories.tsx
new file mode 100644
index 00000000..95f96572
--- /dev/null
+++ b/src/web/components/Core/ErrorView.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ErrorView from './ErrorView';
+
+const meta: Meta<typeof ErrorView> = {
+  component: ErrorView,
+  title: 'Shared Components/Error View',
+  decorators: [(Story) => <Story />],
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorView>;
+
+export const WithErrorId: Story = {
+  args: {
+    errorId: 'this is an errorId',
+  },
+};
+
+export const WithErrorHash: Story = {
+  args: {
+    errorHash: 'this is an errorHash',
+  },
+};
+
+export const WithErrorIdAndMessage: Story = {
+  args: {
+    message: 'this is a custom error message',
+    errorId: 'this is an errorId',
+  },
+};
+
+export const WithErrorIdAndErrorHash: Story = {
+  args: {
+    errorId: '1234-5678-abcd-efgh',
+    errorHash: 'this is an errorHash',
+  },
+};
diff --git a/src/web/components/Core/ErrorView.tsx b/src/web/components/Core/ErrorView.tsx
new file mode 100644
index 00000000..26174257
--- /dev/null
+++ b/src/web/components/Core/ErrorView.tsx
@@ -0,0 +1,23 @@
+import { analyticsIdentifier } from '../../utils/errorHelpers';
+
+type ErrorViewProps = {
+  message?: string;
+  errorId?: string;
+  errorHash?: string;
+};
+
+function ErrorView({ message, errorId, errorHash }: ErrorViewProps) {
+  return (
+    <div className='error-content'>
+      <img alt='Error icon' src='/uid2-logo.png' />
+      <div>Error</div>
+      <div>
+        {message ??
+          'There was an unexpected error. Please try again. If the problem persists, contact Support and provide the following information: '}
+      </div>
+      <div>({analyticsIdentifier(errorId, errorHash)})</div>
+    </div>
+  );
+}
+
+export default ErrorView;
diff --git a/src/web/utils/ErrorView.tsx b/src/web/utils/ErrorView.tsx
deleted file mode 100644
index 0592c41a..00000000
--- a/src/web/utils/ErrorView.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-const analyticsIdentifier = (errorId?: string, errorHash?: string) => {
-  if (!errorHash && !errorId) return 'No error identifier';
-  return errorHash
-    ? `error hash: ${errorHash}` // From backend
-    : `error ID: ${errorId}`; // Generated by frontend to make it possible to triage user reported errors.
-};
-
-export function ErrorView({
-  message,
-  errorId,
-  errorHash,
-}: {
-  message?: string;
-  errorId?: string;
-  errorHash?: string;
-}) {
-  return (
-    <div className='error-content'>
-      <img alt='Error icon' src='/uid2-logo.png' />
-      <div>Error</div>
-      <div>
-        {message ??
-          'Unexpected error encountered, please contact support if the problem persists and provide the information below'}
-      </div>
-      <div>({analyticsIdentifier(errorId, errorHash)})</div>
-    </div>
-  );
-}
diff --git a/src/web/utils/PortalErrorBoundary.test.tsx b/src/web/utils/PortalErrorBoundary.test.tsx
index b90e6012..fb6f8e9e 100644
--- a/src/web/utils/PortalErrorBoundary.test.tsx
+++ b/src/web/utils/PortalErrorBoundary.test.tsx
@@ -43,7 +43,7 @@ describe('Error boundary', () => {
     );
     expect(
       await screen.findByText(
-        'Unexpected error encountered, please contact support if the problem persists and provide the information below'
+        'There was an unexpected error. Please try again. If the problem persists, contact Support and provide the following information:'
       )
     ).toBeInTheDocument();
     portalSpy.mockRestore();
diff --git a/src/web/utils/PortalErrorBoundary.tsx b/src/web/utils/PortalErrorBoundary.tsx
index 1139a719..28c994b1 100644
--- a/src/web/utils/PortalErrorBoundary.tsx
+++ b/src/web/utils/PortalErrorBoundary.tsx
@@ -1,5 +1,5 @@
+import ErrorView from '../components/Core/ErrorView';
 import { errorHandler, RenderedErrorProps } from './errorHandler';
-import { ErrorView } from './ErrorView';
 
 function PortalErrorComponent(props: RenderedErrorProps) {
   const { errorId, errorHash } = props;
diff --git a/src/web/utils/RouteErrorBoundary.tsx b/src/web/utils/RouteErrorBoundary.tsx
index 7be2f226..4431bbfb 100644
--- a/src/web/utils/RouteErrorBoundary.tsx
+++ b/src/web/utils/RouteErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import { useRouteError } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 
-import { ErrorView } from './ErrorView';
+import ErrorView from '../components/Core/ErrorView';
 
 interface RouteError {
   errorHash?: string;
diff --git a/src/web/utils/errorHelpers.ts b/src/web/utils/errorHelpers.ts
new file mode 100644
index 00000000..1e5b60c5
--- /dev/null
+++ b/src/web/utils/errorHelpers.ts
@@ -0,0 +1,6 @@
+export const analyticsIdentifier = (errorId?: string, errorHash?: string) => {
+  if (!errorHash && !errorId) return 'No error identifier';
+  return errorHash
+    ? `error hash: ${errorHash}` // From backend
+    : `error ID: ${errorId}`; // Generated by frontend to make it possible to triage user reported errors.
+};

From bc95ee23a4ad72b53cb939c62c6985b5a011cf7d Mon Sep 17 00:00:00 2001
From: Alex Yau <alex.yau@thetradedesk.com>
Date: Wed, 3 Jan 2024 15:47:08 +1100
Subject: [PATCH 2/3] Add styling to storybook and include default story

---
 src/web/components/Core/ErrorView.stories.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/web/components/Core/ErrorView.stories.tsx b/src/web/components/Core/ErrorView.stories.tsx
index 95f96572..9b5534d9 100644
--- a/src/web/components/Core/ErrorView.stories.tsx
+++ b/src/web/components/Core/ErrorView.stories.tsx
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import ErrorView from './ErrorView';
 
+import '../../utils/errorHandler.scss';
+
 const meta: Meta<typeof ErrorView> = {
   component: ErrorView,
   title: 'Shared Components/Error View',
@@ -11,6 +13,8 @@ export default meta;
 
 type Story = StoryObj<typeof ErrorView>;
 
+export const Default: Story = {};
+
 export const WithErrorId: Story = {
   args: {
     errorId: 'this is an errorId',

From ec8514bee79381f3c5aad3e56625a5be765457c8 Mon Sep 17 00:00:00 2001
From: Alex Yau <alex.yau@thetradedesk.com>
Date: Wed, 3 Jan 2024 15:50:20 +1100
Subject: [PATCH 3/3] Remove decorators from story

---
 src/web/components/Core/ErrorView.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/web/components/Core/ErrorView.stories.tsx b/src/web/components/Core/ErrorView.stories.tsx
index 9b5534d9..9f6a8d68 100644
--- a/src/web/components/Core/ErrorView.stories.tsx
+++ b/src/web/components/Core/ErrorView.stories.tsx
@@ -7,7 +7,6 @@ import '../../utils/errorHandler.scss';
 const meta: Meta<typeof ErrorView> = {
   component: ErrorView,
   title: 'Shared Components/Error View',
-  decorators: [(Story) => <Story />],
 };
 export default meta;