Logging

Logging helps developers to report information for debugging and monitoring purposes. commercetools Frontend supports logging out of the box, and you can find all the collected logs on your Kibana dashboard.

In this article, you'll learn about logging and tracing requests through different extensions like a dynamic-page-handler or actions or data-sources.

Logging in extensions

commercetools Frontend follows JavaScript's default logging mechanism using the console global object.

Method	Severity	Used for
`console.log`	INFO	Information for debugging.
`console.warn`	WARNING	Warnings and issues during execution.
`console.error`	ERROR	Error messages when execution fails.

import {
  DataSourceConfiguration,
  DataSourceContext,
  DynamicPageContext,
  DynamicPageRedirectResult,
  DynamicPageSuccessResult,
  ExtensionRegistry,
  Request,
} from '@frontastic/extension-types';
import { getLocale, getPath } from './utils/Request';
import { ProductRouter } from './utils/ProductRouter';
import { Product } from '../../types/product/Product';
import { SearchRouter } from './utils/SearchRouter';
import { Result } from '../../types/product/Result';
import { CategoryRouter } from './utils/CategoryRouter';
import { ProductApi } from './apis/ProductApi';
import { ProductQueryFactory } from './utils/ProductQueryFactory';

export default {
  'dynamic-page-handler': async (
    request: Request,
    context: DynamicPageContext
  ): Promise<DynamicPageSuccessResult | DynamicPageRedirectResult | null> => {
    // dynamic page handler
    return null;
  },
  'data-sources': {
    'frontastic/product-list': async (
      config: DataSourceConfiguration,
      context: DataSourceContext
    ) => {
      console.log('Start of execution: frontastic/product-list'); // INFO
      const productApi = new ProductApi(
        context.frontasticContext,
        context.request ? getLocale(context.request) : null
      );
      const productQuery = ProductQueryFactory.queryFromParams(
        context?.request,
        config
      );
      console.warn('Showing a warning: ', { productQuery }); // WARNING
      console.error('Showing an error: fake error'); // ERROR
      return await productApi.query(productQuery).then((queryResult) => {
        return {
          dataSourcePayload: queryResult,
        };
      });
    },
  },
  actions: {
    // actions.....
  },
};

You'll see these logs inside the CLI inside the sandbox log (s)as shown below during development.

Use the up and down arrow keys to move up/down in the logs and press Enter to see details of the selected log as shown below.

Checking logs in Kibana

Once deployed to the staging or production environment, you can check the execution logs in your Kibana dashboard. You can use the Kibana Query Language to filter the logs as shown below.

Tracing a request

Sometimes you'd want to trace a request through different services and see where things went wrong. commercetools Frontend adds a unique requestId to all requests that come to that API hub, making it easy to trace the request for debugging.

You can copy the requestId from the request headers in the Network tab of the developer console as shown below.

You can also copy the requestId from a log and use it to filter all logs related to that request.

The log severity will be set based on the method used while logging as shown in the image below.

You can expand the log to see more details. For example, the context will have the object mentioned in the log.