Webhook Nodes for Taplytics Journey Builder

Webhook nodes are one of the several upcoming additions to the Taplytics Journey Builder tool. This feature enables users to incorporate their own push notifications or emailing API’s to the journey workflow. By utilizing webhooks, a user can trigger a push notification based on given conditions and send data from the Taplytics Journey platform to other systems in real-time. 

I was very excited to be able to work on the initial iterations of this feature during my co-op term at Taplytics. Being able to work on a feature from scratch has been a really good learning experience as I was able to implement backend and frontend portions of the feature. On a high level, I was in charge of working on sections of the webhook modal such as the test webhook functionality and the test results panel.

Visual Interface

For the webhook modal interface, I initially integrated some state management to the existing buttons. For example, the save webhook button is disabled when a webhook test fails, a webhook isn’t tested at all, or the user changes a field in the webhook modal. Next, I worked on the test results panel which was made using a custom component called JSONEditor. This custom component utilizes a JavaScript library called the Ace Editor. One of the challenges I faced when implementing this section was managing the states between two JSONEditor components. Since the webhook modal requires a JSONEditor for the user to input a request body as well as a JSONEditor for displaying the test results, I had to manage two components with different states. One specific issue I ran into while implementing the two JSONEditors was that they looked exactly the same even though I passed each component different properties. I later realized that each of the JSONEditor components required a unique key property to give the elements a stable identity and also help React identify which items are added and changed individually. I knew the implementation was successful once one of the editors was rendered in 

Within the test results panel, I had the opportunity to add to the Taplytics component library with my implementation of the TLResponseStatusDisplay component. This component was composed of other Taplytics components such as `TLIcon` and `TLText`. The purpose of this component was to display data related to a request such as response status and response time. The icon next to the status label was also dynamically colored based on the success/failure of the request.

Validation and Saving 

For the backend side of the webhook node, we were required to make the test request button functional. Based on the user’s input, the service would send a post, patch, or put a request to the client API specified in the URL field. The service would then receive a response from the client API which is passed back to the original user along with data such as response time and response status. For the backend, I was in charge of implementing the proxy to call the validation service. This proxy is in charge of error handling, decorating the request body, and handling the response data.

One of the difficulties I encountered while working on this proxy was error handling. Normally, we would wrap the defined endpoints with a wrapper called “asyncRoute” which includes error handling functionalities such as formatting the response. The issue in this specific scenario was that asyncRoute expects a returned promise. However, the proxy library is implemented to return callbacks so any error thrown is caught by the proxy’s error handler instead of letting it be handled by asyncRoute. Fortunately, we had an alternative error handling service available called ApiHelpers which also included functionality such as formatting error responses. Instead of handling errors with the wrapper, I was able to utilize the proxy’s built-in error handler while having the errors formatted by the ApiHelpers service.

Conclusion

Overall, working on the webhook nodes feature was really interesting and definitely a valuable learning experience. I felt that implementing the initial stages of a feature provided me with a better understanding of the impact of the feature since I was encouraged to view the feature from not only a developer’s perspective but also a design perspective. Working on this feature has definitely made my experience at Taplytics a memorable one.