How to Debug Data Flow Between Frontend Plugins in Complex Web Apps

1. Background

As the KuJiale design tool evolves, services are split into finer granularity, and a single feature often requires cooperation among many services and plugins. In complex front‑end applications such as KuJiale 4.0/5.0, obtaining data across services and plugins is essential for problem investigation and precise testing.

2. Frontend Issue Localization Challenges

KuJiale’s DIY page integrates over 30 plugins, each handling specific data modules. When a data‑transfer issue occurs—e.g., adjusting doors and windows changes the ceiling model position—developers must verify data passed from the furniture plugin to the hard‑decoration plugin and vice‑versa.

2.1 Common Localization Methods

Console.log() – Directly print objects in the console. Drawback: Not allowed in production; insufficient for complex bugs.

Run a local server and debug via Chrome’s Sources panel – Accurate but requires deep code familiarity and is time‑consuming.

2.2 Summary

The local‑server approach is widely used by front‑end developers but has a high entry barrier, causing testers to rely heavily on developers and become “bug carriers.” This hampers rapid issue resolution and fine‑grained plugin testing.

3. Learning from the Backend

3.1 How to Trace Multi‑Service Data Transfer Issues

Example: a rendering anomaly where a multi‑face tile appears as a single‑face tile. The rendering service depends on data from hard‑decoration, material, product, and customization services. The investigation chain is: Rendering → Mesh Middleware → Hard‑Decoration → Material, ultimately revealing missing material images in the database.

3.2 Common Backend Data‑Retrieval Techniques

Backend methods for obtaining inter‑application data typically do not affect performance or involve personal data.

3.2.1 Directly Capture in Chrome DevTools

3.2.2 Use an Internal Package – bodyRecorder

Record request and response, upload to OSS, then retrieve logs via traceId.

3.2.3 Print Logs

3.2.4 Re‑issue Requests

For simple GET requests, reconstruct parameters and resend to obtain backend responses.

Summary: Backend data‑retrieval can be categorized into data‑recording and data‑re‑acquisition, providing inspiration for suitable front‑end solutions.

4. Investigating Front‑End Plugin Calls

4.1 Selecting the Research Object

To capture plugin‑to‑plugin data, we examined the Construction‑Drawing 3.0 plugin, which aggregates data from house‑type, hard‑decoration, soft‑decoration, and customization plugins.

4.2 Construction‑Drawing 3.0 Call Flow

When opening a plan, decoration-drawing-plugin/index.ts loads first, initializes drawingPlugin, and calls setupViewPlugin to bind faceDesign and its key, e.g., Symbol('deco-face-design'). It then creates elements via createFaceDesignElement and createUnionBorderElement, each with unique IDs.

Later, drawing-view-kaf-plugin/view.ts loads, obtains getBufferedGRep2d, and uses the drawing SDK to retrieve GRep2d for each element. For 3D tiling, createLoftPavingElement invokes createTilePavingElement.

4.3 Summary

The data exchange between the construction‑drawing plugin and the hard‑decoration plugin relies on createFaceDesignElement. Storing each call’s data would be costly and risky; instead, re‑creating the data by exposing an API and manually constructing the required DVConfig is feasible.

5. Implementing Data Re‑Retrieval

5.1 Code Implementation

Expose an API in the Hades kaf-injection module to retrieve decoration draw data by faceId.

In the cloud/BIM environment, call pyBellInjection.getDecorationDrawData(faceId) from the console to obtain hard‑decoration data.

The returned data matches element.getGRep2d(config) from the construction‑drawing plugin.

5.2 Result

Console output shows two elements (water‑jet and wall pattern). The water‑jet element contains 27 geometries, each with a deepValue indicating hierarchy and 612 sub‑geometries describing color‑map and wireframe data.

5.3 Single‑Plugin Front‑End Automation

Persist the retrieved data and run API tests on each iteration to ensure data accuracy.