fix: error boundary (#7342)

* feat: add ErrorBoundary component and update error handling in Qwik City

* fix: update error boundary handling in Qwik City and Qwik

* fix: improve ErrorBoundary handling and update useErrorBoundary return value

Author: damianpumar

.changeset/afraid-months-mix.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/qwik-city': patch
+'@builder.io/qwik': patch
+---
+
+FIX: Error boundary `ErrorBoundary` and fix `useErrorBoundary`

packages/docs/src/routes/api/qwik-city/api.json

@@ -198,6 +198,20 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/src/runtime/src/types.ts",
       "mdFile": "qwik-city.documentstyle.md"
     },
+    {
+      "name": "ErrorBoundary",
+      "id": "errorboundary",
+      "hierarchy": [
+        {
+          "name": "ErrorBoundary",
+          "id": "errorboundary"
+        }
+      ],
+      "kind": "Variable",
+      "content": "```typescript\nErrorBoundary: import(\"@builder.io/qwik\").Component<ErrorBoundaryProps>\n```",
+      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/src/runtime/src/error-boundary.tsx",
+      "mdFile": "qwik-city.errorboundary.md"
+    },
     {
       "name": "FailOfRest",
       "id": "failofrest",

packages/docs/src/routes/api/qwik-city/index.md

@@ -1132,6 +1132,14 @@ string
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/src/runtime/src/types.ts)
 
+## ErrorBoundary
+
+```typescript
+ErrorBoundary: import("@builder.io/qwik").Component<ErrorBoundaryProps>;
+```
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/src/runtime/src/error-boundary.tsx)
+
 ## FailOfRest
 
 ```typescript

packages/docs/src/routes/api/qwik/api.json

@@ -3104,7 +3104,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nuseErrorBoundary: () => Readonly<ErrorBoundaryStore>\n```\n**Returns:**\n\nReadonly&lt;[ErrorBoundaryStore](#errorboundarystore)<!-- -->&gt;",
+      "content": "```typescript\nuseErrorBoundary: () => ErrorBoundaryStore\n```\n**Returns:**\n\n[ErrorBoundaryStore](#errorboundarystore)",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-error-boundary.ts",
       "mdFile": "qwik.useerrorboundary.md"
     },

packages/docs/src/routes/api/qwik/index.md

@@ -10408,12 +10408,12 @@ void
 ## useErrorBoundary
 
 ```typescript
-useErrorBoundary: () => Readonly<ErrorBoundaryStore>;
+useErrorBoundary: () => ErrorBoundaryStore;
 ```
 
 **Returns:**
 
-Readonly&lt;[ErrorBoundaryStore](#errorboundarystore)&gt;
+[ErrorBoundaryStore](#errorboundarystore)
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-error-boundary.ts)
 

packages/qwik-city/src/runtime/src/api.md

@@ -206,6 +206,11 @@ export interface DocumentStyle {
     readonly style: string;
 }
 
+// Warning: (ae-forgotten-export) The symbol "ErrorBoundaryProps" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export const ErrorBoundary: Component<ErrorBoundaryProps>;
+
 // @public (undocumented)
 export type FailOfRest<REST extends readonly DataValidator[]> = REST extends readonly DataValidator<infer ERROR>[] ? ERROR : never;
 

packages/qwik-city/src/runtime/src/error-boundary.tsx

@@ -1,14 +1,24 @@
-import { component$, useErrorBoundary, Slot, type QRL } from '@builder.io/qwik';
+import { component$, useErrorBoundary, Slot, type QRL, useOnWindow, $ } from '@builder.io/qwik';
 
 /** @public */
 export interface ErrorBoundaryProps {
-  children: any;
-  fallback$: QRL<(ev: any) => any>;
+  fallback$?: QRL<(error: any) => any>;
 }
 
 /** @public */
 export const ErrorBoundary = component$((props: ErrorBoundaryProps) => {
   const store = useErrorBoundary();
 
-  return store.error === undefined ? <Slot /> : <>{props.fallback$(store.error)}</>;
+  useOnWindow(
+    'qerror',
+    $((e: CustomEvent) => {
+      store.error = e.detail.error;
+    })
+  );
+
+  if (store.error && props.fallback$) {
+    return <>{props.fallback$(store.error)}</>;
+  }
+
+  return <Slot />;
 });

packages/qwik-city/src/runtime/src/index.ts

@@ -64,6 +64,7 @@ export { server$, serverQrl } from './server-functions';
 export { valibot$, valibotQrl } from './server-functions';
 export { zod$, zodQrl } from './server-functions';
 export { validator$, validatorQrl } from './server-functions';
+export { ErrorBoundary } from './error-boundary';
 
 export { z } from 'zod';
 

packages/qwik/src/core/api.md

@@ -1654,7 +1654,7 @@ export const useContext: UseContext;
 export const useContextProvider: <STATE>(context: ContextId<STATE>, newValue: STATE) => void;
 
 // @public (undocumented)
-export const useErrorBoundary: () => Readonly<ErrorBoundaryStore>;
+export const useErrorBoundary: () => ErrorBoundaryStore;
 
 // @public (undocumented)
 export const useId: () => string;

packages/qwik/src/core/use/use-error-boundary.ts

@@ -1,16 +1,11 @@
-import { qrl } from '../qrl/qrl';
 import { type ErrorBoundaryStore, ERROR_CONTEXT } from '../render/error-handling';
 import { useContextProvider } from './use-context';
-import { useOn } from './use-on';
 import { useStore } from './use-store.public';
 
 /** @public */
-export const useErrorBoundary = (): Readonly<ErrorBoundaryStore> => {
-  const store: ErrorBoundaryStore = useStore({
-    error: undefined,
-  });
-  useOn('error-boundary', qrl('/runtime', 'error', [store]));
-  useContextProvider(ERROR_CONTEXT, store);
+export const useErrorBoundary = () => {
+  const error = useStore<ErrorBoundaryStore>({ error: undefined });
+  useContextProvider(ERROR_CONTEXT, error);
 
-  return store;
+  return error;
 };