Skip to content
HubSpot Developer Changelog

Log tracing for UI extensions

Developers building UI Extensions with private apps will now be able to connect front-end and back-end logs with a single trace ID. You can trace and visualize both events in the front-end React layer (e.g. card rendering, button clicks, data entry) and backend events in the serverless layer (e.g. API calls) in a single view. This makes it significantly easier to debug issues and catch any issues that are happening in production to accelerate resolution.

To take advantage of this functionality your project needs to be on Project Platform Version 2023.2.

log trace showing a breakdown of the functions the error is in.

What's changing?

When viewing an individual private app within the CRM Development tools you'll see a new tab called "Log Traces". Here you can search for a trace ID and click on individual log lines on the log tree to view the complete log output. Currently, we support INFO, DEBUG, WARN, and ERROR log levels.


Within the existing "Logs" tab you'll now see two new sub-tabs: UI Extension Logs and Serverless Logs.

listing of UI Extension logs, their status, and the name of the extension that created the log

In the UI Extension logs tab, each log event displays the result of the card render, affected card name, the object type and ID that the card was displayed on, when it occurred, and view the log trace. Logs can be filtered by error category, card ID, card location, CRM object type, card location, and date range and searched on trace ID and CRM object ID. Users can also view and copy trace ID and view user details in the ‘Log Details’ side-tab (displayed when a log event is clicked).

The Serverless Function Logs tab displays logs outputted by serverless functions. Users can filter on error category, card ID, CRM object type, card location, and date range as well as search on request ID and CRM object ID. Users can also view and copy trace ID and view user details in the ‘Log Details’ side-tab (displayed when log line is clicked).

There are some known limitations and areas we're investigating for future improvement:

  • The initial card render is the default top level event and all following frontend and backend logs will be nested under this event.
  • Only the initial card render event is supported for frontend logs for our first release of log tracing. In the near future, customers will be able to log their own custom React logs in addition to the initial card render.
  • For this launch, events that happen outside of the scope of a card can't be traced. All trace IDs are unique per card and card render event; however, we plan to introduce capabilities for users to trace logs that are outside the scope of a card.

When is it happening?

Log tracing for UI Extension development is available now.

Questions or comments? Join us in the developer forums.