@effect-app/vue 4.0.0-beta.17 → 4.0.0-beta.171

package/src/{experimental/makeUseCommand.ts → makeUseCommand.ts}

@@ -12,15 +12,15 @@ export interface CommanderResolved<RT, RTHooks>
 export const makeUseCommand = Effect.fnUntraced(
   function*<R = never, RTHooks = never>(rtHooks: Layer.Layer<RTHooks, never, R>) {
     const cmndr = yield* Commander
-    const runtime = yield* Effect.services<R>()
+    const runtime = yield* Effect.context<R>()
 
     const comm = cmndr(runtime, rtHooks)
 
-    const command = {
+    const command: CommanderResolved<R, RTHooks> = {
       ...comm,
       ...CommanderStatic
     }
 
-    return command as CommanderResolved<R, RTHooks>
+    return command
   }
 )

package/src/mutate.ts

@@ -1,12 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type InvalidateOptions, type InvalidateQueryFilters, type QueryClient, useQueryClient } from "@tanstack/vue-query"
 import { type Cause, Effect, type Exit, Option } from "effect-app"
-import { type Req } from "effect-app/client"
+import { makeQueryKey, type Req } from "effect-app/client"
 import type { ClientForOptions, RequestHandler, RequestHandlerWithInput } from "effect-app/client/clientFor"
 import { tuple } from "effect-app/Function"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed, type ComputedRef, shallowRef } from "vue"
