feat: add error-boundary

[atellmer]

#91

[atellmer]

working example

import { component, useState, ErrorBoundary, useMemo, Suspense } from '@dark-engine/core';
import { createRoot } from '@dark-engine/platform-browser';
import { DataClient, DataClientProvider, InMemoryCache, useApi as $useApi, useQuery } from '@dark-engine/data';

type Api = {
  fetchData: () => Promise<string>;
};

let count = 0;

const api: Api = {
  fetchData: () => {
    return new Promise((resolve, reject) => {
      console.log('fetch:start');
      setTimeout(() => {
        console.log('fetch:end');
        count++;
        if (count > 2) {
          resolve('Hello!');
        } else {
          reject('Network trouble');
        }
      }, 1000);
    });
  },
};

const useApi = () => $useApi<Api>();

const DataLoader = component(() => {
  const api = useApi();
  const { data } = useQuery('fetch-items', api.fetchData);

  return <div>data: {data}</div>;
});

const App = component(() => {
  const client = useMemo(() => new DataClient({ api, cache: new InMemoryCache() }), []);

  return (
    <DataClientProvider client={client}>
      <ErrorBoundary renderFallback={x => <Fallback {...x} />}>
        <Suspense fallback={<div>LOADING...</div>}>
          <DataLoader />
        </Suspense>
      </ErrorBoundary>
    </DataClientProvider>
  );
});

type FallbackProps = {
  error: Error;
  reset: () => void;
};

const Fallback = component<FallbackProps>(({ error, reset }) => {
  return (
    <>
      <div>Error!</div>
      <pre>{error.stack}</pre>
      <button onClick={reset}>refetch</button>
    </>
  );
});

createRoot(document.getElementById('root')).render(<App />);

[atellmer]

It needs some tests