Exchange Debugger UI

The Issue 👀

Here at Pulsepoint, we have an internal tool that allows us to capture responses from our publishers and buyers. These allow us to dig down into the information that is being sent by our publishers / buyers.

Each response capture is over 1700 lines of JSON and looks like the following:

[
	{
		"request": {
			"requestContext": {
				"xyzBidRequest": {
					"askPrice": 1,
					"sspBidFloor": 0.00,
					"performancePrice": 0,
					"altTagId": 0,
					"bhTokens": "",
					"segmentsToUid": {
					},
					"compressedData": "",
					"retargetingCategoryIds": "",
					"retargetingLanguageIds": "",
					"adTagId": 123456,
					"adTagGroupId": 123456,
					"network": "XYZ",
					"publisherId": 123456,
					"tagSizeId": 4,
					"contextualInfo": {
						"channelIds": [
							0,
							0,
							0
						],
						"contextualized": false
					},
          ...

As you can imagine locating what you need can be challenging. Especially when the user creates more than one capture. The internal tool has the capability of pulling 500 captures. That is over 850,000 lines of JSON to check though.

The user would have to use a Find feature within a text editor or use a tool such as JQPlay which can be daunting for non tech users.

The Solution ⚡️

The solution here is a simple UI which pulls the data from the created captures via the internal tools API. The UI displays a selection of buttons, each button is assigned to is own utility function via an onClick method. One of the utility functions is below:

const askPrice = () => {
  return data.map(
    (result) => result.request.requestContext.mpcBidRequest.askPrice
  );
};

This will return every askPrice from the response. Sometimes we can capture up to 100 responses. That is potentially over 170,000 lines of data. This is where you can see these utility functions making easy work of the response.

The mapped data is there populated below allowing the user to just see what they're looking for, for each one of the responses.

Error Handling

We need to give the user some good feedback for when the response they're trying to generate doesn't load. For this we have three flashes

Success

success

This message means that their capture has been imported into the UI and you cant click through all the buttons.

Warning

warning

When a user sees this message this means that their capture hasn’t generated any logs.

Danger

danger

If a user sees this, it means that they haven’t entered a name for their capture.

2022 No rights reserved.
3D Heart