🚸 Enhanced error rendering in the ErrorDisplay component, adding detailed error summaries

.changeset/wild-crews-battle.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+🚸 Enhanced error rendering in the `ErrorDisplay` component, adding detailed error summaries

frontend/apps/erd-web/app/erd/p/[...slug]/erdViewer.tsx

@@ -10,15 +10,20 @@ import {
 import { useEffect } from 'react'
 import * as v from 'valibot'
 
+type ErrorObject = {
+  name: string
+  message: string
+}
+
 type ERDViewerProps = {
   dbStructure: DBStructure
-  errors: ProcessError[]
+  errorObjects: ErrorObject[]
   defaultSidebarOpen: boolean
 }
 
 export default function ERDViewer({
   dbStructure,
-  errors,
+  errorObjects,
   defaultSidebarOpen,
 }: ERDViewerProps) {
   useEffect(() => {
@@ -35,7 +40,10 @@ export default function ERDViewer({
   return (
     <div style={{ height: '100vh' }}>
       <VersionProvider version={version}>
-        <ERDRenderer defaultSidebarOpen={defaultSidebarOpen} errors={errors} />
+        <ERDRenderer
+          defaultSidebarOpen={defaultSidebarOpen}
+          errorObjects={errorObjects}
+        />
       </VersionProvider>
     </div>
   )

frontend/apps/erd-web/app/erd/p/[...slug]/page.tsx

@@ -116,20 +116,21 @@ export default async function Page({
   }
 
   const { value: dbStructure, errors } = await parse(input, format)
-  if (errors.length > 0) {
-    for (const error of errors) {
-      Sentry.captureException(error)
-    }
+  for (const error of errors) {
+    Sentry.captureException(error)
   }
-
+  const errorObjects = errors.map((error) => ({
+    name: error.name,
+    message: error.message,
+  }))
   const cookieStore = await cookies()
   const defaultSidebarOpen = cookieStore.get('sidebar:state')?.value === 'true'
 
   return (
     <ERDViewer
       dbStructure={dbStructure}
       defaultSidebarOpen={defaultSidebarOpen}
-      errors={errors}
+      errorObjects={errorObjects}
     />
   )
 }

frontend/packages/cli/src/cli/erdCommand/runPreprocess.test.ts

@@ -71,7 +71,7 @@ describe('runPreprocess', () => {
     ])
   })
 
-  it('should return an error if failed parcing schema file', async () => {
+  it('should return an error if failed parsing schema file', async () => {
     const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'test-distDir-'))
     const inputPath = path.join(tmpDir, 'input.sql')
     fs.writeFileSync(inputPath, 'invalid;', 'utf8')
@@ -84,7 +84,7 @@ describe('runPreprocess', () => {
     expect(outputFilePath).toBeNull()
     expect(errors).toEqual([
       new WarningProcessingError(
-        'Error during parcing schema file: syntax error at or near "invalid"',
+        'Error during parsing schema file: syntax error at or near "invalid"',
       ),
     ])
   })

frontend/packages/cli/src/cli/erdCommand/runPreprocess.ts

@@ -44,7 +44,7 @@ export async function runPreprocess(
       errors: errors.map(
         (err) =>
           new WarningProcessingError(
-            `Error during parcing schema file: ${err.message}`,
+            `Error during parsing schema file: ${err.message}`,
           ),
       ),
     }

frontend/packages/db-structure/src/parser/sql/postgresql/converter.ts

@@ -16,7 +16,7 @@ import type {
   Relationship,
   Table,
 } from '../../../schema/index.js'
-import { UnexpectedTokenWarningError } from '../../errors.js'
+import { type ProcessError, UnexpectedTokenWarningError } from '../../errors.js'
 import type { ProcessResult } from '../../types.js'
 import {
   defaultRelationshipName,
@@ -101,7 +101,7 @@ const constraintToRelationship = (
 export const convertToDBStructure = (stmts: RawStmt[]): ProcessResult => {
   const tables: Record<string, Table> = {}
   const relationships: Record<string, Relationship> = {}
-  const errors: Error[] = []
+  const errors: ProcessError[] = []
 
   function isConstraintNode(node: Node): node is { Constraint: Constraint } {
     return (node as { Constraint: Constraint }).Constraint !== undefined

frontend/packages/db-structure/src/parser/sql/postgresql/index.ts

@@ -1,5 +1,5 @@
 import type { DBStructure } from '../../../schema/index.js'
-import { UnexpectedTokenWarningError } from '../../errors.js'
+import { type ProcessError, UnexpectedTokenWarningError } from '../../errors.js'
 import type { Processor } from '../../types.js'
 import { convertToDBStructure } from './converter.js'
 import { mergeDBStructures } from './mergeDBStructures.js'
@@ -9,7 +9,7 @@ import { processSQLInChunks } from './processSQLInChunks.js'
 export const processor: Processor = async (str: string) => {
   const dbStructure: DBStructure = { tables: {}, relationships: {} }
   const CHUNK_SIZE = 1000
-  const errors: Error[] = []
+  const errors: ProcessError[] = []
 
   await processSQLInChunks(str, CHUNK_SIZE, async (chunk) => {
     const { parse_tree, error: parseError } = await parse(chunk)

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx

@@ -1,5 +1,4 @@
 import '@xyflow/react/dist/style.css'
-import type { ProcessError } from '@liam-hq/db-structure'
 import { SidebarProvider, SidebarTrigger, ToastProvider } from '@liam-hq/ui'
 import { ReactFlowProvider } from '@xyflow/react'
 import { type FC, useCallback, useState } from 'react'
@@ -19,14 +18,19 @@ import { RelationshipEdgeParticleMarker } from './RelationshipEdgeParticleMarker
 import { TableDetailDrawer, TableDetailDrawerRoot } from './TableDetailDrawer'
 import { convertDBStructureToNodes } from './convertDBStructureToNodes'
 
+type ErrorObject = {
+  name: string
+  message: string
+}
+
 type Props = {
   defaultSidebarOpen?: boolean | undefined
-  errors?: ProcessError[] | undefined
+  errorObjects?: ErrorObject[] | undefined
 }
 
 export const ERDRenderer: FC<Props> = ({
   defaultSidebarOpen = false,
-  errors = [],
+  errorObjects = [],
 }) => {
   const [open, setOpen] = useState(defaultSidebarOpen)
 
@@ -67,8 +71,10 @@ export const ERDRenderer: FC<Props> = ({
                   <SidebarTrigger />
                 </div>
                 <TableDetailDrawerRoot>
-                  {errors.length > 0 && <ErrorDisplay errors={errors} />}
-                  {errors.length > 0 || (
+                  {errorObjects.length > 0 && (
+                    <ErrorDisplay errors={errorObjects} />
+                  )}
+                  {errorObjects.length > 0 || (
                     <>
                       <ERDContent
                         key={`${nodes.length}-${showMode}`}

frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay.tsx

@@ -1,10 +1,14 @@
-import type { ProcessError } from '@liam-hq/db-structure'
 import { InfoIcon } from '@liam-hq/ui'
 import type { FC } from 'react'
 import styles from './ErrorDisplay.module.css'
 
+type ErrorObject = {
+  name: string
+  message: string
+}
+
 type Props = {
-  errors: ProcessError[]
+  errors: ErrorObject[]
 }
 
 export const ErrorDisplay: FC<Props> = ({ errors }) => {
@@ -17,12 +21,27 @@ export const ErrorDisplay: FC<Props> = ({ errors }) => {
         <div className={styles.inner}>
           <div className={styles.message1}>
             <div className={styles.message1Title}>
-              Oh no! We’ve encountered {errors.length} errors 🛸💫
+              Oh no! We’ve encountered some errors 🛸💫
             </div>
+
+            {errors[0] && (
+              <div className={styles.message1Sentence}>
+                <details>
+                  <summary>View errors</summary>
+                  <ul>
+                    <li key={errors[0].name}>
+                      <code>
+                        {errors[0].name}: {errors[0].message}
+                      </code>
+                    </li>
+                  </ul>
+                </details>
+              </div>
+            )}
             <div className={styles.message1Sentence}>
               <p>
-                It seems {errors.length} SQL statements couldn’t make it through
-                the parser’s orbit.
+                It seems some SQL statements couldn’t make it through the
+                parser’s orbit.
               </p>
               <p>
                 Parsing every SQL dialect is like navigating an asteroid