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 handlerreturn null;},'data-sources': {'frontastic/product-list': async (config: DataSourceConfiguration,context: DataSourceContext) => {console.log('Start of execution: frontastic/product-list'); // INFOconst productApi = new ProductApi(context.frontasticContext,context.request ? getLocale(context.request) : null);const productQuery = ProductQueryFactory.queryFromParams(context?.request,config);console.warn('Showing a warning: ', { productQuery }); // WARNINGconsole.error('Showing an error: fake error'); // ERRORreturn 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.