Replaying websocket traffic

The Juju GUI communicates with Juju via a websocket. We wanted to be able to capture and replay the websocket traffic as a debugging aid, especially when tracking down memory leaks. We imagined that we would have to add client-side logging in order to capture the websocket traffic, but in doing my due diligence before implementing such a thing I decided to see if there was a way to capture the data without writing any code.

It turns out that Chrome’s built-in network inspector panel will let you see the frames sent across a web socket but I could not find a built-in way to export the data. The best you can get is copy/paste the frame data.

Unfortunately the copy/paste omits an important detail. Chrome indicates the direction of the data flow (from the client to the server or vice versa) as the color of each row (green for sent frames, white for received frames). That coloration is, of course, lost when the text is copied.

This would seem to be a critical failure, but I realized that given the constraints of the protocol spoken between the GUI and Juju, we can always infer the direction of communication from the message itself.

After realizing this I built a proof-of-concept program that, given a copy/pasted log from Chrome will replay a websocket session. It waits for the GUI to make a request and then parrots the response read from the log. If the GUI makes a request that does not match the log the server raises an exception and the party is over.

This is how you collect a websocket traffic log that can be replayed:

  1. Open a new tab in Chrome
  2. Open the developer tools (Control-Shift-i)
  3. Select the “Network” pane
  4. Click the “Websockets” filter at the bottom of the pane
  5. Navigate to the GUI (e.g., localhost:8888)
  6. Perform the actions you want logged.
  7. Click on the single “ws” entry on the left of the Network pane.
  8. Select the “Frames” tab to the right.
  9. Click on the first entry in the frames table.
  10. Type Control-a to select all.
  11. Open a text editor and middle-click to paste the log.
  12. Save the log to a file.

Note: If you are taken to the “Sources” view by a breakpoint being triggered you need to disable breakpoints by selecting the “Sources” pane and clicking on the pause symbol in a stop sign at the bottom of the pane until it is grey (i.e., no stopping on breakpoints).