feat(in-4412): logger in magento api (#1559)

* chore: remove consola

* refactor: replace consola with logger

* chore: changeset

* Update packages/api-client/src/api/cmsPage/index.ts

Co-authored-by: Bartosz Herba <[email protected]>

* Update packages/api-client/src/api/productDetails/index.ts

Co-authored-by: Bartosz Herba <[email protected]>

* Update packages/api-client/src/api/products/index.ts

Co-authored-by: Bartosz Herba <[email protected]>

* refactor: requestPasswordResetEmail debug log

* refactor: reset password debug log

* refactor: graphql error logs

* refactor: network error log

* chore: remove redundant debug log

* refactor: invalid token log

* refactor: link handlers debug logs

---------

Co-authored-by: Bartosz Herba <[email protected]>

Author: lsliwaradioluz

.changeset/grumpy-eels-care.md

@@ -0,0 +1,5 @@
+---
+"@vue-storefront/magento-api": minor
+---
+
+[CHANGED] Replaced `consola` with Alokai Logger. To learn more about logger, visit [Alokai Logger](https://docs.alokai.com/middleware/guides/logging/).

packages/api-client/package.json

@@ -26,7 +26,6 @@
     "@vue-storefront/magento-types": "2.0.0",
     "@vue-storefront/middleware": "^5.1.0",
     "agentkeepalive": "^4.2.1",
-    "consola": "^3.1.0",
     "dotenv": "^16.0.1",
     "graphql": "^16.3.0",
     "graphql-tag": "^2.12.6",

packages/api-client/src/api/cmsPage/index.ts

@@ -1,8 +1,8 @@
 import { ApolloQueryResult } from "@apollo/client/core";
-import consola from "consola";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { CmsPageQuery, CmsPageQueryVariables, CustomQuery } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
+import { getLogger } from "@vue-storefront/middleware";
 import cmsPageQuery from "./cmsPage";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
@@ -71,6 +71,8 @@ export async function cmsPage(
   customQuery: CustomQuery = { cmsPage: "cmsPage" },
   customHeaders: CustomHeaders = {}
 ): Promise<ApolloQueryResult<CmsPageQuery>> {
+  const logger = getLogger(context);
+
   try {
     const { cmsPage: cmsPageGQL } = context.extendQuery(customQuery, {
       cmsPage: {
@@ -91,15 +93,15 @@ export async function cmsPage(
   } catch (error) {
     // For error in data we don't throw 500, because it's not server error
     if (error.graphQLErrors) {
-      consola.debug(error);
+      logger.error(error);
 
       return {
         ...error,
         errors: error.graphQLErrors,
         data: null,
       };
     }
-    consola.error(error);
+
     throw error.networkError?.result || error;
   }
 }

packages/api-client/src/api/productDetails/index.ts

@@ -9,7 +9,7 @@ import type {
   ProductDetailsQueryVariables,
 } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import consola from "consola";
+import { getLogger } from "@vue-storefront/middleware";
 import productDetailsQuery from "./productDetailsQuery";
 import type { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
@@ -111,6 +111,8 @@ export async function productDetails(
   customQuery: CustomQuery = { productDetails: "productDetails" },
   customHeaders: CustomHeaders = {}
 ): Promise<ApolloQueryResult<ProductDetailsQuery>> {
+  const logger = getLogger(context);
+
   const defaultParams = {
     pageSize: 10,
     currentPage: 1,
@@ -148,15 +150,15 @@ export async function productDetails(
   } catch (error) {
     // For error in data we don't throw 500, because it's not server error
     if (error.graphQLErrors) {
-      consola.debug(error);
+      logger.error(error);
 
       return {
         ...error,
         errors: error.graphQLErrors,
         data: null,
       };
     }
-    consola.error(error);
+
     throw error.networkError?.result || error;
   }
 }

packages/api-client/src/api/products/index.ts

@@ -9,7 +9,7 @@ import {
   ProductsListQueryVariables,
 } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import consola from "consola";
+import { getLogger } from "@vue-storefront/middleware";
 import productsListQuery from "./productsList";
 import { Context } from "../../types/context";
 import getHeaders from "../getHeaders";
@@ -111,6 +111,8 @@ export async function products(
   customQuery: CustomQuery = { products: "products" },
   customHeaders: CustomHeaders = {}
 ): Promise<ApolloQueryResult<ProductsListQuery>> {
+  const logger = getLogger(context);
+
   const defaultParams = {
     pageSize: 10,
     currentPage: 1,
@@ -148,15 +150,15 @@ export async function products(
   } catch (error) {
     // For error in data we don't throw 500, because it's not server error
     if (error.graphQLErrors) {
-      consola.debug(error);
+      logger.error(error);
 
       return {
         ...error,
         errors: error.graphQLErrors,
         data: null,
       };
     }
-    consola.error(error);
+
     throw error.networkError?.result || error;
   }
 }

packages/api-client/src/api/requestPasswordResetEmail/index.ts

@@ -3,7 +3,7 @@ import { GraphQLError } from "graphql";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { RequestPasswordResetEmailMutation, RequestPasswordResetEmailMutationVariables } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import consola from "consola";
+import { getLogger } from "@vue-storefront/middleware";
 import recaptchaValidator from "../../helpers/recaptcha/recaptchaValidator";
 import requestPasswordResetEmailMutation from "./requestPasswordResetEmail";
 import { Context } from "../../types/context";
@@ -28,6 +28,8 @@ export async function requestPasswordResetEmail(
   input: RequestPasswordResetEmailMutationVariables,
   customHeaders: CustomHeaders = {}
 ): Promise<FetchResult<RequestPasswordResetEmailMutation>> {
+  const logger = getLogger(context);
+
   const { recaptchaToken, ...variables } = input;
 
   if (context.config.recaptcha.isEnabled) {
@@ -44,7 +46,7 @@ export async function requestPasswordResetEmail(
     }
   }
 
-  consola.debug("[VSF: Magento] requestPasswordResetEmail", JSON.stringify(input, null, 2));
+  logger.debug(`Requesting password reset email with input`, { input });
   const result = await context.client.mutate<RequestPasswordResetEmailMutation, RequestPasswordResetEmailMutationVariables>({
     mutation: gql`
       ${requestPasswordResetEmailMutation}

packages/api-client/src/api/resetPassword/index.ts

@@ -3,7 +3,7 @@ import { GraphQLError } from "graphql";
 import type { CustomHeaders } from "@vue-storefront/magento-types";
 import { ResetPasswordMutation, ResetPasswordMutationVariables } from "@vue-storefront/magento-types";
 import gql from "graphql-tag";
-import consola from "consola";
+import { getLogger } from "@vue-storefront/middleware";
 import resetPasswordMutation from "./resetPassword";
 import { Context } from "../../types/context";
 import recaptchaValidator from "../../helpers/recaptcha/recaptchaValidator";
@@ -30,6 +30,8 @@ export async function resetPassword(
   input: ResetPasswordMutationVariables,
   customHeaders: CustomHeaders = {}
 ): Promise<FetchResult<ResetPasswordMutation>> {
+  const logger = getLogger(context);
+
   const { recaptchaToken, ...variables } = input;
 
   if (context.config.recaptcha.isEnabled) {
@@ -46,7 +48,7 @@ export async function resetPassword(
     }
   }
 
-  consola.debug("[VSF: Magento] requestPasswordResetEmail", JSON.stringify(input, null, 2));
+  logger.debug("Initiating password reset request with input", { input });
   const result = await context.client.mutate<ResetPasswordMutation, ResetPasswordMutationVariables>({
     mutation: gql`
       ${resetPasswordMutation}

packages/api-client/src/helpers/magentoLink/graphQl.ts

@@ -4,7 +4,7 @@ import { onError } from "@apollo/client/link/error";
 import { RetryLink } from "@apollo/client/link/retry";
 import { setContext } from "@apollo/client/link/context";
 import AgentKeepAlive from "agentkeepalive";
-import consola from "consola";
+import { getLogger, type AlokaiContainer } from "@vue-storefront/middleware";
 import { handleRetry } from "./linkHandlers";
 import { Config } from "../../types/setup";
 import possibleTypes from "../../types/possibleTypes.json";
@@ -15,8 +15,10 @@ const agent = new HttpsAgent({
   timeout: 30000,
 });
 
-const createErrorHandler = () =>
+const createErrorHandler = (alokai: AlokaiContainer) =>
   onError(({ graphQLErrors, networkError }) => {
+    const logger = getLogger(alokai);
+
     if (graphQLErrors) {
       graphQLErrors.forEach(({ message, locations, path, extensions }) => {
         // Mute all GraphQL authorization errors
@@ -26,27 +28,28 @@ const createErrorHandler = () =>
 
         if (!message.includes("Resource Owner Password Credentials Grant")) {
           if (!locations) {
-            consola.error(`[GraphQL error]: Message: ${message}, Path: ${path}`);
+            logger.error(message, { path });
             return;
           }
 
           const parsedLocations = locations.map(({ column, line }) => `[column: ${column}, line: ${line}]`);
 
-          consola.error(`[GraphQL error]: Message: ${message}, Location: ${parsedLocations.join(", ")}, Path: ${path}`);
+          logger.error(message, { path, location: parsedLocations.join(", ") });
         }
       });
     }
 
     if (networkError) {
-      consola.error(`[Network error]: ${networkError}`);
+      logger.error(networkError, { type: "Network Error" });
     }
   });
 
 export const apolloLinkFactory = (
   settings: Config,
-  handlers?: {
+  handlers: {
     apolloLink?: ApolloLink;
-  }
+  },
+  alokai: AlokaiContainer
 ) => {
   const baseLink =
     handlers?.apolloLink ||
@@ -66,10 +69,10 @@ export const apolloLinkFactory = (
     ...settings.customApolloHttpLinkOptions,
   });
 
-  const onErrorLink = createErrorHandler();
+  const onErrorLink = createErrorHandler(alokai);
 
   const errorRetry = new RetryLink({
-    attempts: handleRetry(),
+    attempts: handleRetry({ alokai }),
     delay: () => 0,
   });
 

packages/api-client/src/helpers/magentoLink/index.ts

@@ -1,14 +1,16 @@
-import consola from "consola";
+import { type AlokaiContainer } from "@vue-storefront/middleware";
 import { Config } from "../../types/setup";
 import { apolloLinkFactory } from "./graphQl";
 import { linkFactory } from "./linkHandlers";
 
-export const createMagentoConnection = (settings: Config) => {
-  consola.debug("createMagentoConnection");
-
-  const apolloLink = apolloLinkFactory(settings, {
-    apolloLink: linkFactory({ state: settings.state }),
-  });
+export const createMagentoConnection = (settings: Config, alokai: AlokaiContainer) => {
+  const apolloLink = apolloLinkFactory(
+    settings,
+    {
+      apolloLink: linkFactory({ state: settings.state, alokai }),
+    },
+    alokai
+  );
 
   return {
     apolloLink,

packages/api-client/src/helpers/magentoLink/linkHandlers.ts

@@ -1,38 +1,48 @@
 import { setContext } from "@apollo/client/link/context";
-import consola from "consola";
+import { getLogger, type AlokaiContainer } from "@vue-storefront/middleware";
 import { ConfigState } from "../../types/setup";
 
-export const handleRetry = () => (count, operation, error) => {
-  if (count > 3) {
-    return false;
-  }
+export const handleRetry =
+  ({ alokai }: { alokai: AlokaiContainer }) =>
+  (retryCount, operation, error) => {
+    const logger = getLogger(alokai);
+
+    if (retryCount > 3) {
+      return false;
+    }
 
-  if (error?.result?.message === "invalid_token") {
-    consola.debug(`Apollo retry-link, the operation (${operation.operationName}) sent with wrong token, creating a new one... (attempt: ${count})`);
-    return true;
-  }
+    if (error?.result?.message === "invalid_token") {
+      const { operationName } = operation;
+      logger.error(`Invalid token used for operation ${operationName}, Apollo retry-link will refresh the token and retry`, {
+        operation,
+        retryCount,
+      });
+      return true;
+    }
 
-  return false;
-};
+    return false;
+  };
 
-export const linkFactory = ({ state }: { state: ConfigState }) =>
+export const linkFactory = ({ state, alokai }: { state: ConfigState; alokai: AlokaiContainer }) =>
   setContext((apolloReq, { headers }) => {
-    consola.debug("Apollo linkFactory", apolloReq.operationName);
+    const logger = getLogger(alokai);
+
+    logger.debug(`Apollo linkFactory ${apolloReq.operationName}`);
 
     const Store: string = state.getStore();
     const token: string = state.getCustomerToken();
     const currency: string = state.getCurrency();
 
     if (currency) {
-      consola.debug("Apollo currencyLinkFactory, finished, currency: ", currency);
+      logger.debug(`Finished executing Apollo currencyLinkFactory.`, { currency });
     }
 
     if (Store) {
-      consola.debug("Apollo storeLinkFactory, finished, storeId: ", Store);
+      logger.debug(`Finished executing Apollo storeLinkFactory.`, { Store });
     }
 
     if (token) {
-      consola.debug("Apollo authLinkFactory, finished, token: ", token);
+      logger.debug(`Finished executing Apollo authLinkFactory.`, { token });
     }
 
     return {