Transaction flow: improved errors (#768)

- Log the full error in the console
- Invite users to open the console for more details
- Use error.name as the error box title, if available

frontend/app/src/screens/TransactionsScreen/TransactionsScreen.tsx

@@ -45,7 +45,8 @@ export function TransactionsScreen() {
     config: boxTransitionConfig,
   });
 
-  const errorBoxTransition = useTransition(Boolean(step?.error), {
+  const errorBoxTransition = useTransition(step?.error, {
+    keys: (error) => String(Boolean(error)),
     from: { height: 0, opacity: 0, transform: "scale(0.97)" },
     enter: [
       { height: 48, opacity: 1, transform: "scale(1)" },
@@ -92,7 +93,7 @@ export function TransactionsScreen() {
       status: "error",
     }, (s) => ({
       status: s.status,
-      error: s.error ?? "Unknown error",
+      error: s.error ?? { name: null, message: "Unknown error" },
     }))
     .with(
       { status: "idle" },
@@ -228,16 +229,19 @@ export function TransactionsScreen() {
           </div>
         </div>
 
-        {errorBoxTransition((style, show) => (
-          show && (
+        {errorBoxTransition((style, error) => (
+          error && (
             <a.div
               style={{
                 ...style,
                 opacity: style.opacity.to([0, 0.5, 1], [0, 0, 1]),
               }}
             >
-              <ErrorBox title="Error">
-                {step.error}
+              <ErrorBox title={error.name ? `Error: ${error.name}` : "Error"}>
+                {error.message}
+                <br />
+                <br />
+                Please open your browser console for more information.
               </ErrorBox>
             </a.div>
           )
@@ -354,7 +358,7 @@ function FlowSteps({
 }: {
   currentStep: number;
   steps: Array<{
-    error: string | null;
+    error: { name: string | null; message: string } | null;
     id: string;
     label: string;
     status: FlowStepStatus;

frontend/app/src/services/TransactionFlow.tsx

@@ -109,7 +109,7 @@ export type FlowStep = {
   // artifact is the result of a step,
   // e.g. a transaction hash or a signed message
   artifact: string | null;
-  error: string | null;
+  error: { name: string | null; message: string } | null;
   id: string;
   status: FlowStepStatus;
 };
@@ -131,7 +131,11 @@ export type FlowStepDeclaration<FlowRequest extends BaseFlowRequest = BaseFlowRe
     | { status: "idle" }
     | { status: "awaiting-commit"; onRetry: () => void }
     | { status: "awaiting-verify" | "confirmed"; artifact: string }
-    | { status: "error"; error: string; artifact?: string }
+    | {
+      status: "error";
+      error: { name: string | null; message: string };
+      artifact?: string;
+    }
   >;
 };
 
@@ -226,18 +230,26 @@ const FlowStateSchema = v.object({
   }),
   steps: v.union([
     v.null(),
-    v.array(v.object({
-      id: v.string(),
-      status: v.union([
-        v.literal("idle"),
-        v.literal("awaiting-commit"),
-        v.literal("awaiting-verify"),
-        v.literal("confirmed"),
-        v.literal("error"),
-      ]),
-      artifact: v.union([v.string(), v.null()]),
-      error: v.union([v.string(), v.null()]),
-    })),
+    v.array(
+      v.object({
+        id: v.string(),
+        status: v.union([
+          v.literal("idle"),
+          v.literal("awaiting-commit"),
+          v.literal("awaiting-verify"),
+          v.literal("confirmed"),
+          v.literal("error"),
+        ]),
+        artifact: v.union([v.string(), v.null()]),
+        error: v.union([
+          v.null(),
+          v.object({
+            name: v.union([v.string(), v.null()]),
+            message: v.string(),
+          }),
+        ]),
+      }),
+    ),
   ]),
 });
 
@@ -457,8 +469,14 @@ function useFlowManager(account: Address | null, isSafe: boolean = false) {
       updateFlowStep(stepIndex, {
         status: "error",
         artifact: currentArtifact,
-        error: error instanceof Error ? error.message : String(error),
+        error: error instanceof Error
+          ? {
+            name: error.name.toLowerCase().trim() === "error" ? null : error.name,
+            message: error.message,
+          }
+          : { name: null, message: String(error) },
       });
+      console.error(`Error at step ${stepIndex}:`, error);
     } finally {
       runningStepRef.current = null;
     }