Proposal: DX Debug Component for Pega React Apps

[gurbinder-big]

We propose creating a DX component similar to Postman for Pega React applications. This component will allow developers to test Pega Core methods, data pages, and other Pega configurations directly from the Pega Inside, providing real-time results and helping reduce context switching between App Studio and React development.

Problem Statement:

Currently, when a Pega Architect configures a Data Page or other Pega artifacts:

1. The Pega developer must either run the Data Page in Pega or rely on API calls via Postman.
2. Or the Pega developer has to ask the React developer to check what the Data Page actually returns.
3. There are discrepancies between the payload/response from DX API (Postman) and what the React frontend receives via Pega Core methods.
4. Developers have no easy way to debug and validate configurations in the context of the actual React application.

Proposed Solution:

Develop a Debug DX Component that can be added to App Studio.

Key features:

1. List of Common Methods: Expose frequently used Pega Core methods (getDataPage etc.).
2. Input Configuration: Allow developers to configure input parameters for each method.
3. Result Preview: Show the exact output returned by Pega Core methods in the React app.
4. Export Feature: Developers can export a method along with its configuration, input parameters, and sample response. This enables frontend developers to rely on these exports for faster integration and testing.

Example
For instance, let’s take an example of getDataPage.

In the documentation for the method getDataPage Here, it explains how to provide pagination parameters in the query payload (e.g., pageSize and pageNumber), but it does not show what the response contains. Specifically, important fields like totalCount or a hasMore boolean are missing from the documentation. These fields are critical for frontend developers to implement features like pagination correctly.

// Input payload
{
"pageSize": 10,
"pageNumber": 2
}

// Documented response (incomplete)
{
data: [
{
"Name" : "Mark wood",
"Role" : "Software",
"Gender" : "Male"
},
{
"Name" : "Gabe Edwards",
"Role" : "Software",
"Gender" : "Male"
}
]
fetchDateTime: "2020-06-29T11:06:24.329Z",
pageNumber: 1,
pageSize: 10
}

The official docs do not show hasMore or totalCount, which are necessary to correctly display pagination controls on the frontend. Without seeing the full response, frontend developers either have to experiment or rely on backend/Pega developers to verify the data.

In my experience, I had to go through multiple Pega developers before figuring out how to get the totalCount using the DX API, including the exact input parameters required. This process was time-consuming and error-prone.

A Debug DX Component would solve this by allowing developers to test methods like getDataPage directly in Pega Inside, see the full response including fields like hasMore and totalCount, and export configurations for frontend use—eliminating guesswork and repeated back-and-forths.