How do I use the FullStory Console?

The FullStory Console view allows you to record messages reported in a customer's browser's console. Developers use Console messages for debugging, and when FullStory records Console messages this allows you to see errors that occur "in the wild" so you can see exactly what happened in a customer's browser without needing to replicate.

Console: The Basics

Similar to the Console in the developer tools of your favorite web browser, the FullStory Console enables you to see messages logged to the browser's console during any customer's session.

In your site's JavaScript, you can send these messages using methods like console.log(), console.error(), console.info(), console.warn() and so forth. These logged messages can provide information about specific errors that occurred or document different states of the session. 

If you've never checked out the Console in your browser's developer tools, you should try it! 

In Google Chrome you can access the logs by typing "ctrl/cmd-alt-J" on your keyboard, or you can "right-click" and click "Inspect" to open the developer tools and then navigate to the Console tab.

direct_1532375539881-consoleChrome.jpg

As you load or interact with any web page, the Console will log information, warnings, or errors as they occur during your session.

The Console View in FullStory

Similar to the Console in a web browser, FullStory can record logged console messages as well as uncaught exceptions for any recorded session. This gives you the power to see what the Console logs looked like for any real customer.

How to Enable Console Recording

To enable Console recording for your FullStory sessions, first visit Settings > Recording > Recording Options and flip "Console Recording" to "on." Once this has been enabled, FullStory will begin recording the Console for future sessions.

direct_1532375557779-recordingOptionsAnnotated.png

How to View the Console for a Session

Once you have enabled Console Recording under Recording Options, you will see that the Console button (at the top right of your playback screen) will change colors when errors or warning are present.

direct_1532375575619-consoleWarning.jpg

Note: if you have the Dev Tools add-on in FullStory, then this button that indicates errors or warning will read "Dev Tools" instead of "Console."

direct_1532375599533-devToolsWarning.jpg

The following colors represent different states of the Console:

  • Gray - No messages present

  • Blue - At least one Log or Info message present

  • Yellow - At least one Warn message present

  • Red - At least one Error message or uncaught exception present

The Dev Tools label lights up yellow when warnings are present in the Console...

direct_1532375649366-devToolsWarningAnnotated.png

...and when you click to open Dev Tools you can see Warnings present in the Console.

direct_1532375665829-devToolsOpen.png

 

Note: If you have the Dev Tool add-on, you'll find the Console option as a tab when Dev Tools is open.

direct_1532375702385-consoleOpen.png

Clicking the Console (or Dev Tools) button will show the state of the current page's console at the precise moment in time you're viewing. 

In FullStory, a single customer's session may include navigations to multiple pages, but the Console logs relate to a single URL—not the whole session

When the Console view is open, blue page icons will display on the timeline, to indicate events where the customer opened a new page. For sessions with multiple pages, use the blue (-) icon to collapse the waterfall chart for a page and the blue (+) icon to open a waterfall chart for a page.

direct_1532375725497-pageBreakdown.png

Pages in the Console view will correspond with "Visited Page" navigation events shown in the Event stream, and you can quickly find where console errors occurred within the sequence of events for a session by looking at the color-coded console icon in the Events stream. 

direct_1532375751568-eventStream.png

How to Read the Types of Messages in the Console

The FullStory Console categorizes logged messages by type:

  • Log - Relates to console.log() and includes logged messages that might be helpful for debugging.

  • Info - Relates to console.info() and includes logged informational messages that may be related to state changes or various services.

  • Warn - Relates to console.warn() and includes logged warnings that could cause problems but are generally recoverable.

  • Error - Relates to console.error() and includes logged errors that cause operations to fail.

  • Exception - Includes uncaught errors; with Exceptions, you can click to expand and view a Stack Trace.

 

direct_1532375767091-stackTraces.jpg

Filtering Console Logs by Type

Looking for a specific type of error? You can use the tabs to filter logs by Type…

direct_1532375857835-errorsFilteredbyType.jpg

...or start typing in the Filter text area to narrow your search by text included in the Console message.

direct_1532375871136-errorsFilteredByName.jpg

Searching for Console Errors with FullStory Segments

There is currently no way to search for console errors using specifics like error type or error text using FullStory Segments or OmniSearch. However, you are able to do a sort of general search for Sessions where console errors occurred on a given URL or set of URLs by setting up a filter like this:

Error_Search.png

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us