SolidJS•2y ago

Catching Errors from async requests started in onMount

There must be a hole in my Solid knowledge. I want to run a fetch request on component mount. This is not fetching any data so I don't want to use createResource This async request is taking state and saving it to the database. However, how do I catch any errors. When the async function throws... the error is always uncaught. Example code:

import { getTestEndpoint } from "../../utils/networkFunctions";

export const TestError = () => {
  onMount(() => {
    const runAsync = async () => {
      await getTestEndpoint();
    };

    runAsync();
  });

  return <h1>Test Error</h1>;
};

import { getTestEndpoint } from "../../utils/networkFunctions";

export const TestError = () => {
  onMount(() => {
    const runAsync = async () => {
      await getTestEndpoint();
    };

    runAsync();
  });

  return <h1>Test Error</h1>;
};

The test endpoint purposely returns a 500 status code which then throws an error. But I can't catch this error with an ErrorBoundary... can't catch it with try/catch What am I missing?

3 Replies

Alex Lohr•2y ago

With promises and timeouts, you move out of the current thread, which is the binding link to the reactive owner that solid internally uses to handle subscriptions to state signals. You can use getOwner before the promise and runWithOwner to pull the execution into the reactive owner's scope.

Alex Lohr•2y ago

https://www.solidjs.com/docs/latest/api#getowner

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

danboyle8637OP•2y ago

Okay. I did just find runWithOwner. Thank you for this!

Gaming

Programming

Catching Errors from async requests started in onMount