quickest-silver•11mo ago

handling errors and accessing objects

    onError: async (error) => {
        console.log(error);
        if (
            error.status === 401 ||
            error.status === 403 ||
            error.message === "Request failed with status code 401" ||
            error.message === "Request failed with status code 403"
        ) {
            return {
                logout: true,
                redirectTo: "/login",
                error,
            };
        }

        return {};
    },

    onError: async (error) => {
        console.log(error);
        if (
            error.status === 401 ||
            error.status === 403 ||
            error.message === "Request failed with status code 401" ||
            error.message === "Request failed with status code 403"
        ) {
            return {
                logout: true,
                redirectTo: "/login",
                error,
            };
        }

        return {};
    },

i am trying to handle 401 and 403 is there a way i can get status code access because as you can see handling error with error message what i have been doing and the error object

Error: Request failed with status code 401
    at createError (createError.js:16:15)
    at settle (settle.js:17:12)
    at XMLHttpRequest.onloadend (xhr.js:66:7)

Error: Request failed with status code 401
    at createError (createError.js:16:15)
    at settle (settle.js:17:12)
    at XMLHttpRequest.onloadend (xhr.js:66:7)

is not enough no response no status code access

2 Replies

kapa.ai•11mo ago

Hi @tarang._. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can handle the error status codes directly in your onError method. However, the error object you're dealing with seems to be coming from Axios, which wraps the original error response. To access the status code, you need to use error.response.status instead of error.status. Here's how you can modify your onError method:

onError: async (error) => {
    console.log(error);
    const status = error.response?.status;
    if (status === 401 || status === 403) {
        return {
            logout: true,
            redirectTo: "/login",
            error,
        };
    }

    return {};
},

onError: async (error) => {
    console.log(error);
    const status = error.response?.status;
    if (status === 401 || status === 403) {
        return {
            logout: true,
            redirectTo: "/login",
            error,
        };
    }

    return {};
},

This way, you're directly checking the status code of the error response. Also, you can improve your error handling by using a custom data provider that extends from HttpError. This way, you can ensure that the error object always has a status property. Here's an example of how to implement error handling in your data provider:

import { DataProvider, HttpError } from "@refinedev/core";  

export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(  
 `<https://api.example.com/${resource}/${id}`,>  
 );  

 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  

 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

import { DataProvider, HttpError } from "@refinedev/core";  

export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(  
 `<https://api.example.com/${resource}/${id}`,>  
 );  

 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  

 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

This way, you can ensure that the error object always has a status property. For more information, refer to the Data Provider documentation (https://refine.dev/docs/api-reference/core/providers/data-provider/). Remember, the onError method is part of the authProvider and is used to handle API errors in a unified way across your application. For more information, refer to the authProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below