Using Custom Logging for Better Troubleshooting Your UI Extensions

Hey y', all, It's Brooke with HubSpot Academy. Today I'm going to show you how you can use the Custom Logger component for UI extensions that help make troubleshooting easier. The Custom Logger has multiple logging levels built in. Logging for serverless function requests, the ability to log errors to the console when developing locally, and trace IDs to investigate extension failures. Check out the dev docs in the description below to learn more about the Custom logger. Now let's see how we can use the Custom Logger in our UI extensions. So I'm here in my VS code and inside of my terminal I'm going to run this HS project create command that has the template source for the Custom Logger example. And this will help us to look at all the different levels of logging as well as how they work with serverless functions. So I'm just going to go ahead and click Return. Now that that's there, we're going to CD into our Custom Logger example folder and run NPM Install just to make sure that we install any node dependencies. And now we're just going to go ahead and do HS project upload. To go ahead and upload it to my developer sandbox, we're going to go ahead and say, yes, we want to create it. So now that we've deployed this, the Custom logger will persist the logs in the HubSpot logging system. So let's go into our HubSpot account to add it to our middle pane in our Contact Records page. From the homepage in the top right corner, we can click on the settings icon and then scroll down until we see objects and we click on Contacts under Data Management. Then we're going to click on the tab called Record Customization and then we will do customize the middle column. And here you can add a specific team view or you can just update the default view. We're going to update the default view and then we're going to click on our custom tab and we're going to go ahead and click Add Cards and we're going to click on Extension Cards and we're going to add our middle tab logging and then we're going to save and exit. This example also comes with a sidebar one. So we're going to go ahead and click Customize the right sidebar. Click on that default view, scroll down to the bottom. All of your sidebar ones get automatically added. So I'm going to take it and add it to the very top of our sidebar so it'll be easier to see. And then we will click Save. And now we can go to a contact record page. So in the main navigation on the left hand side, click on CRM and then Contacts. Then just click on any contact. And now we're on the Contact record page and we can see we have the UI extension right here in the middle tab. This will allow us to test out the different logging functions. And if we are in local dev mode, the browser's developer console will show the events. So I'm just going to go ahead and click on the serverless function button. That would be a success. And then the serverless error, that's going to throw an error. And then we can also test out the different logging levels. So we have logger.info logger.debug logger warn and logger error. And the last thing that we have on here is we can deploy the app and then crash the card. This will give us our trace ID to see what happened in the Log traces tab in our private Apps dashboard. So to see that, we're going to go ahead and click crash the card. And so now there's this information here that has the trace ID and it has a really easy copy function right here. Now we're going to go to our private apps. In the top right hand corner click on the settings button again. Then in the left hand sidebar we're going to click on integrations and click Private Apps. Here we're going to see all of our private apps that we have and these are all connected to our different UI extensions. So we're just going to scroll down until we see the custom logger example. So we're going to click on that, scroll up and we're going to click on the log traces. And then here we can enter our trace id. We're going to just paste in that trace id and this will give us all of those different things that we had. So if we scroll down to the bottom, we see the middle tab logging. We had logger error, log logging an error, logger warn, logging a warning logging, a debug logging info. And you can see that they have different icons beside them depending on what level of logging they are. We also have the serverless function error and then we also have the logger.info for the serverless has succeeded when we clicked the success button. And now we can click on logger.debug and this will tell us where in the CRM we were when this issue occurred. So it tell us the object ID and the object type ID01 is a contact. So this is the contact record ID. And we also could go to the Logs tab and we can click on the serverless Functions tab here and it will show us our success and failure. It will tell us the function name that failed or succeeded and the card info that it was on and the object info for what page you were on. And then if you click on extensions, you'll see the different cards here, the middle tab logging and the sidebar logging. And then you can also click on the View log trace to get back to where we were with the log traces. All right, now that we know what it looks like inside of our HubSpot account, let's go into the code to see how we add this to our UI extensions. So now that we're back in VS code, we're going to open our custom logger example folder, go into the source folder and then click on Extensions. We have both the middle tab logger here and the sidebar, but the way that you call them is the same. So let's look at the middle tab logging. In order for the logger to work, you need to import it from the pre built HubSpot UI extensions and then you can use it as logger warn. So this gives you the warning in the middle tab before my extension. That's just a way for us to test it. And then inside of here we create a constant called middle tabloging that takes in our props. And we have our logger debug and our logger debug. We're going to use JSON stringify to make it a little bit more readable for us. That's that one that gives you that information about what page you're on in the CRM. And then we also had those serverless functions. So we have the first one, the serverless success. We're going to return HubSpot.serverless and that's going to call our serverless function which lives in the app. Functions folder. And then here is where we can use our logger. So when we get the result, we can do logger.info and log the result in the logger.info and then we can also, if there's an error, we can do logger error to log that error dot message. Additionally we do this on the call serverless fail the same thing here, logger.info logger. Error. And if we scroll down we see the buttons have an on click anonymous function and those you do the logger.info and this is where you can change what shows up when you log those different infos. Additionally, for logger, debug, logger warn and logger error. Finally we had where we could crash the app and to get the trace id. This button has an on click anonymous function that throws new error and that will crash the card. That's all you have to do to add the custom logger to your UI extensions, making troubleshooting more straightforward. Thanks for watching. Check out the description to learn more like and subscribe to the HubSpot Developers YouTube channel and I'll see you all in another video. Bye bye bye.