🎨 Add Mr.Jack svg to NetworkError

liam-hq · Feb 6, 2025 · a0fc43d · a0fc43d
1 parent 51dcc0e
commit a0fc43d
Show file tree

Hide file tree

Showing 7 changed files with 474 additions and 54 deletions.
diff --git a/.changeset/fresh-shirts-stare.md b/.changeset/fresh-shirts-stare.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🎨 Add Mr.Jack svg to NetworkError
diff --git a/frontend/apps/erd-web/app/erd/p/[...slug]/erdViewer.tsx b/frontend/apps/erd-web/app/erd/p/[...slug]/erdViewer.tsx
@@ -14,6 +14,7 @@ import * as v from 'valibot'
 type ErrorObject = {
   name: string
   message: string
+  instruction?: string
 }
 
 type ERDViewerProps = {

diff --git a/frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx b/frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx
@@ -91,38 +91,48 @@ export default async function Page({
   const blankDbStructure = { tables: {}, relationships: {} }
 
   const contentUrl = resolveContentUrl(url)
+  const weCannotAccess = `Our signal's lost in the void! No access at this time..`
+  const pleaseCheck = `Double-check the transmission link ${url} and initiate contact again.`
   if (!contentUrl) {
     return (
       <ERDViewer
         dbStructure={blankDbStructure}
         defaultSidebarOpen={false}
-        errorObjects={[{ name: 'NetworkError', message: 'Invalid URL' }]}
+        errorObjects={[
+          {
+            name: 'NetworkError',
+            message: weCannotAccess,
+            instruction: pleaseCheck,
+          },
+        ]}
       />
     )
   }
-  console.warn(`Fetching content from ${contentUrl}`)
   const networkErrorObjects: {
     name: 'NetworkError'
     message: string
+    instruction?: string
   }[] = []
-  const pleaseCheck = `Please check the URL ${url} and try again`
   const res = await fetch(contentUrl, { cache: 'no-store' }).catch((e) => {
     if (e instanceof Error) {
       networkErrorObjects.push({
         name: 'NetworkError',
-        message: `${e.name}: ${e.message}. ${pleaseCheck}.`,
+        message: `${e.name}: ${e.message}. ${weCannotAccess}`,
+        instruction: pleaseCheck,
       })
     } else {
       networkErrorObjects.push({
         name: 'NetworkError',
-        message: `Unknown error. ${pleaseCheck}.`,
+        message: `Unknown NetworkError. ${weCannotAccess}`,
+        instruction: pleaseCheck,
       })
     }
   })
   if (!res && networkErrorObjects.length === 0)
     networkErrorObjects.push({
       name: 'NetworkError',
       message: `Unknown error. ${pleaseCheck}.`,
+      instruction: pleaseCheck,
     })
   if (!res || networkErrorObjects.length > 0) {
     return (
@@ -141,7 +151,8 @@ export default async function Page({
         errorObjects={[
           {
             name: 'NetworkError',
-            message: `HTTP status is ${res.status}: ${res.statusText}. ${pleaseCheck}.`,
+            message: `HTTP status is ${res.status}: ${res.statusText}.`,
+            instruction: pleaseCheck,
           },
         ]}
       />
@@ -170,7 +181,9 @@ export default async function Page({
         errorObjects={[
           {
             name: 'NetworkError',
-            message: 'We could not detect the format of the file',
+            message: weCannotAccess,
+            instruction:
+              'Please specify the format in the URL query parameter `format`',
           },
         ]}
       />

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/ErrorDisplay.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay/ErrorDisplay.tsx
@@ -7,6 +7,7 @@ import { ParseErrorDisplay } from './ParseErrorDisplay'
 type ErrorObject = {
   name: string
   message: string
+  instruction?: string
 }
 
 type Props = {
@@ -18,15 +19,15 @@ export const ErrorDisplay: FC<Props> = ({ errors }) => {
   if (!error) return <></>
   return (
     <div className={styles.wrapper}>
-      <div className={styles.main}>
-        <div className={styles.iconWrapper}>
-          <InfoIcon color="var(--callout-warning-text)" />
+      {error.name !== 'NetworkError' && (
+        <div className={styles.main}>
+          <div className={styles.iconWrapper}>
+            <InfoIcon color="var(--callout-warning-text)" />
+          </div>
+          <ParseErrorDisplay errors={errors} />
         </div>
-        {error.name === 'NetworkError' && (
-          <NetworkErrorDisplay errors={errors} />
-        )}
-        {error.name !== 'NetworkError' && <ParseErrorDisplay errors={errors} />}
-      </div>
+      )}
+      {error.name === 'NetworkError' && <NetworkErrorDisplay errors={errors} />}
     </div>
   )
 }