correct-apricot

How do I show a toast from loader error?

Previously I used useEffect to make fetch data and if there was any error used catch to show a toast

 useEffect(() => {
const fetch = async () => {
    try {
     const blogs = await getDataFromApi();
       setBlogs(blogs);
     } catch (error) {
       showToast(error); 👈 shows toast
    }
 };
}, []);

 useEffect(() => {
const fetch = async () => {
    try {
     const blogs = await getDataFromApi();
       setBlogs(blogs);
     } catch (error) {
       showToast(error); 👈 shows toast
    }
 };
}, []);

But now I am able to console log the errro but I don't see any toast

  loader: async () => await getDataFromApi();

  onCatch(error, errorInfo) {
    console.log(`found error ${error}`);
    console.log(`found errorInfo ${errorInfo}`);

    showToast(error);
  },

  onError(error) {
    console.log(`found error ${error}`);
    showToast(error);
  },

  loader: async () => await getDataFromApi();

  onCatch(error, errorInfo) {
    console.log(`found error ${error}`);
    console.log(`found errorInfo ${errorInfo}`);

    showToast(error);
  },

  onError(error) {
    console.log(`found error ${error}`);
    showToast(error);
  },

13 Replies

rival-black•8mo ago

a full example would be helpful. can you please fork one of the stackblitz examples?

correct-apricotOP•8mo ago

Sorry it has nothing to do with tanstack router. It was my fault. It's working now. Since Tanstack requires new file base route setup. I forgot to copy the Toast. A quick question. Do I also need to wrap getData in try catch? If I don't wrap in try catch then I get error on browser console. Then what's the use of onCatch or onError on the doc it says for onError

The routeOptions.onError option is a function that is called when an error occurs during the route loading.

and

The routeOptions.onCatch option is a function that is called whenever an error was caught by the router's CatchBoundary.

index.tsx

export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: async () => {
    await getData();

    // try {
    //   await getData();
    // } catch (error) {
    //   showToast(error.message);
    // }
  },
  errorComponent: () => {
    return <h1>Error</h1>;
  },
  onCatch: (error) => {
    showToast(error.message);
  },
});

export const Route = createFileRoute('/')({
  component: RouteComponent,
  loader: async () => {
    await getData();

    // try {
    //   await getData();
    // } catch (error) {
    //   showToast(error.message);
    // }
  },
  errorComponent: () => {
    return <h1>Error</h1>;
  },
  onCatch: (error) => {
    showToast(error.message);
  },
});

Here is code sand box link: https://codesandbox.io/p/github/watery-desert/tanstack-toast-issue/main?import=true and error firs the uncaught error obviously

@tanstack_react-rout….js?v=ab63df17:2549 Uncaught Error: Throw dummy error
    at getData (api.ts:4:11)
    at async Object.loader (index.tsx:17:9)
    at async Promise.all (:5173/index 1)

@tanstack_react-rout….js?v=ab63df17:2549 Uncaught Error: Throw dummy error
    at getData (api.ts:4:11)
    at async Object.loader (index.tsx:17:9)
    at async Promise.all (:5173/index 1)

Then this one

hook.js:608 The above error occurred in the <MatchInnerImpl> component:

    at MatchInnerImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2506:3)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at CatchBoundaryImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:1534:5)
    at CatchBoundary (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:1514:32)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at MatchImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2449:3)
    at Suspense
    at OutletImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2576:18)
    at RootComponent
    at MatchInnerImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2506:3)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)

hook.js:608 The above error occurred in the <MatchInnerImpl> component:

    at MatchInnerImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2506:3)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at CatchBoundaryImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:1534:5)
    at CatchBoundary (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:1514:32)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at MatchImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2449:3)
    at Suspense
    at OutletImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2576:18)
    at RootComponent
    at MatchInnerImpl (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2506:3)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)
    at SafeFragment (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-router.js?v=ab63df17:2426:87)

rival-black•8mo ago

these errors are caught but still logged by react unfortunately... so the onCatch method will still be called

correct-apricotOP•8mo ago

so I should remove onError and onCatch and use try catch?

rival-black•8mo ago

it depends really

correct-apricotOP•8mo ago

but that resolving the type to undefined.

correct-apricotOP•8mo ago

and here without using try catch. I also updated the code.

correct-apricotOP•8mo ago

is there any fix? Or Is there any opened issue? Or it won't fix? I don't like the error. Everything is working if it somehow doesn't log the error.

rival-black•8mo ago

can you please create a github issue for this to track it properly?

correct-apricotOP•8mo ago

I created an issue https://github.com/TanStack/router/issues/3252 If I need to add more information let me know, I will do that.

absent-sapphire•5mo ago

I've run into the same probelem, any ideas?

absent-sapphire•5mo ago

https://stackblitz.com/edit/tanstack-router-rsx7w91m?file=src%2Froutes%2Fposts.route.tsx here is my reproduction of the issue, ive included a console log of where I want to show the toast and have the rest of the ui show wihout any data of course

Matthew Bevis

StackBlitz

Router Basic React Query File Based Example (forked) - StackBlitz

Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz

absent-sapphire•5mo ago

i've also updated the issue with the same info

Gaming

Programming

How do I show a toast from loader error?

Did you find this page helpful?