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.
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.
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.
Note: If you have a Pro Legacy plan in Fullstory, this button that indicates errors or warning will read "Console" instead of "Dev Tools."
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...
...and when you click to open Dev Tools you can see Warnings present in the Console.
You'll find the Console option as a tab when Dev Tools is open.
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.
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.
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()
Filtering Console Logs by Type
Looking for a specific type of error? You can use the tabs to filter logs by Type…
...or start typing in the Filter text area to narrow your search by text included in the Console message.
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.