chore: Improve error handling in browser

browser/components/Status/Status.tsx

@@ -1,6 +1,5 @@
 import { Center, Flex } from "@mantine/core"
 import type { ReactNode } from "react"
-import { useTranslation } from "react-i18next"
 import * as icons from "#icons.ts"
 import classes from "./Status.module.css"
 
@@ -13,7 +12,6 @@ export interface StatusProps {
 
 export function Status(props: StatusProps) {
   const { status } = props
-  const { t } = useTranslation()
 
   const getIcon = (): ReactNode => {
     if (status === "pending")
@@ -22,16 +20,13 @@ export function Status(props: StatusProps) {
       return <icons.Success size={100} className={classes.iconSuccess} />
     if (status === "error")
       return <icons.Error size={100} className={classes.iconError} />
-    if (status === "fault")
-      return <icons.Fault size={100} className={classes.iconFault} />
     return null
   }
 
   const getTitle = (): string => {
     if (status === "pending") return props.pendingTitle
     if (status === "success") return props.successTitle
     if (status === "error") return props.errorTitle
-    if (status === "fault") return t("Please try again later")
     return ""
   }
 

browser/examples/package-invalid-data-external.json

@@ -6,7 +6,7 @@
   "created": "invalid-date-format",
   "resources": [
     {
-      "name": "test-data",
+      "name": "table",
       "type": "table",
       "path": "table-invalid.csv",
       "schema": "schema.json"

browser/examples/package-invalid-data-internal.json

@@ -6,7 +6,7 @@
   "created": "invalid-date-format",
   "resources": [
     {
-      "name": "test-data",
+      "name": "table",
       "type": "table",
       "data": [
         ["id", "name", "email", "age", "score", "status"],

browser/examples/package.json

@@ -6,7 +6,7 @@
   "created": "invalid-date-format",
   "resources": [
     {
-      "name": "test-data",
+      "name": "table",
       "type": "table",
       "data": [
         ["id", "name", "email", "age", "score", "status"],

browser/routes/package/validate/Dialog.tsx

@@ -8,22 +8,27 @@ import { store } from "./store.ts"
 
 export function ValidatePackageDialog() {
   const { t } = useTranslation()
+  const error = store.useState(state => state.error)
   const report = store.useState(state => state.report)
-  const isFault = store.useState(state => state.isFault)
   const isPending = store.useState(state => state.isPending)
   const isDialogOpen = store.useState(state => state.isDialogOpen)
 
   const handleOpenChange = (isDialogOpen: boolean) => {
-    store.setState({ isDialogOpen, isFault: undefined, report: undefined })
+    store.setState({ isDialogOpen, error: undefined, report: undefined })
   }
 
   const getStatus = () => {
     if (report) return report.valid ? "success" : "error"
     if (isPending) return "pending"
-    if (isFault) return "fault"
+    if (error) return "error"
     return undefined
   }
 
+  const getErrorTitle = () => {
+    if (error) return t(error.message as any)
+    return "Invalid data package"
+  }
+
   return (
     <Dialog
       open={isDialogOpen}
@@ -34,7 +39,7 @@ export function ValidatePackageDialog() {
         status={getStatus()}
         pendingTitle={t("Validating data package...")}
         successTitle={t("Valid data package")}
-        errorTitle={t("Invalid data package")}
+        errorTitle={getErrorTitle()}
       />
 
       <Report errors={report?.errors as any} />

browser/routes/package/validate/queries.ts

@@ -20,7 +20,7 @@ export function useValidatePackage() {
     },
     onError: error => {
       console.log(error)
-      store.setState({ isFault: true })
+      store.setState({ error })
     },
   })
 }

browser/routes/package/validate/store.ts

@@ -4,8 +4,8 @@ import type { api } from "#runtimes/browser/api.ts"
 export interface State {
   isDialogOpen?: boolean
   isPending?: boolean
-  isFault?: boolean
   report?: Awaited<ReturnType<typeof api.package.validate>>
+  error?: Error
 }
 
 export const store = createStore<State>("validatePackage")

browser/routes/root.tsx

@@ -64,12 +64,12 @@ export function Layout(props: { children: React.ReactNode }) {
         <link rel="sitemap" type="text/xml" href="/sitemap.xml" />
         <link rel="icon" type="image/png" href="/favicon.png" />
 
-        {links.map(link => (
+        {links.map((link, index) => (
           <link
+            key={index}
             rel={link.rel}
-            hrefLang={link.hreflang}
             href={link.href}
-            key={link.href}
+            hrefLang={link.hreflang}
           />
         ))}
 

service/endpoint.ts

@@ -0,0 +1,16 @@
+import { os } from "@orpc/server"
+
+export const baseEndpoint = os.errors({
+  ERROR: {},
+})
+
+const errorMiddleware = baseEndpoint.middleware(async ({ next, errors }) => {
+  try {
+    return await next()
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    throw errors.ERROR({ message })
+  }
+})
+
+export const endpoint = baseEndpoint.use(errorMiddleware)

service/endpoints/package/validate.ts

@@ -1,8 +1,8 @@
 import * as dpkit from "@dpkit/lib"
-import { os } from "@orpc/server"
 import * as z from "zod"
+import { endpoint } from "../../endpoint.ts"
 
-export const validatePackage = os
+export const validatePackage = endpoint
   .route({
     method: "POST",
     path: "/package/validate",