Logger

The logger provides a logging utility for Alokai Storefront projects. It allows you to log messages at various levels and ability to provide additional context.

It is created to provide a unified way of logging messages across the project along with providing a structured data.

Installation

If the logger is already included in the Alokai Storefront, you can skip this step.

The logger is provided by the SDK and the framework specific packages.

In order to install the logger, you need to update following packages to at least the following versions:

• @vue-storefront/sdk to 3.3.0
• @vue-storefront/nuxt to 6.2.0
• @vue-storefront/next to 4.3.0

After updating the packages, you need to provide the logger to the storefront.

Create a file logger.ts in the sdk directory and add the following content:

// apps/storefront-unified-nextjs/sdk/logger.ts

import { createLogger } from '@vue-storefront/next';

export const logger = createLogger();

Configuration

The default configuration is already provided, but you can customize it by providing the following options:

• verbosity - the minimum level of the message to be logged. The default value is info. Available values are:
  • emergency
  • alert
  • critical
  • error
  • warning
  • notice
  • info
  • debug
• includeStackTrace - a boolean value that determines if the stack trace should be included in the log message. The default value is false.

To provide the configuration for the logger, you need to update the following file:

Navigate to the logger.ts file in the sdk directory and add the configuration object to the createLogger function, e.g.:

// apps/storefront-unified-nextjs/sdk/logger.ts

import { createLogger } from '@vue-storefront/next';

export const logger = createLogger(); export const logger = createLogger({   verbosity: 'debug',   includeStackTrace: true, }); 

Usage

You can use the logger similarly as you would use the common console object:

No matter if this is a client or server side code, you can import the logger and use it to log messages the same way, e.g.:

import { logger } from "@/sdk/logger";

function SomeComponent() {
  logger.info("Example server side log");

  // ...
}

Now instead of using console you can use the logger to log messages at different levels. You can use the following methods:

• emergency
• alert
• critical
• error
• warning
• notice
• info
• debug

Keep in mind that log method is not available, you can use info instead.