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.

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?

SolidJS•2y ago

sabercoy

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

The reset function will reset the error boundary and re-render the children.

The reset function will reset the error boundary and re-render the children.

ErrorBoundary reset() method

Similar Threads

ErrorBoundary reset() method

Similar Threads

Similar Threads

Similar Threads