Merge pull request #249 from IABTechLab/ajy-UID2-2599-Update-unexpect…

…ed-error-copy

Update unexpected error copy

src/web/components/Core/ErrorView.stories.tsx

@@ -0,0 +1,41 @@
+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',
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorView>;
+
+export const Default: Story = {};
+
+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',
+  },
+};

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;

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();

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;

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;

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.
+};