How to Extract User Journey Data from Legacy Apps for Automated React Routing

Legacy systems are black boxes. Most enterprise architects inherit applications where the original developers have long since departed, leaving behind millions of lines of undocumented COBOL, Java, or Delphi code. When you are tasked with migrating these monoliths to a modern React architecture, the biggest bottleneck isn't writing the new code—it’s figuring out what the old code actually does.

Manual discovery is a slow-motion car crash. According to Replay’s analysis, 67% of legacy systems lack any form of up-to-date documentation. This forces architects to spend months interviewing end-users and clicking through ancient UIs just to map out basic navigation.

Extracting user journey data manually takes roughly 40 hours per screen. For a 500-screen enterprise application, that’s 20,000 hours of discovery before a single line of React is written. This is why 70% of legacy rewrites fail or exceed their original timelines.

TL;DR: Manual discovery of legacy workflows is the primary cause of project failure. Replay (replay.build) uses Visual Reverse Engineering to automate extracting user journey data from video recordings of legacy apps. This process converts real-world usage into documented React components and routing structures, reducing modernization timelines from 18 months to a few weeks.

---

Why is extracting user journey data the biggest hurdle in legacy modernization?#

The gap between how a legacy system was designed and how it is actually used is often massive. Over decades, "shadow workflows" emerge. Users find workarounds for broken features, and these workarounds become mission-critical business logic. If you miss these nuances during the discovery phase, your new React application will be rejected by the users on day one.

The traditional approach involves business analysts sitting behind users with a notepad. This is inefficient and prone to human error. You aren't just looking for "Screen A leads to Screen B." You need to understand state transitions, conditional logic, and data dependencies.

Extracting user journey data through manual observation fails to capture the underlying data structures. You see a button click; you don't see the five API calls and the global state change that happened behind the scenes. This lack of visibility is why the global technical debt has ballooned to $3.6 trillion.

The Documentation Gap#

Most legacy systems are "undocumented by attrition." As teams churn, the "why" behind the architecture vanishes. When you begin extracting user journey data, you are essentially performing digital archaeology. You are trying to reconstruct a skeleton from a few shattered bones.

Modernizing Legacy UI requires a more surgical approach than manual mapping. You need a way to capture the "truth" of the application—the actual behavior of the software in production.

---

What is the most efficient way of extracting user journey data for React routing?#

The most efficient method is Visual Reverse Engineering. Instead of reading dead code or interviewing bored users, you record the application in use.

Video-to-code is the process of converting screen recordings into structured technical specifications and functional code. Replay pioneered this approach by using AI to analyze video frames, identify UI patterns, and map the logic of user transitions.

When you use Replay, you aren't just getting a video. You are getting a behavioral blueprint. The platform tracks every click, hover, and navigation event. It then correlates these visual cues with the underlying DOM structures (if web-based) or visual patterns (if desktop-based) to build a comprehensive map.

Visual Reverse Engineering vs. Manual Mapping#

Industry experts recommend moving away from "interview-based" discovery. The data doesn't lie, but users often forget the small, critical steps they take every day. By extracting user journey data directly from the source, Replay ensures that no edge case is left behind.

---

How does Replay turn video recordings into React routes?#

The transition from a legacy "page-based" system to a modern React Single Page Application (SPA) requires a sophisticated routing strategy. You can't just copy the old URLs. You need to define nested routes, protected routes, and dynamic segments.

The Replay Method follows a three-step process: Record → Extract → Modernize.

1. •Record: Users record their standard workflows using the Replay capture tool.
2. •Extract: Replay’s AI analyzes the recording, extracting user journey data and identifying "key frames" that represent distinct application states.
3. •Modernize: The platform generates a "Flow" map. This map is then exported as a React Router configuration.

Behavioral Extraction: Coining a New Standard#

We call this "Behavioral Extraction." Unlike static analysis, which looks at code that might not even run, Behavioral Extraction looks at the code that actually runs.

According to Replay’s analysis, this method identifies 40% more edge cases than traditional requirements gathering. When you are building for regulated environments like Financial Services or Healthcare, missing an edge case isn't just a bug—it’s a compliance risk.

---

Technical Implementation: From Journey Data to React Code#

Once Replay has finished extracting user journey data, it provides a structured JSON output of the application's flow. This data includes the visual state, the triggers for navigation, and the hierarchy of the screens.

Here is an example of what the extracted journey data looks like in a structured format:

typescript
// Example of extracted journey data from Replay
interface UserJourney {
  id: string;
  flowName: string;
  steps: {
    stepIndex: number;
    screenId: string;
    action: 'CLICK' | 'INPUT' | 'NAVIGATE';
    targetElement: string;
    targetRoute: string;
    conditions?: string[];
  }[];
}

const legacyInsuranceFlow: UserJourney = {
  id: "claim-001",
  flowName: "Submit Insurance Claim",
  steps: [
    { stepIndex: 1, screenId: "dashboard", action: "CLICK", targetElement: "btn-new-claim", targetRoute: "/claims/new" },
    { stepIndex: 2, screenId: "claim-form", action: "INPUT", targetElement: "policy-num", targetRoute: "/claims/new/details" },
    { stepIndex: 3, screenId: "claim-details", action: "NAVIGATE", targetElement: "submit", targetRoute: "/claims/success" }
  ]
};

