Developer Announcements

jmclaren
HubSpot Employee
HubSpot Employee

Log tracing for UI extensions

The text below is a copy of a post on the developer changelog. If there are inconsistencies between this version and the one on the changelog the one on the changelog takes precedence.


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.

jmclaren_0-1702307149912.gif

 

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.

 

jmclaren_1-1702307149959.png

 

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

jmclaren_2-1702307149978.png

 

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

jmclaren_3-1702307149905.png

 

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.

Jon McLaren

Sr. CMS Developer Advocate

Get started developing on the HubSpot CMS Developer Changelog
How to optimize your CMS Hub site for speed

If my reply answered your question, please mark it as a solution, to make it easier for others to find.

0 Respostas 0

0 Respostas

Este post ainda não tem respostas

Ninguém respondeu a este post ainda. Volte em breve para ver se alguém tem alguma solução ou responda caso saiba como ajudar! Tudo o que vai, volta.

responder ao post

Precisa de ajuda para responder? Confira as nossas Diretrizes da Comunidade