not able to propagate AWS lambda error to client

Question

I have lambda functions defined - here is shorten an example:

export const createEmptyStock: APIGatewayProxyHandlerV2<
  APIGatewayProxyResult
> = async (event: any) => {
  try {
    
    throw new exceptions.MissingAttribute("test error message");
    
    return utils.createSuccessJsonResponse({
      status: "success",
      data: stock,
    });
  } catch (e) {
    console.error(e);
    console.error(e.message);
    console.error(e.stack);

    return utils.createErrorJsonResponse({
      status: "failed",
      errorMsg: e.message,
      errorStack: e.stack,
    });
  }
};

here is the util file, which I use to create the responses for the lambda functions:

export const createGatewayResponse = ({
  statusCode,
  body,
}: {
  statusCode: number;
  body: string;
}) => {
  let response = {
    statusCode,
    headers: {
      "Access-Control-Allow-Origin": "*", // Required for CORS support to work
      "Access-Control-Allow-Credentials": true, // Required for cookies, authorization headers with HTTPS
    },
    body,
  };
  return response;
};

export const createSuccessResponse = (body: string) =>
  createGatewayResponse({ statusCode: 200, body });

export const createErrorResponse = (body: string) =>
  createGatewayResponse({ statusCode: 500, body });

export const createSuccessJsonResponse = (body: object) =>
  createGatewayResponse({
    statusCode: 200,
    body: JSON.stringify(body),
  });

export const createErrorJsonResponse = (body: object) =>
  createGatewayResponse({
  statusCode: 500,
  body: JSON.stringify(body),
});

after deploying and running this, I do see the errors in the cloudWatch messages, but on the front end side which I use axios to call - I don't see the error details. Here is the sample call on the client side using axios.

client call:

export async function createEmptyStock({
  productId,
  accountId,
  userId,
}: {
  productId: string;
}) {
  try {
    const queryUrl = `${aws_url}/new?arg1=${productId}`;
    const { data } = await axios.post(queryUrl);
    return data;
  } catch (e) {
    console.error(e.toJSON());
  }
}

the client console output:

{
code: undefined
columnNumber: undefined
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
description: undefined
fileName: undefined
lineNumber: undefined
message: "Request failed with status code 500"
name: "Error"
number: undefined
stack: "Error: Request failed with status code 500\n    at createError (http://localhost:3000/static/js/bundle.js:214546:15)\n    at settle (http://localhost:3000/static/js/bundle.js:214813:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:213873:7)"
status: 500
}

I used CDK to create the lambda function:

const lambdaFunc = new lambdaNodejs.NodejsFunction(
  this,
  lambdaConstructName,
  {
    entry: lambdaPath,
    handler: handlerName ? handlerName : "handler",
    runtime: lambda.Runtime.NODEJS_14_X,
    layers: lambdaLayers,
  environment: {
    TABLE_NAME: this.stocksTable.tableName,
    PARTITION_KEY: this.stocksTablePartitionKey,
    SORT_KEY: this.stocksTableSortKey,
  },
  bundling: {
    minify: false,
  },
  }
);

gatewayResource.addMethod(
  resourceMethod,
  new apigateway.LambdaIntegration(lambdaFunc)
);