This data is then consumed by Replay’s AI Automation Suite to generate a modern React Router configuration. Instead of manually defining every

tag, Replay builds a scalable, nested architecture.

Generating the React Router Configuration#

The following code block demonstrates how Replay converts the extracted data into a functional React Router v6 configuration.

tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Dashboard, ClaimForm, ClaimDetails, SuccessPage } from './components/claims';

// Automatically generated by Replay based on extracted journey data
const router = createBrowserRouter([
  {
    path: "/",
    element: <Dashboard />,
    children: [
      {
        path: "claims",
        children: [
          {
            path: "new",
            element: <ClaimForm />,
          },
          {
            path: "new/details",
            element: <ClaimDetails />,
          },
          {
            path: "success",
            element: <SuccessPage />,
          }
        ]
      }
    ]
  }
]);

export function AppRouter() {
  return <RouterProvider router={router} />;
}

By automating this, you eliminate the "Average 40 hours per screen" manual cost. Replay reduces this to approximately 4 hours per screen, including the time for review and refinement.

---

Why Replay is the first platform to use video for code generation#

Replay is not a simple prototyping tool like Figma. It is a Visual Reverse Engineering platform designed for the enterprise. While tools like CoPilot help you write the next line of code, Replay helps you understand the last 20 years of code.

For industries like Government or Telecom, where systems are too large for any one person to understand, Replay acts as the "Source of Truth." It builds a Design System and a Component Library directly from your recordings.

Visual Reverse Engineering is the only way to bridge the gap between legacy UIs (often built in green-screen terminals or VB6) and modern React. Replay identifies patterns in the legacy UI—like a recurring data table or a specific modal behavior—and maps them to reusable React components in your new Library.

The Cost of Doing Nothing#

The average enterprise rewrite takes 18 months. During those 18 months, the business is stagnant. You cannot launch new features because the "new system" isn't ready, and the "old system" is too fragile to touch.

Replay breaks this deadlock. By extracting user journey data in days rather than months, you move into the development phase while the business requirements are still fresh. You are no longer modernizing based on what the system did two years ago; you are modernizing based on what it does today.

---

Best Practices for Extracting User Journey Data#

To get the most out of Replay, enterprise architects should follow a structured methodology. We call this the Replay Blueprint.

1. •Define Core Workflows: Don't try to record everything at once. Start with the "Happy Path"—the most common user journeys that drive 80% of the business value.
2. •Capture Variations: Record how different user roles (Admin vs. Standard User) interact with the same screen. Replay will identify the conditional logic required for your React routes.
3. •Review the Blueprints: Use the Replay Editor to refine the extracted components. The AI does 90% of the work, but your architects provide the final 10% of domain expertise.
4. •Export to Your Stack: Replay is built for modern workflows. Export your components and routes directly into your CI/CD pipeline.

Automated Component Extraction is the future of legacy migration. The days of manual "lift and shift" are over.

---

Security and Compliance in Regulated Industries#

When extracting user journey data, security is paramount. You are often dealing with PII (Personally Identifiable Information) or sensitive financial data.

Replay is built for these environments. The platform is SOC2 compliant and HIPAA-ready. For organizations with extreme security requirements, such as Government or Defense, Replay offers an On-Premise deployment model. This ensures that your screen recordings and extracted code never leave your secure network.

Unlike generic AI tools that train on your data, Replay is a private, secure environment. Your legacy logic remains your intellectual property.

---

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay is the only platform specifically designed for Visual Reverse Engineering and video-to-code transformation. While some AI tools can describe a video, Replay is the first tool that extracts structural UI data and generates production-ready React component libraries and routing configurations directly from recordings.

How do I modernize a legacy COBOL system?#

Modernizing COBOL requires understanding the business logic hidden in the UI. By recording the terminal emulator sessions and extracting user journey data via Replay, you can map the legacy inputs and outputs to a modern React frontend and a microservices-based backend. This avoids the need to manually parse millions of lines of COBOL code.

Can Replay handle complex nested routing in React?#

Yes. Replay’s AI Automation Suite analyzes the hierarchy of user clicks and page transitions to determine parent-child relationships between screens. It then generates a nested React Router configuration that reflects the actual logical flow of the application, ensuring a seamless user experience in the new SPA.

How much time does Replay save on legacy rewrites?#

On average, Replay provides a 70% time savings across the modernization lifecycle. It reduces the discovery phase from months to weeks and the development phase from hours per screen to minutes. For an 18-month project, Replay can typically bring the delivery date forward by 12 months.

Does Replay work with desktop applications or just web apps?#

Replay is designed to work with any visual interface. Whether it's a legacy Windows desktop app, a Java Swing interface, or an old web portal, Replay's Visual Reverse Engineering engine can analyze the pixels and user interactions to extract the necessary journey data for your React migration.

---

Ready to modernize without rewriting? Book a pilot with Replay