Include trace and span IDs in error toasts for faster debugging (#624)

* feat: add trace and span IDs to toast messages

* test: enhance toast message assertions to include trace and span IDs

* feat: add showSpanInfo option to ToastOptions and update span info handling

* feat: set default value of showSpanInfo to false in ToastOptions and update span info handling

* fix: correct showSpanInfo handling in error toast options

* fix: silence no-unnecessary-type-assertion on load-bearing Literals[0] cast

the cast is required because Object.assign widens the Default field
type without it, breaking the expectTypeOf(l.Default).toEqualTypeOf<"a">()
test assertion.

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jfet97

.changeset/funny-webs-clap.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue": patch
+---
+
+add trace id and span id to toasts

packages/effect-app/src/Schema/ext.ts

@@ -100,6 +100,7 @@ export const Literals = <const Literals extends NonEmptyReadonlyArray<AST.Litera
             withDecodingDefaultType: s.pipe(S.withDecodingDefaultType(Effect.succeed(a)))
           }) // todo: copy annotations from original?
         },
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- load-bearing: Object.assign widens the field type without it, breaking `expectTypeOf(l.Default).toEqualTypeOf<"a">()` in tests
         Default: literals[0] as Literals[0],
         withDefault: s.pipe(S.withConstructorDefault(Effect.succeed(literals[0]))),
         withDecodingDefaultType: s.pipe(S.withDecodingDefaultType(Effect.succeed(literals[0])))

packages/vue/src/commander.ts

@@ -1806,6 +1806,7 @@ export const CommanderStatic = {
         | string
         | ((id: string, arg: NoInfer<Args>[0], ctx: NoInfer<Args>[1]) => true | string | undefined)
       errorRenderer?: (e: E, action: string, arg: NoInfer<Args>[0], ctx: NoInfer<Args>[1]) => string | undefined
+      showSpanInfo?: false
       onWaiting?:
         | null
         | undefined
@@ -1870,7 +1871,8 @@ export const CommanderStatic = {
               hasCustomFailure ? intl.formatMessage({ id: customFailure }, cc.state) : cc.action,
               options?.errorRenderer as ErrorRenderer<E, Args> | undefined
             ),
-            stableToastId
+            stableToastId,
+            ...options?.showSpanInfo === false ? { showSpanInfo: options.showSpanInfo } : {}
           })(_, ...args)
       )
     }),

packages/vue/src/withToast.ts

@@ -5,6 +5,7 @@ import { CurrentToastId, Toast } from "./toast.js"
 export interface ToastOptions<A, E, Args extends ReadonlyArray<unknown>, WaiR, SucR, ErrR> {
   stableToastId?: undefined | string | ((...args: Args) => string | undefined)
   timeout?: number
+  showSpanInfo?: false
   onWaiting:
     | string
     | ((...args: Args) => string | null)
@@ -74,15 +75,23 @@ export class WithToast extends Context.Service<WithToast>()("WithToast", {
               return
             }
 
+            const spanInfo = options.showSpanInfo !== false
+              ? yield* Effect.currentSpan.pipe(
+                Effect.map((span) => `\nTrace: ${span.traceId}\nSpan: ${span.spanId}`),
+                Effect.orElseSucceed(() => "")
+              )
+              : ""
+
             const t = yield* wrapEffect(options.onFailure)(Cause.findErrorOption(cause), ...args)
             const opts = { timeout: baseTimeout * 2 }
 
             if (typeof t === "object") {
+              const message = t.message + spanInfo
               return t.level === "warn"
-                ? yield* toast.warning(t.message, toastId !== undefined ? { ...opts, id: toastId } : opts)
-                : yield* toast.error(t.message, toastId !== undefined ? { ...opts, id: toastId } : opts)
+                ? yield* toast.warning(message, toastId !== undefined ? { ...opts, id: toastId } : opts)
+                : yield* toast.error(message, toastId !== undefined ? { ...opts, id: toastId } : opts)
             }
-            yield* toast.error(t, toastId !== undefined ? { ...opts, id: toastId } : opts)
+            yield* toast.error(t + spanInfo, toastId !== undefined ? { ...opts, id: toastId } : opts)
           }, Effect.uninterruptible)),
           toastId !== undefined ? Effect.provideService(CurrentToastId, CurrentToastId.of({ toastId })) : (_) => _
         )

packages/vue/test/Mutation.test.ts

@@ -400,6 +400,27 @@ it.live("fail", () =>
       expect(command.waiting).toBe(false)
       expect(Exit.isFailure(AsyncResult.toExit(command.result))).toBe(true)
       expect(toasts.length).toBe(1) // toast should show error
+      expect(toasts[0].message).toContain("Test Action Failed:\nBoom!")
+      expect(toasts[0].message).toMatch(/Trace: [a-f0-9]{32}/)
+      expect(toasts[0].message).toMatch(/Span: [a-f0-9]{16}/)
+    }))
+
+it.live("fail with showSpanInfo disabled", () =>
+  Effect
+    .gen(function*() {
+      const toasts: any[] = []
+      const Command = useExperimental({ toasts, messages: DefaultIntl.en })
+
+      const command = Command.fn("Test Action")(
+        function*() {
+          return yield* Effect.fail({ message: "Boom!" })
+        },
+        Command.withDefaultToast({ showSpanInfo: false })
+      )
+
+      yield* Fiber.join(command.handle())
+
+      expect(toasts.length).toBe(1)
       expect(toasts[0].message).toBe("Test Action Failed:\nBoom!")
     }))
 
@@ -456,7 +477,7 @@ it.live("defect", () =>
       expect(command.waiting).toBe(false)
       expect(Exit.isFailure(AsyncResult.toExit(command.result))).toBe(true)
       expect(toasts.length).toBe(1) // toast should show error
-      expect(toasts[0].message).toBe("Test Action unexpected error, please try again shortly.")
+      expect(toasts[0].message).toContain("Test Action unexpected error, please try again shortly.")
     }))
 
 it.live("works with alt", () =>
@@ -714,7 +735,7 @@ it.live("fail with alt", () =>
       expect(command.waiting).toBe(false)
       expect(Exit.isFailure(AsyncResult.toExit(command.result))).toBe(true)
       expect(toasts.length).toBe(1) // toast should show error
-      expect(toasts[0].message).toBe("Test Action Failed:\nBoom!")
+      expect(toasts[0].message).toContain("Test Action Failed:\nBoom!")
     }))
 
 it.live("fail and recover with alt", () =>
@@ -774,7 +795,7 @@ it.live("defect with alt", () =>
       expect(command.waiting).toBe(false)
       expect(Exit.isFailure(AsyncResult.toExit(command.result))).toBe(true)
       expect(toasts.length).toBe(1) // toast should show error
-      expect(toasts[0].message).toBe("Test Action unexpected error, please try again shortly.")
+      expect(toasts[0].message).toContain("Test Action unexpected error, please try again shortly.")
     }))
 
 describe("state-in-toast", () => {