Skip to content

Replay Log

Jump to bottom
Blucas edited this page Mar 15, 2024 · 6 revisions

What is it

Replay Log, as the name suggests, is the process of replaying previously generated logs. So why we need to replay logs? Where do the previous logs come from? How to replay them? Let's take a look one by one.

Why do we need

In the past, PageSpy's online debugging solved many tricky problems, but using PageSpy had a prerequisite: "the client and the debugging end must be online at the same time." This prerequisite not only limited the scenarios where PageSpy could be used, for example:

  • Both development and testing manpower had to be simultaneously dedicated to a problem.
  • The connection was disrupted if the client went to the background during debugging.

It also brought challenges for PageSpy itself, such as:

  • Considering the volume of collected data and the stress on network transmission.

To address these issues and provide greater flexibility during usage, PageSpy introduced log replay functionality in version 1.7.3!

Where do the logs come from

After the PageSpy SDK added support for registering plugins, the development team immediately progressed with the development of the DataHarborPlugin.

DataHarborPlugin, Data Harbor

Mental Model: The data generated by PageSpy is continuously sent to the "Data Harbor", where the data is organized, packaged, and compressed. Afterward, the "Data Harbor" stores the data in a "container" (memory), waiting for the next instructions.

Internally, it listens to the "public-data" event (what is the public-data event?), implementing the functionality of offline caching of data. Simultaneously, it provides the ability to download data in the controls rendered by the SDK. When an issue is detected by the client, testing team members can directly export the data. This innovation breaks the prerequisite of "the client and the debugging end must be online."

More detail see HuolalaTech/page-spy-plugin-data-harbor.

How to use

Currently available for client running in browser environment.

Step 1: Client introduces SDK and plugin

<html>
  <head>
    <!-- 1. Load PageSpy -->
    <script src="https://<your-host>/page-spy/index.min.js"></script>
    <!-- 2. Load the plugin -->
    <script src="https://<your-host>/plugin/data-harbor/index.min.js"></script>
    <script>
      // 3. Register the plugin, the config info see: https://github.com/HuolalaTech/page-spy/blob/main/packages/page-spy-plugin-data-harbor
      PageSpy.registerPlugin(new DataHarborPlugin(config));
      // 4. Instantiate PageSpy
      window.$pageSpy = new PageSpy();
    </script>
  </head>
</html>

After introduction, the controls rendered by the SDK will have a "Download Log Data" button in the popup. Clicking it will automatically download a JSON file named with the date and time format:

Step 2: Replay Logs

Go to the room list page of the debugging end, click on "Replay Log", select the JSON file downloaded by the client, and you can start using the log replay functionality.

Used in conjunction with other plugins

The DataHarborPlugin itself only collects data and provides data processing functions. The official also provides plugins for different scenarios:

  • RRWebPlugin: Use rrweb to record DOM updates. In the "Replay log" panel on the debugging end, users can see the operation trajectory of the page on the left side.
Clone this wiki locally