SUPPORT.TWILIO.COM END OF LIFE NOTICE: This site, support.twilio.com, is scheduled to go End of Life on February 27, 2024. All Twilio Support content has been migrated to help.twilio.com, where you can continue to find helpful Support articles, API docs, and Twilio blog content, and escalate your issues to our Support team. We encourage you to update your bookmarks and begin using the new site today for all your Twilio Support needs.

How to Collect Browser Logs for Troubleshooting Issues in Twilio Flex

Objective

This article will help you collect browser logs from Google Chrome or Microsoft Edge to troubleshoot issues in Twilio Flex. These logs are useful when identifying UI errors or network issues, and can be shared with support for faster issue resolution.

 

Product

Twilio Flex

 

Environment

legacy Twilio Console

 

User Account Permission/Role(s) Required 

Agent, Supervisor, or Administrator access to Flex

 

Procedure 

Step 1: Open Developer Tools

  • On Mac: Press Cmd + Shift + J or Cmd + Shift + C
  • On Windows/Linux: Press Ctrl + Shift + J
  • Or go to Chrome/Edge menu → More Tools → Developer Tools

Step 2: Open Developer Tools settings

  • Click the gear icon in the top right corner of the Developer Tools window

Step 3: Enable the following options:

  • Under Twilio Console:
    • Log XMLHttpRequests
    • Show timestamps
    • Preserve log upon navigation
  • Under Network:
    • Preserve log
    • Record network log

Step 4: Close the settings window

Step 5: Set the log level to show all logs

  • In the Console tab, select “All levels” from the filter dropdown at the top right

Step 6: Set the debug logs in Flex. Once you have logged in Twilio Flex, paste in the console the following code to enable the debug logs:

Twilio.Flex.Manager.getInstance().store.getState().flex.config.logLevel = 'debug';
Twilio.Flex.Manager.getInstance().updateConfig();

Step 7: Reproduce the issue you are troubleshooting while keeping the Developer Tools open

Step 8: Save the Console logs

  • Right-click inside the Console

  • Click “Save As…” to download the logs as a text file

Step 9: Save the Network logs

  • Go to the Network tab

  • Click the download (HAR) icon to save the session log

Step 10: Share the logs

  • Include the saved files in a support ticket

  • Add the time the issue occurred and any related call/task/worker SID for reference
     

Additional Information

  • You can also set the log level for all agents via the REST API or appConfig.js (for self-hosted Flex).
  • Visit this link for more information on Flex UI configuration.

 

Have more questions? Submit a request
Powered by Zendesk