Alokai•11mo ago

SDK error handling

Hello 👋 We have our custom integration, using REST API. Endpoint example: SDK folder:

export async function generateCustomerToken(props: LoginPayload) {
  try {
    const { data } = await client.post<LoginResponse>('generateCustomerToken', props);
    return data;
  } catch (error) {
    throw error
  }
}

export async function generateCustomerToken(props: LoginPayload) {
  try {
    const { data } = await client.post<LoginResponse>('generateCustomerToken', props);
    return data;
  } catch (error) {
    throw error
  }
}

API Client folder:

export const generateCustomerToken: Endpoints['generateCustomerToken'] = async (
  context,params
) => {
  try {
    const { config } = context;
    const { data } = await context.client.post<LoginResponse>(
      `${config.baseApi}/${config.apiVersion}/customer/login/token`,
      params,
      {
        headers: getHeaders(context),
      }
      );
      
      return data;
    } catch (error) {
      // error is AxiosError
      throw error.response.data;
    }
};

export const generateCustomerToken: Endpoints['generateCustomerToken'] = async (
  context,params
) => {
  try {
    const { config } = context;
    const { data } = await context.client.post<LoginResponse>(
      `${config.baseApi}/${config.apiVersion}/customer/login/token`,
      params,
      {
        headers: getHeaders(context),
      }
      );
      
      return data;
    } catch (error) {
      // error is AxiosError
      throw error.response.data;
    }
};

Using integration with Next.js application. when calling this endpoint fails, getting eror:

SDKError: Request failed with status code 400
    at handleError (index.es.js:64:1)
    at Object.eval [as generateCustomerToken] (index.es.js:259:1)

SDKError: Request failed with status code 400
    at handleError (index.es.js:64:1)
    at Object.eval [as generateCustomerToken] (index.es.js:259:1)

What am I missing, how/where should we properly handle errors with integration ? Thanks!

30 Replies

rohrig•11mo ago

Hi 👋 , if you rethrow the error, isn't this the expected behavior?

valerii.fOP•11mo ago

hm. it seems i'm not following, sorry expected behaviour would be to get Error I send from api-client endpoint - as I am catching it there.. something like that :

{                                                                                        13:38:45
  name: 'Customer not found',
  code: 'COR-001',
  detail: 'Customer with tenant: ClientName and login: [email protected] not found'
}

{                                                                                        13:38:45
  name: 'Customer not found',
  code: 'COR-001',
  detail: 'Customer with tenant: ClientName and login: [email protected] not found'
}

but I am getting

SDKError: Request failed with status code 400
    at handleError (index.es.js:64:1)
    at Object.eval [as generateCustomerToken] (index.es.js:259:1)

SDKError: Request failed with status code 400
    at handleError (index.es.js:64:1)
    at Object.eval [as generateCustomerToken] (index.es.js:259:1)

that is why I am asking.. how should I handle errors normally ? - I handle errors on api-client endpoint method - on sdk endpoint method but when I catch error in Next.js app - I can't see the message - which actuatlly sends our API, but SDKError: Request failed with status code 400 🙂 and I see in Chrome Network tab - my expected error, but not in the .catch method of the SDK response 🙂

rohrig•11mo ago

I see, I'll check with the engineering team and get back to you.

bartoszherba•11mo ago

if (status < 500) {
    const errMsg =
      error?.message ?? `Request faileds with status code ${status}`;
    /**
     * For all 4xx error codes or client error codes we wanted to send the error message
     */
    res.send({ message: errMsg });
  } else {
    /**
     * For all other error codes we wanted to send a generic error message
     */
    res.send(
      "ServerError: Something went wrong. Please, check the logs for more details."
    );
  }
};

if (status < 500) {
    const errMsg =
      error?.message ?? `Request faileds with status code ${status}`;
    /**
     * For all 4xx error codes or client error codes we wanted to send the error message
     */
    res.send({ message: errMsg });
  } else {
    /**
     * For all other error codes we wanted to send a generic error message
     */
    res.send(
      "ServerError: Something went wrong. Please, check the logs for more details."
    );
  }
};

this is the code of the default error handler, it expects an object with a message so simply throw { message: throw error.response.data.detail } instead, or add your error handler. Because this is a default handler, we do not expose any sensitive or additional data as we are not able to predict all possible data structures and its sensitivity it applies to the latest middleware package @valerii.f ^^

valerii.fOP•11mo ago

Hey @bartoszherba , thanks for the update. could you please clarify - what do you mean or add your error handler ? Where exactly can I add this handler?

bartoszherba•11mo ago

In the middleware.config file you can add an errorHandler key with a function

const middlewareConfig = {
  integrations: {
    sapcc: {
      location: "@vsf-enterprise/sapcc-api/server",
      extensions: ...
      configuration: {
        // Other config
        errorHandler: (error) => console.log(error), // here goes your logger
      },
    },
  },
};