-import { makeQueryKey } from "./lib.js"
 
 export const getQueryKey = (h: { id: string; options?: ClientForOptions }) => {
   const key = makeQueryKey(h)
@@ -72,7 +71,7 @@ export interface MutationOptionsBase {
    * By default we invalidate one level of the query key, e.g $project/$configuration.get, we invalidate $project.
    * This can be overridden by providing a function that returns an array of filters and options.
    */
-  queryInvalidation?: (defaultKey: string[], name: string) => {
+  queryInvalidation?: (defaultKey: string[], name: string, input?: unknown, output?: Exit.Exit<unknown, unknown>) => {
     filters?: InvalidateQueryFilters | undefined
     options?: InvalidateOptions | undefined
   }[]
@@ -158,40 +157,49 @@ export const invalidateQueries = (
       )
     )
 
-  const invalidateCache = Effect.suspend(() => {
-    const queryKey = getQueryKey(self)
+  const invalidateCache = (input: unknown, output: Exit.Exit<unknown, unknown>) =>
+    Effect.suspend(() => {
+      const queryKey = getQueryKey(self)
 
-    if (options) {
-      const opts = options(queryKey, self.id)
-      if (!opts.length) {
-        return Effect.void
+      if (options) {
+        const opts = options(queryKey, self.id, input, output)
+        if (!opts.length) {
+          return Effect.void
+        }
+        return Effect
+          .andThen(
+            Effect.annotateCurrentSpan({ queryKey, opts }),
+            Effect.forEach(opts, (_) => invalidateQueries(_.filters, _.options), { concurrency: "inherit" })
+          )
+          .pipe(Effect.withSpan("client.query.invalidation", {}, { captureStackTrace: false }))
       }
+
+      if (!queryKey) return Effect.void
+
       return Effect
         .andThen(
-          Effect.annotateCurrentSpan({ queryKey, opts }),
-          Effect.forEach(opts, (_) => invalidateQueries(_.filters, _.options), { concurrency: "inherit" })
+          Effect.annotateCurrentSpan({ queryKey }),
+          invalidateQueries({ queryKey })
         )
-        .pipe(Effect.withSpan("client.query.invalidation", {}, { captureStackTrace: false }))
-    }
-
-    if (!queryKey) return Effect.void
+        .pipe(
+          Effect.tap(
+            // hand over control back to the event loop so that state can be updated..
+            // TODO: should we do this in general on any mutation, regardless of invalidation?
+            Effect.sleep(0)
+          ),
+          Effect.withSpan("client.query.invalidation", {}, { captureStackTrace: false })
+        )
+    })
 
-    return Effect
-      .andThen(
-        Effect.annotateCurrentSpan({ queryKey }),
-        invalidateQueries({ queryKey })
-      )
-      .pipe(
-        Effect.tap(
-          // hand over control back to the event loop so that state can be updated..
-          // TODO: should we do this in general on any mutation, regardless of invalidation?
-          Effect.sleep(0)
-        ),
-        Effect.withSpan("client.query.invalidation", {}, { captureStackTrace: false })
+  const handle = <A, E, R>(self: Effect.Effect<A, E, R>, input?: unknown) =>
+    self.pipe(
+      Effect.onExit((exit) =>
+        invalidateCache(
+          input,
+          exit
+        )
       )
-  })
-
-  const handle = <A, E, R>(self: Effect.Effect<A, E, R>) => Effect.ensuring(self, invalidateCache)
+    )
 
   return handle
 }
@@ -221,7 +229,7 @@ export const makeMutation = () => {
     const queryClient = useQueryClient()
     const handle = invalidateQueries(queryClient, self, options?.queryInvalidation)
     const handler = self.handler
-    const r = Effect.isEffect(handler) ? handle(handler) : (i: I) => handle(handler(i))
+    const r = Effect.isEffect(handler) ? handle(handler) : (i: I) => handle(handler(i), i)
 
     return Object.assign(r, { id: self.id }) as any
   }
@@ -255,7 +263,7 @@ export const useMakeMutation = () => {
   ) => {
     const handle = invalidateQueries(queryClient, self, options?.queryInvalidation)
     const handler = self.handler
-    const r = Effect.isEffect(handler) ? handle(handler) : (i: I) => handle(handler(i))
+    const r = Effect.isEffect(handler) ? handle(handler) : (i: I) => handle(handler(i), i)
 
     return Object.assign(r, { id: self.id }) as any
   }

package/src/query.ts

@@ -3,15 +3,16 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { type DefaultError, type Enabled, type InitialDataFunction, type NonUndefinedGuard, type PlaceholderDataFunction, type QueryKey, type QueryObserverOptions, type QueryObserverResult, type RefetchOptions, useQuery as useTanstackQuery, useQueryClient, type UseQueryDefinedReturnType, type UseQueryReturnType } from "@tanstack/vue-query"
-import { Array, Cause, Effect, Exit, flow, Option, S, type ServiceMap } from "effect-app"
-import { type Req } from "effect-app/client"
+import { Array, Cause, type Context, Effect, Option, S } from "effect-app"
+import { makeQueryKey, type Req } from "effect-app/client"
 import type { RequestHandler, RequestHandlerWithInput } from "effect-app/client/clientFor"
-import { ServiceUnavailableError } from "effect-app/client/errors"
+import { CauseException, ServiceUnavailableError } from "effect-app/client/errors"
 import { type Span } from "effect/Tracer"
 import { isHttpClientError } from "effect/unstable/http/HttpClientError"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed, type ComputedRef, type MaybeRefOrGetter, ref, shallowRef, watch, type WatchSource } from "vue"
-import { makeQueryKey, reportRuntimeError } from "./lib.js"
+import { reportRuntimeError } from "./lib.js"
+import { makeRunPromise } from "./runtime.js"
 
 // we must use interface extends, or we get the dreaded typescript error of isn't portable blabla @tanstack/vue-query/build/modern/types.js
 // but because how they are dealing with some extends clause, we loose all properties except initialData
@@ -74,15 +75,7 @@ export interface CustomDefinedPlaceholderQueryOptions<
     | PlaceholderDataFunction<NonFunctionGuard<TQueryData>, TError, NonFunctionGuard<TQueryData>, TQueryKey>
 }
 
-export class KnownFiberFailure<E> extends Error {
-  readonly error: unknown
-  constructor(public effectCause: Cause.Cause<E>) {
-    super("Query failed with cause: " + Cause.squash(effectCause))
-    this.error = Cause.squash(effectCause)
-  }
-}
-
-export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
+export const makeQuery = <R>(getRuntime: () => Context.Context<R>) => {
   const useQuery_: {
     <I, A, E, Request extends Req, Name extends string>(
       q:
@@ -95,8 +88,8 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData | undefined>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>, never, never>,
-        UseQueryDefinedReturnType<TData, KnownFiberFailure<E>>
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>, never, never>,
+        UseQueryDefinedReturnType<TData, CauseException<E>>
       ]
 
       <TData = A>(
@@ -105,8 +98,8 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>, never, never>,
-        UseQueryDefinedReturnType<TData, KnownFiberFailure<E>>
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>, never, never>,
+        UseQueryDefinedReturnType<TData, CauseException<E>>
       ]
 
       <TData = A>(
@@ -115,8 +108,8 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>, never, never>,
-        UseQueryDefinedReturnType<TData, KnownFiberFailure<E>>
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>, never, never>,
+        UseQueryDefinedReturnType<TData, CauseException<E>>
       ]
     }
   } = <I, A, E, Request extends Req, Name extends string>(
@@ -130,25 +123,21 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
     options?: any
     // TODO
   ) => {
-    // we wrap into KnownFiberFailure because we want to keep the full cause of the failure.
-    const runPromise = flow(Effect.runPromiseExitWith(getRuntime()), (_) =>
-      _.then(
-        Exit.match({
-          onFailure: (cause) => Promise.reject(new KnownFiberFailure(cause)),
-          onSuccess: (value) => Promise.resolve(value)
-        })
-      ))
+    // we wrap into CauseException because we want to keep the full cause of the failure.
+    const runPromise = makeRunPromise(getRuntime())
     const arr = arg
     const req: { value: I } = !arg
-      ? undefined
+      ? undefined as any
       : typeof arr === "function"
       ? ({
         get value() {
           return (arr as any)()
         }
-      } as any)
+      })
       : ref(arg)
     const queryKey = makeQueryKey(q)
