Rather than throwing errors, it is recommended to return them from actions. This helps with the typing of submissions that would be used with useSubmission. This is important when handling progressive enhancement where no JavaScript is present in the client, so that errors can be used declaratively to render the updated page on the server.

Rather than throwing errors, it is recommended to return them from actions. This helps with the typing of submissions that would be used with useSubmission. This is important when handling progressive enhancement where no JavaScript is present in the client, so that errors can be used declaratively to render the updated page on the server.

import { action, cache, createAsync, reload, useAction } from "@solidjs/router";
import { ErrorBoundary, Suspense } from "solid-js";

const getData = cache(async () => {
  'use server'

  await new Promise(res => setTimeout(res, 1000))

  if (Math.random() > .5) throw 'OOPS'

  return 'data'
}, 'data')

const mutateData = action(async () => {
  'use server'

  reload({ revalidate: getData.key })
})

export default function Home() {
  const data = createAsync(() => getData())
  const mutateDataAction = useAction(mutateData)

  return (
    <main>
      <ErrorBoundary fallback={(error, reset) => {
        console.log('inside fallback')
        return <div onClick={reset}>Error...</div>
      }}>
        <Suspense fallback={<div>Loading...</div>}>
          <div>{data()}</div>
        </Suspense>
      </ErrorBoundary>
      <button onClick={mutateDataAction}>mutate data action</button>
    </main>
  );
}

import { action, cache, createAsync, reload, useAction } from "@solidjs/router";
import { ErrorBoundary, Suspense } from "solid-js";

const getData = cache(async () => {
  'use server'

  await new Promise(res => setTimeout(res, 1000))

  if (Math.random() > .5) throw 'OOPS'

  return 'data'
}, 'data')

const mutateData = action(async () => {
  'use server'

  reload({ revalidate: getData.key })
})

export default function Home() {
  const data = createAsync(() => getData())
  const mutateDataAction = useAction(mutateData)

  return (
    <main>
      <ErrorBoundary fallback={(error, reset) => {
        console.log('inside fallback')
        return <div onClick={reset}>Error...</div>
      }}>
        <Suspense fallback={<div>Loading...</div>}>
          <div>{data()}</div>
        </Suspense>
      </ErrorBoundary>
      <button onClick={mutateDataAction}>mutate data action</button>
    </main>
  );
}