packages/example/src/QueryErrorHandler.tsx

@@ -1,7 +1,7 @@
 import { HttpClientError } from "@effect/platform"
 import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
 import { ErrorHandler } from "@reffuse/extension-query"
-import { Cause, Chunk, Context, Effect, Match, Option, Queue, Stream } from "effect"
+import { Cause, Chunk, Context, Effect, Match, Option, Stream } from "effect"
 import { useState } from "react"
 import { R } from "./reffuse"
 
@@ -14,36 +14,19 @@ export const QueryErrorHandlerLive = ErrorHandler.layer(QueryErrorHandler)
 
 
 export function VQueryErrorHandler() {
-    const queue = R.useMemo(() => Queue.unbounded<Cause.Cause<
+    const [failure, setFailure] = useState(Option.none<Cause.Cause<
         ErrorHandler.Error<Context.Tag.Service<QueryErrorHandler>>
-    >>(), [])
+    >>())
 
     R.useFork(() => QueryErrorHandler.pipe(Effect.flatMap(handler =>
-        Stream.runForEach(handler.errors, v => Queue.offer(queue, v))
-    )), [queue])
-
-    const [failure, setFailure] = useState(R.useMemo(() => Queue.poll(queue), []))
-
-    const next = R.useCallbackSync(() => Queue.poll(queue).pipe(
-        Effect.map(setFailure)
-    ), [queue])
-
-    // R.useFork(() => QueryErrorHandler.pipe(Effect.flatMap(handler =>
-    //     Stream.runForEach(handler.errors, flow(
-    //         Cause.failures,
-    //         Chunk.map(flow(Match.value,
-    //             Match.tag("RequestError", () => Effect.sync(() => {})),
-    //             Match.tag("ResponseError", () => Effect.sync(() => {})),
-    //             Match.exhaustive,
-    //         )),
-    //         Effect.all,
-    //     ))
-    // )), [])
-
+        Stream.runForEach(handler.errors, v => Effect.sync(() =>
+            setFailure(Option.some(v))
+        ))
+    )), [])
 
     return Option.match(failure, {
         onSome: v => (
-            <AlertDialog.Root>
+            <AlertDialog.Root open>
                 <AlertDialog.Content maxWidth="450px">
                     <AlertDialog.Title>Error</AlertDialog.Title>
                     <AlertDialog.Description size="2">
@@ -59,9 +42,11 @@ export function VQueryErrorHandler() {
                     </AlertDialog.Description>
 
                     <Flex gap="3" mt="4" justify="end">
-                        <Button variant="solid" color="red" onClick={next}>
+                        <AlertDialog.Action>
+                            <Button variant="solid" color="red" onClick={() => setFailure(Option.none())}>
                                 Ok
                             </Button>
+                        </AlertDialog.Action>
                     </Flex>
                 </AlertDialog.Content>
             </AlertDialog.Root>

packages/example/src/main.tsx

@@ -6,7 +6,7 @@ import { Layer } from "effect"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { ReffuseRuntime } from "reffuse"
-import { QueryErrorHandler, QueryErrorHandlerLive, VQueryErrorHandler } from "./QueryErrorHandler"
+import { QueryErrorHandler, QueryErrorHandlerLive } from "./QueryErrorHandler"
 import { GlobalContext } from "./reffuse"
 import { routeTree } from "./routeTree.gen"
 
@@ -33,7 +33,6 @@ createRoot(document.getElementById("root")!).render(
     <StrictMode>
         <ReffuseRuntime.Provider>
             <GlobalContext.Provider layer={layer}>
-                <VQueryErrorHandler />
                 <RouterProvider router={router} />
             </GlobalContext.Provider>
         </ReffuseRuntime.Provider>

packages/example/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { VQueryErrorHandler } from "@/QueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
@@ -26,6 +27,8 @@ function Root() {
             </Container>
 
             <Outlet />
+
+            <VQueryErrorHandler />
             <TanStackRouterDevtools />
         </Theme>
     )