Support ErrorBoundary in SolidJS 1.5 (#297)

* Support ErrorBoundary in SolidJS 1.5

* Size limit

.changeset/kind-tips-grab.md

@@ -0,0 +1,5 @@
+---
+'@farfetched/solid': patch
+---
+
+Support ErrorBoundary in SolidJS 1.5

package.json

@@ -80,7 +80,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "^6.4.2",
     "runtypes": "^6.5.1",
-    "solid-js": "1.4.8",
+    "solid-js": "1.5",
     "typed-contracts": "^3.0.0"
   }
 }

packages/solid/project.json

@@ -65,7 +65,7 @@
     "size": {
       "executor": "./tools/executors/size-limit:size-limit",
       "options": {
-        "limit": "0.7 kB",
+        "limit": "1 kB",
         "outputPath": "dist/packages/solid"
       },
       "dependsOn": [

packages/solid/src/__tests__/create_query_resource.test.tsx

@@ -3,11 +3,16 @@
  */
 
 import { allSettled, fork, sample, scopeBind } from 'effector';
-import { describe, expect, test, afterEach } from 'vitest';
+import { describe, expect, test, afterEach, vi } from 'vitest';
 import { ErrorBoundary, For, Suspense } from 'solid-js/web';
 import { render, cleanup, screen } from 'solid-testing-library';
 import { Provider } from 'effector-solid';
-import { createMutation, createQuery, update } from '@farfetched/core';
+import {
+  createMutation,
+  createQuery,
+  httpError,
+  update,
+} from '@farfetched/core';
 import { setTimeout } from 'timers/promises';
 
 import { createDefer } from '../defer';
@@ -333,4 +338,59 @@ describe('createQueryResource', () => {
     const mutationText = await screen.findByText('Mutation success');
     expect(mutationText).toBeInTheDocument();
   });
+
+  test('passes original FarfetchedError to ErrorBoundary', async () => {
+    const query = createQuery({
+      handler: vi.fn().mockImplementation(() => {
+        throw httpError({
+          status: 500,
+          statusText: 'Sorry',
+          response: 'Cannot',
+        });
+      }),
+    });
+
+    const scope = fork();
+
+    function App() {
+      const [data, { start }] = createQueryResource(query);
+
+      return (
+        <>
+          <button onClick={start}>Start</button>
+          <ErrorBoundary
+            fallback={(error) => (
+              <section>
+                <div>Status: {error.status}</div>
+                <div>Status Text: {error.statusText}</div>
+                <div>Response: {error.response}</div>
+              </section>
+            )}
+          >
+            <p>{JSON.stringify(data(), null, 2)}</p>
+          </ErrorBoundary>
+        </>
+      );
+    }
+
+    render(() => (
+      <Provider value={scope}>
+        <App />
+      </Provider>
+    ));
+
+    const startButton = await screen.findByText('Start');
+    startButton.click();
+
+    await allSettled(scope);
+
+    const statusText = await screen.findByText('Status: 500');
+    expect(statusText).toBeInTheDocument();
+
+    const statusTextText = await screen.findByText('Status Text: Sorry');
+    expect(statusTextText).toBeInTheDocument();
+
+    const responseText = await screen.findByText('Response: Cannot');
+    expect(responseText).toBeInTheDocument();
+  });
 });

packages/solid/src/create_query_resource.ts

@@ -9,8 +9,8 @@ import { type Query } from '@farfetched/core';
 
 import { createDefer } from './defer';
 
-function createQueryResource<Params, Data, Error>(
-  query: Query<Params, Data, Error>
+function createQueryResource<Params, Data, QueryError>(
+  query: Query<Params, Data, QueryError>
 ): [
   Resource<Data | undefined>,
   {
@@ -23,7 +23,7 @@ function createQueryResource<Params, Data, Error>(
 
   const { data, error, pending, start } = useUnit(query);
 
-  let dataDefer = createDefer<Data, Error>();
+  let dataDefer = createDefer<Data, QueryError & Error>();
 
   createComputed(() => {
     // Start Resource after Query state changes
@@ -41,7 +41,22 @@ function createQueryResource<Params, Data, Error>(
     // Reject Resource after Query returns error
     const currentError = error();
     if (currentError !== null) {
-      dataDefer.reject(currentError);
+      /*
+      SolidJS introduced a breaking change in 1.5 — https://github.com/solidjs/solid/pull/1176
+      Since we can't pass plain objects (which are used to make errors serializable) to `reject`
+      So, we have to convert them to `Error` instances for SolidJS
+      */
+      if (currentError instanceof Error || typeof currentError === 'string') {
+        dataDefer.reject(currentError as any);
+      } else {
+        const errorForSolid = new Error((currentError as any)?.message);
+
+        if (typeof currentError === 'object') {
+          Object.assign(errorForSolid, currentError);
+        }
+
+        dataDefer.reject(errorForSolid as any);
+      }
     }
   });