How do I use the FullStory Console?

Discover how you can use session replay with our hands-on enablement course! Check it out at learn.fullstory.com.

The FullStory Console view allows you to capture messages reported in a customer's browser's console. Developers use Console messages for debugging, and when FullStory captures 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. 

Note: Console errors come from either console.error or the "error" event on window. Some events may show up in your browser developer console, but won't show up in the FullStory console: this includes network errors and errors you generate from code you type in the Chrome console. Some network errors will show up in the Network view in Dev Tools.

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 capture logged console messages as well as uncaught exceptions for any captured session. This gives you the power to see what the Console logs looked like for any real customer.

How to Enable Console Data Capture

Note: Console data capture is enabled by default.

To enable Console data capture for your FullStory sessions, first visit Settings > Data Capture and Privacy > Data Capture > Data Capture Options and flip "Console Data Capture" to "on." Once this has been enabled, FullStory will begin capturing the Console for future sessions.

FullStory Console - Enable Data Capture.png

How to View the Console for a Session

Once you have enabled Console Data Capture under Data Capture 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. 

Errors in the Events Stream.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.

The following console methods will not be captured:

  • console.assert()
  • console.debug()
  • console.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

Console errors are searchable as an event filter in FullStory. This allows you to search for specific error messages in Segments or in Dashboards create a card of top Console Errors grouped by text. This is especially helpful for engineers when there is a need to quickly identify and address any existing errors in the console.

Screen Shot 2021-12-02 at 1.59.59 PM.png

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us