Logger

The Alokai logger gives your storefront structured, leveled logging that works on both client and server. Instead of scattered console.log calls, you get consistent log output with severity levels and optional metadata — making it easier to filter logs in production and debug issues locally.

Installation

The logger is already included in the Alokai Storefront. You can skip this step unless you're adding it to an existing project.

The logger is provided by the SDK and the framework-specific packages. Install or update the following packages:

@alokai/connect — 1.0.0 or later
@vue-storefront/next — 4.3.0 or later
@vue-storefront/nuxt — 6.2.0 or later

After updating, set up the logger in your storefront:

Create a logger.ts file in the sdk directory:

sdk/logger.ts

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

export const logger = createLogger();

Configuration

The logger works out of the box with sensible defaults. You can customize it with the following options:

verbosity — the minimum severity level to log. Defaults to info. Available levels (from most to least severe):
- emergency
- alert
- critical
- error
- warning
- notice
- info
- debug
includeStackTrace — whether to include stack traces in log output. Defaults to false.

Pass options to createLogger in your sdk/logger.ts file:

sdk/logger.ts

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

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

Usage

Import the logger and call any of its severity methods. It works the same way in both client and server code:

components/some-component.tsx

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

function SomeComponent() {
  logger.info("Component rendered");

  // ...
}

Available methods

Each method corresponds to a severity level:

emergency
alert
critical
error
warning
notice
info
debug

The logger doesn't have a log method. Use info instead.

Metadata

Every logger method accepts an optional second argument — a metadata object. This is useful for attaching structured context to your log entries (e.g. request IDs, entity identifiers, or error details):

logger.info("Product fetched", { productId: "123", source: "search" });

logger.error("Payment failed", { orderId, error: error.message });

The metadata is included in the structured log output, making it easy to search and filter in log aggregation tools.