+    const projectionHash = (q as { queryKeyProjectionHash?: string }).queryKeyProjectionHash
+    const baseQueryKey = projectionHash === undefined ? queryKey : [...queryKey, projectionHash]
     const handler = q.handler
 
     const defaultOptions = {
@@ -161,21 +150,21 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
       throwOnError: false
     }
 
-    const r = useTanstackQuery<A, KnownFiberFailure<E>, TData>(
+    const r = useTanstackQuery<A, CauseException<E>, TData>(
       Effect.isEffect(handler)
         ? {
           ...defaultOptions,
           ...options,
           retry: (retryCount, error) => {
-            if (error instanceof KnownFiberFailure) {
-              if (!isHttpClientError(error.error) && !S.is(ServiceUnavailableError)(error.error)) {
+            if (error instanceof CauseException) {
+              if (!isHttpClientError(error.cause) && !S.is(ServiceUnavailableError)(error.cause)) {
                 return false
               }
             }
 
             return retryCount < 5
           },
-          queryKey,
+          queryKey: baseQueryKey,
           queryFn: ({ meta, signal }) =>
             runPromise(
               handler
@@ -191,15 +180,15 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
           ...defaultOptions,
           ...options,
           retry: (retryCount, error) => {
-            if (error instanceof KnownFiberFailure) {
-              if (!isHttpClientError(error.error) && !S.is(ServiceUnavailableError)(error.error)) {
+            if (error instanceof CauseException) {
+              if (!isHttpClientError(error.cause) && !S.is(ServiceUnavailableError)(error.cause)) {
                 return false
               }
             }
 
             return retryCount < 5
           },
-          queryKey: [...queryKey, req],
+          queryKey: projectionHash === undefined ? [...queryKey, req] : [...queryKey, req, projectionHash],
           queryFn: ({ meta, signal }) =>
             runPromise(
               handler(req.value)
@@ -240,13 +229,13 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
   }
 
   function swrToQuery<E, A>(r: {
-    error: KnownFiberFailure<E> | undefined
+    error: CauseException<E> | undefined
     data: A | undefined
     isValidating: boolean
   }): AsyncResult.AsyncResult<A, E> {
     if (r.error !== undefined) {
       return AsyncResult.failureWithPrevious(
-        r.error.effectCause,
+        r.error.originalCause,
         {
           previous: r.data === undefined ? Option.none() : Option.some(AsyncResult.success(r.data)),
           waiting: r.isValidating
@@ -273,11 +262,11 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
        * Effect results are passed to the caller, including errors.
        */
       <TData = A>(
-        options: CustomDefinedInitialQueryOptions<A, KnownFiberFailure<E>, TData>
+        options: CustomDefinedInitialQueryOptions<A, CauseException<E>, TData>
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>>,
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>>,
         UseQueryReturnType<any, any>
       ]
       <TData = A>(
@@ -285,17 +274,17 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>, never, never>,
-        UseQueryDefinedReturnType<TData, KnownFiberFailure<E>>
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>, never, never>,
+        UseQueryDefinedReturnType<TData, CauseException<E>>
       ]
       // optional options, optional A
       /**
        * Effect results are passed to the caller, including errors.
        */
-      <TData = A>(options?: CustomUndefinedInitialQueryOptions<A, KnownFiberFailure<E>, TData>): readonly [
+      <TData = A>(options?: CustomUndefinedInitialQueryOptions<A, CauseException<E>, TData>): readonly [
         ComputedRef<AsyncResult.AsyncResult<A, E>>,
         ComputedRef<A | undefined>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>>,
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>>,
         UseQueryReturnType<any, any>
       ]
     }
@@ -312,11 +301,11 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
        */
       <TData = A>(
         arg: Arg | WatchSource<Arg>,
-        options: CustomDefinedInitialQueryOptions<A, KnownFiberFailure<E>, TData>
+        options: CustomDefinedInitialQueryOptions<A, CauseException<E>, TData>
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>>,
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>>,
         UseQueryReturnType<any, any>
       ]
       // required options, with placeholderData
@@ -325,11 +314,11 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
        */
       <TData = A>(
         arg: Arg | WatchSource<Arg>,
-        options: CustomDefinedPlaceholderQueryOptions<A, KnownFiberFailure<E>, TData>
+        options: CustomDefinedPlaceholderQueryOptions<A, CauseException<E>, TData>
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>>,
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>>,
         UseQueryReturnType<any, any>
       ]
       // optional options, optional A
@@ -338,11 +327,11 @@ export const makeQuery = <R>(getRuntime: () => ServiceMap.ServiceMap<R>) => {
        */
       <TData = A>(
         arg: Arg | WatchSource<Arg>,
-        options?: CustomUndefinedInitialQueryOptions<A, KnownFiberFailure<E>, TData>
+        options?: CustomUndefinedInitialQueryOptions<A, CauseException<E>, TData>
       ): readonly [
         ComputedRef<AsyncResult.AsyncResult<TData, E>>,
         ComputedRef<TData | undefined>,
-        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, KnownFiberFailure<E>>>,
+        (options?: RefetchOptions) => Effect.Effect<QueryObserverResult<TData, CauseException<E>>>,
         UseQueryReturnType<any, any>
       ]
     }

package/src/runtime.ts

@@ -1,24 +1,24 @@
-import { ManagedRuntime } from "effect"
+import { Exit, flow, ManagedRuntime } from "effect"
 import { Effect, Layer, Logger } from "effect-app"
+import { CauseException } from "effect-app/client/errors"
+import { type Context } from "effect-app/Context"
 
-export function makeAppRuntime<A, E>(layer: Layer.Layer<A, E>) {
-  return Effect.gen(function*() {
-    const l = layer.pipe(
-      Layer.provide(Logger.layer([Logger.consolePretty()]))
-    ) as Layer.Layer<A, never>
-    const mrt = ManagedRuntime.make(l)
-    yield* mrt.servicesEffect
-    return Object.assign(mrt, {
-      [Symbol.dispose]() {
-        return Effect.runSync(mrt.disposeEffect)
-      },
+export const makeAppRuntime = Effect.fnUntraced(function*<A, E>(layer: Layer.Layer<A, E>) {
+  const l = layer.pipe(
+    Layer.provide(Logger.layer([Logger.consolePretty()]))
+  ) as Layer.Layer<A, never>
+  const mrt = ManagedRuntime.make(l)
+  yield* mrt.contextEffect
+  return Object.assign(mrt, {
+    [Symbol.dispose]() {
+      return Effect.runSync(mrt.disposeEffect)
+    },
 
-      [Symbol.asyncDispose]() {
-        return mrt.dispose()
-      }
-    }) // as we initialise here, there is no more error left.
-  })
-}
+    [Symbol.asyncDispose]() {
+      return mrt.dispose()
+    }
+  }) // as we initialise here, there is no more error left.
+})
 
 export function initializeSync<A, E>(layer: Layer.Layer<A, E, never>) {
   const runtime = Effect.runSync(makeAppRuntime(layer))
@@ -29,3 +29,24 @@ export function initializeAsync<A, E>(layer: Layer.Layer<A, E, never>) {
   return Effect
     .runPromise(makeAppRuntime(layer))
 }
+
+// we wrap into CauseException because we want to keep the full cause of the failure.
+export const makeRunPromise = <T>(services: Context<T>) =>
+  flow(Effect.runPromiseExitWith(services), (_) =>
+    _.then(
+      Exit.match({
+        onFailure: (cause) => Promise.reject(new CauseException(cause, "runPromise")),
+        onSuccess: (value) => Promise.resolve(value)
+      })
+    ))
+
+export const makeRunSync = <T>(services: Context<T>) =>
+  flow(
+    Effect.runSyncExitWith(services),
+    Exit.match({
+      onFailure: (cause) => {
+        throw new CauseException(cause, "runSync")
+      },
+      onSuccess: (value) => value
+    })
+  )

package/src/{experimental/toast.ts → toast.ts}

@@ -1,5 +1,5 @@
-import { Effect, Option, ServiceMap } from "effect-app"
-import { proxify } from "effect-app/ServiceMap"
+import { Context, Effect, Option } from "effect-app"
+import { accessEffectFn } from "effect-app/Context"
 
 export type ToastId = string | number
 export type ToastOpts = { id?: ToastId; timeout?: number }
@@ -13,7 +13,7 @@ export type UseToast = () => {
   dismiss: (this: void, id: ToastId) => void
 }
 
-export class CurrentToastId extends ServiceMap.Opaque<CurrentToastId, { toastId: ToastId }>()("CurrentToastId") {}
+export class CurrentToastId extends Context.Opaque<CurrentToastId, { toastId: ToastId }>()("CurrentToastId") {}
 
 /** fallback to CurrentToastId when available unless id is explicitly set to a value or null */
 export const wrap = (toast: ReturnType<UseToast>) => {
@@ -41,26 +41,12 @@ export const wrap = (toast: ReturnType<UseToast>) => {
   }
 }
 
-export class Toast
-  extends proxify(ServiceMap.Opaque<Toast, ReturnType<typeof wrap>>()("Toast"))<Toast, ReturnType<typeof wrap>>()
-{
-}
-
-// const a = Layer.effect(Toast, Effect.sync(() => Toast.of(null as any)))
-
-// const A = Toast.of({
-//   error: () => Effect.succeed(null as any),
-//   info: () => Effect.succeed(null as any),
-//   success: () => Effect.succeed(null as any),
-//   warning: () => Effect.succeed(null as any),
-//   dismiss: () => Effect.succeed(null as any)
-// })
+type ToastShape = ReturnType<typeof wrap>
 
-// const b = Toast.info("test")
-
-// const a2 = Toast.use((_) => _.error("test"))
-
-// const b2 = Effect.gen(function*() {
-//   const toast = yield* Toast
-//   toast.error("test")
-// })
+export class Toast extends Context.Opaque<Toast, ToastShape>()("Toast") {
+  static readonly error = accessEffectFn(this, "error")
+  static readonly info = accessEffectFn(this, "info")
+  static readonly success = accessEffectFn(this, "success")
+  static readonly warning = accessEffectFn(this, "warning")
+  static readonly dismiss = accessEffectFn(this, "dismiss")
+}

package/src/{experimental/withToast.ts → withToast.ts}

@@ -1,10 +1,11 @@
-import { Cause, Effect, Layer, type Option, ServiceMap } from "effect-app"
+import { Cause, Context, Effect, Layer, type Option } from "effect-app"
 import { wrapEffect } from "effect-app/utils"
 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)
@@ -33,10 +34,10 @@ export interface ToastOptions<A, E, Args extends ReadonlyArray<unknown>, WaiR, S
 }
 
 // @effect-diagnostics-next-line missingEffectServiceDependency:off
-export class WithToast extends ServiceMap.Service<WithToast>()("WithToast", {
+export class WithToast extends Context.Service<WithToast>()("WithToast", {
   make: Effect.gen(function*() {
     const toast = yield* Toast
-    return <A, E, Args extends Array<unknown>, R, WaiR = never, SucR = never, ErrR = never>(
+    return <A, E, Args extends readonly unknown[], R, WaiR = never, SucR = never, ErrR = never>(
       options: ToastOptions<A, E, Args, WaiR, SucR, ErrR>
     ) =>
       Effect.fnUntraced(function*(self: Effect.Effect<A, E, R>, ...args: Args) {
@@ -74,15 +75,23 @@ export class WithToast extends ServiceMap.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 })) : (_) => _
         )