ErrorBoundary reset() method

what is reset() supposed to do?

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>
  );
}

if you run this and getData() errors, it will be caught be ErrorBoundary and the fallback will be rendered if you click the mutateDataAction button until getData() errors again, there will be an uncaught error if you call the reset() method (onClick handler on the div) it just re-runs the fallback function the docs say The reset function will reset the error boundary and re-render the children. if you call reset() then have getData() error again, it will not be caught if you call reset() the children are not reran, the fallback is reran what is the intended usage of reset()? and how can I make it to where multiple subsequent calls to getData() are handled properly if errors occur?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

ErrorBoundary reset() method