const middlewareConfig = {
  integrations: {
    sapcc: {
      location: "@vsf-enterprise/sapcc-api/server",
      extensions: ...
      configuration: {
        // Other config
        errorHandler: (error) => console.log(error), // here goes your logger
      },
    },
  },
};

this way you can customize/override default logger

valerii.fOP•11mo ago

it doesn't seems to be working for me 😦 bellow is my middleware.config.js file server restarted after updating the file. @bartoszherba Could you please point me where am I wrong ?

module.exports = {
  integrations: {
    companyIntegrationName: {
      location: "./api-client/server",
      configuration: {
        /// CONFIGURATION...
      },
      errorHandler: (error) => {
        console.log(error)
      }, // here goes your logger
    },
  },
};

module.exports = {
  integrations: {
    companyIntegrationName: {
      location: "./api-client/server",
      configuration: {
        /// CONFIGURATION...
      },
      errorHandler: (error) => {
        console.log(error)
      }, // here goes your logger
    },
  },
};

Thanks!

lucifer2732•10mo ago

Hi @bartoszherba , @rohrig , I am also getting the same issue when i try to add error handler in my configuration file. Can you help us where we are going wrong. Thanks!

bartoszherba•10mo ago

Could you share middleware version that you are using? A configurable error logger was added in 3.1.0

lucifer2732•10mo ago

Hi @bartoszherba , my version in same as what you mentioned which is 3.1.0 . When I tried to add logger inside of error Handler i am not seeing anything logged in terminal.

bartoszherba•10mo ago

lucifer2732•10mo ago

Hi @bartoszherba , First of all Thanks. It worked but not in all cases. In one scenario where at the time of log in i am using the unified API . In that case ,this error handler is not getting invoked at all and instead of my customized error handler it is using old error handling mechanism .

bartoszherba•10mo ago

Could you provide me with the actual code, or simplified so I can try to reproduce your issue?

lucifer2732•10mo ago

integrations : { commerce : { ...getCommerceConfig(INTEGRATION), extensions:(extensions)=>[...extensions], errorHandler:(error:Unknown,req:Request,res:Response)=>{ console.log(error) } } AnotherIntegrationName : { ...getCommerceConfig(INTEGRATION) extensions:(extensions)=>[...extensions,{custom extensions}], errorHandler:(error:Unknown,req:Request,res:Response)=>{ console.log(error) }
} } Hi @bartoszherba , The customized error handler in middleware.config file is ineffective at capturing GraphQL errors specifically. Instead, it successfully intercepts errors such as network errors and syntax errors. It appears that the predefined default error handler manages GraphQL errors upon reception.

bartoszherba•10mo ago

because graphql error is not an error that is thrown but 200 response with an error object inside, so we do not catch it

lucifer2732•10mo ago

In my local setup, I noticed that when a commerce platform generates a response containing an error message in its body, that response is forwarded to the middleware. However, the middleware fails to relay the received response back to the Next.js application. As a result, the request remains pending in the application browser. Consequently, I believe implementing this customized error handler could resolve the issue.

bartoszherba•10mo ago

does it happen in with customized code or core?

lucifer2732•10mo ago

core

bartoszherba•10mo ago

can you upgrade to the latest version?

lucifer2732•10mo ago

Upon receiving a response containing an error message in its body, the message is transmitted from the commerce platform to the middleware. Within the middleware, the predefined error handler registers the message as a GraphQL error and logs it in the middleware console. Subsequently, the response fails to propagate to the client application browser. Consequently, throughout the process, the request in the network tab remains indefinitely pending, neither displaying a success nor failure status.

bartoszherba•10mo ago

Upgrade to the latest version should fix this problem

lucifer2732•10mo ago

Is this the correct command for verifying the middleware version? npm show @vue-storefront/middleware version . if it is true then my version of middleware is 3.8.0

bartoszherba•10mo ago

yarn list --pattern @vue-storefront/middleware

lucifer2732•10mo ago

lucifer2732•10mo ago

Is this a updated version or do i need to upgrade my version ? If I should upgrade to latest version, can you help me with upgrade command. Hi @bartoszherba, @rohrig , I upgraded my middleware version to 3.8.0 but I am still seeing the same issue in my local.

rohrig•10mo ago

hey 👋 , I've raised the issue internally. I'll let you know what we find. Thanks for your patience. 🙂

lucifer2732•10mo ago

Yeah sure @rohrig , Thanks🙂

bartoszherba•10mo ago

@lucifer2732 can you share the code and reproduction steps? I can't reproduce this issue.

lucifer2732•10mo ago

Hi @bartoszherba , We haven't customized extensively, yet we've encountered this issue persistently since the beginning. Our data retrieval from CommerceTools relies on GraphQL queries. The default method for logging in users is LoginCustomer, sourced from the unified module. And all these are predefined things from storefront side.

lucifer2732•10mo ago

Gaming

Programming

SDK error handling