Documentation

Logging

Elevate, May 20-22-2025, Miami Beach, Florida

Use logs to trace requests, view metrics, and debug your application.

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 Humio 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.

Add logs to your application

commercetools Frontend follows JavaScript's default logging mechanism using the console global object.
MethodLog levelSupported environment
console.logINFOdevelopment
console.debugDEBUGdevelopment
console.infoINFOdevelopment, staging, and production
console.warnWARNINGdevelopment, staging, and production
console.errorERRORdevelopment, staging, and production
Using logs in backend extensionsts
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.....
  },
};

View logs during development

From the CLI dashboard, you can monitor the extensions logs. Press the e key to see the execution logs of your extensions running on the extension runner. The logs include run time errors, console.log calls from the extensions during execution, information about the upload of the extension build after recompile, and information about the execution of extensions.

View logs and metrics for deployed application

To view logs and metrics of a deployed application, you need to log into your Humio account. To access your Humio dashboard, follow these steps:

  1. Open the Humio dashboard.
  2. In the Select region drop-down, select Europe, Frankfurt.
  3. Click Log in with GitHub and complete the authentication flow.
If you don't have a Humio account, contact the Frontend support team to get access.
Once logged in, you can access your application logs in the Search area. You can use the search feature to trace a request.
You can access the Dashboard area to view the default dashboard prepared by the commercetools Frontend team. This dashboard displays performance metrics for your application. You can also add new Widgets to the default dashboard or create a new dashboard.

Trace a request from frontend to backend

Sometimes, you may need to trace a request through different services to debug an issue. To help with this, commercetools Frontend adds the Frontastic-Request-Id header with a unique identifier to all requests that come through the API hub.
You can copy the Frontastic-Request-Id header value from the request headers in the Network tab of the browser developer console, as shown below:
Collect the frontastic-request-id from browser developer console network tab.
commercetools Frontend also adds a Frontastic-Request-ID value to each page to allow you to track the request and response cycle of a specific page. You can find this value in the browser developer console, as shown below:
Collect the frontastic-request-id from browser developer console.
You can use the ID value to search logs in the Humio dashboard. To learn more about how you can search and filter data, see Searching data.