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.

MethodSeverityUsed for
console.logINFOInformation for debugging.
console.warnWARNINGWarnings and issues during execution.
console.errorERRORError 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.

3213fa2 logs in 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.

a65fcc3 log details in development

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.

9e87a7b searching logs in kibana

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.

9517fcb tracing request id

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

1b472ef copy request id from kibana

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

3e01047 log severity

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

af674d6 context in logs