SWR NextJS error doesn't get handled after throwing

Peter

I am trying to handle the errors that get thrown in my SWR fetcher. Currently whenever I throw an error my app just stops working and I get an "Unhandled Runtime Error".

What I did was just throw the error inside the fetcher. Here is my code:

async function getFetcher(xxx: xxx) {
    const config = {
        params: {
            xxx: xxx
        },
    };

    return axios
        .get(url, config)
        .then((response) => {
            if (response.data.error) {
                console.log("Error");

                throw new Error(response.data.error);
            } else {
                const data = response.data

                return data;
            }
        })
        .catch((error) => {
            console.log("throwing error...");

            throw error;
        });
}

export function useFetcher(xxx: xxx) {
    const { data, error } = useSWR("/integrations/facebook/getAdSpend", (url: string) => getFetcher(xxx), {
        suspense: true,
    });

    if (error) {
        // NEVER GETS TO THIS POINT
        console.log("Error: " + error);
    }

    return {
        data: data,
        isLoadingData: !error && !data,
        error: error,
    };
}

I expected SWR to pick that error up and return it in the error variable. But it never even gets to the point where I can check the error variable, because my app just stops and displays the "Unhandled Runtime Error".

This is what I'm getting: enter image description here

It's my first time working with SWR and errors in that way so I don't really know where to go from here.

Am I throwing it wrong? Why does SWR not handle it as expected?

EDIT:

This way I can catch and handle the error, but it is not passed as the error variable:

export function useFetcher(xxx: xxx) {
    const { data, error } = useSWR("/integrations/facebook/getAdSpend", (url: string) => getFetcher(xxx).catch((error) => {
        // The error thrown in the then block
        console.log(error);
    }), {
        suspense: true,
    });

    if (error) {
        // NEVER GETS TO THIS POINT
        console.log("Error: " + error);
    }

    return {
        data: data,
        isLoadingData: !error && !data,
        error: error,
    };
}
Yilmaz

I think the issue is inside the then block of getFetcher

     if (response.data.error) {
         console.log("Error");

         throw new Error(response.data.error);

Why are you throwing error inside the then block? error handle is done inside catch block. if catch block catches an error this error will be passed to the useSwr.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

SWR doesn't work when window loses focus in Nextjs

Script after opening jar file doesn't execute code after and not throwing any error

Where to keep files in android such as it'll get called by pyobjects with throwing error that file doesn't exists

nextjs swr syntax clarification

Angular2 event emitter doesn't get handled

How to get the error message in Controller or Route after handled exception in errorHandler?

Throwing custom error doesn't preserve Error formatting in the log

Throwing an error if a file doesn't exist in Ubuntu Installer preseed commands

Why is SignalR throwing an error that doesn't provide any information?

ReactJS/nextJS: Don't get access to cookie/properties after redirecting

Next.js's per page layout component doesn't get value from Vercel's swr global configuration

nextjs: Error in mobile devices while fetching data on client side using swr

useState doesn't updated - nextjs

Angular 2 Base Class Output EventEmitter doesn't get raised or handled

How do I get errors which are handled serverside in a ajax error message after submitting a form?

PL/SQL Continue exection after error handled

NextJS SWR multiple API calls returnin undefined

How to start a call with swr at the click of a button in NextJs?

PHP script doesn't stop after error

$.get() doesn't work first, works after

Fixture doesn't get updated after ngAfterViewInit

Using polyfill for formData and IE still throwing error: Object doesn't support this action

How to stop this rewrite rule throwing a 500 error if the image doesn't exist

MySQL UPDATE statement is throwing "Column count doesn't match value count" error

iterator.get_next() cause terminate called after throwing an instance of 'std::system_error

Nextjs config with postcss nesting doesn't work

NextJS useEffect doesn't wait for API response

Style doesn't apply in NextJS with TailwindCSS

Event onclick doesn't happen NextJS