Logging

Add logs to your application

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

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.

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:

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:

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.