#Recorder

#Introduction

Recorder is a tool designed for the Lynx framework to facilitate the recording and replay of page runtime states. Its core functionality involves precisely capturing the complete state of a page at a specific moment and serializing it into a portable recording file for subsequent high-fidelity replay.

Unlike traditional screen recording technologies, Recorder achieves "Deterministic Replay." During the replay process, the system not only reconstructs the complete UI hierarchy and rendering data from the time of recording but also preserves all page interactivity. Crucially, it achieves temporal consistency by hijacking and mocking time-related APIs, ensuring that time-sensitive operations within the replayed environment yield the same results as they did during the original session.

Recorder features cross-device replay capabilities. Through its integrated Replayer decoder, a recording file can be parsed and replayed on any device that supports the Lynx framework, regardless of hardware model or operating system. For instance, a session recorded on an iPad can be accurately reproduced on an iPhone, an Android device, or even on desktop and TV applications built with the same Lynx technology stack.

As an application's feature set expands, Lynx pages often become tightly coupled with the native application environment. This includes dependencies on custom NativeModules or private cloud services for data and resource management.

When diagnosing complex issues, this strong coupling becomes a major impediment to external collaboration and debugging, leading to problems such as build failures, complex authentication procedures, and inaccessible backend services. In such scenarios, traditional methods like code review are inefficient, while source-level debugging is often impractical due to environmental discrepancies. A core design objective of Recorder is to decouple the page from its private environment. A recording file encapsulates all information required for the page to run, including the view hierarchy, data state, and responses from asynchronous requests. During replay, all external dependencies are simulated using the data contained within the recording file, eliminating the need for any live network requests. This makes the debugging process entirely independent of the original production environment. Technical Advantages:

• Environment-Agnostic: Debuggers do not need to compile the original application, configure complex authentication, or set up specific development environments.
• Self-Contained Context: A single recording file contains all the necessary context to reproduce an issue.
• Efficient Collaboration: The party reporting the issue simply provides a recording file, allowing the recipient to debug in a standardized replay environment. This significantly reduces communication overhead and the difficulty of issue reproduction.

#Try Recorder

Recorder's record and replay capabilities are already integrated by default in LynxExplorer. You can follow the steps below to experience them.

#Download and install LynxExplorer

Please visit LynxExplorer and follow the documentation to run LynxExplorer app locally.

#Start record

1. Connect the device to your PC via USB, and select the target application in the Tab.

2. Enter the Recorder plugin dashboard and click the Start button to activate.

3. Operate on your phone, navigate to the target page you want to record and interact with it until it reaches the desired state.

NOTE

It is especially important to note that, in order to ensure the completeness of the recorded page data, please make sure to click Start before navigating to the target page.

Here is a sample page that you can access by scanning the QR code or entering the link in LynxExplorer.

gallerysrc/GalleryComplete/index.tsx

Preview

5. Click the Stop button to end the record.

After stopping the record, the Recorder dashboard will automatically retrieve the recorded artifact from your device and provide a preview image to help you easily identify the target page.

#Page Replay

1. Artifact Hosting

The Lynx DevTool Application only provides local file hosting for each recorded artifact. If you need to share the record artifact or access it across devices, you will need to host the artifact separately.

2. Replay using LynxExplorer

Here is a sample recorded artifact that you can replay by scanning the QR code or entering the link in LynxExplorer.

copy-link

NOTE

It is especially important to note that if you are using a self-hosted artifact URL for replay, you need to append the Recorder Header to the artifact URL to indicate that the artifact is from Recorder.

Original artifact URL:

https://lynx.recorder.artifacts/LynxRecorder.json

Append the Recorder Header:

file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json

LynxExplorer can fully reproduce the recorded page.

#Integrate Recorder into your own application

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import com.lynx.devtool.recorder.LynxRecorderActivity;
import com.lynx.devtool.recorder.LynxRecorderEnv;

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        buildLynxRecorderView();
    }

    private LynxView buildLynxRecordView() {
        String url = "file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json"
        Intent intent = new Intent(this, LynxRecorderActivity.class);
        intent.putExtra(LynxRecorderEnv.getInstance().mUriKey, url);
        startActivity(intent);
    }

}

// AndroidManifest.xml
<activity
    android:name="com.lynx.devtool.recorder.LynxRecorderActivity"
    android:exported="false" />

pod 'LynxDevtool', lynxDevVersion, :subspecs => [
    'Framework',
    'LynxRecorder'
]

#import <LynxDevtool/LynxRecorderViewController.h>

#import <LynxDevtool/LynxRecorderViewController.h>

LynxRecorderViewController *recorderVC = [[LynxRecorderViewController alloc] init];
recorderVC.url = @"file://lynxrecorder?url=https://lynx.recorder.artifacts/LynxRecorder.json";
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:recorderVC];
[self presentViewController:nav animated:YES completion:nil];