Hi, I'm Dev. A couple of months ago, after integrating sockets on our page that displays order details, our production monitors started going down randomly. They would go down at various times throughout the day without any API failures. We tried reproducing the issue but were unsuccessful. Then, we tracked the production monitor's activities and replicated them exactly in the development environment, where we finally observed the failure.
On the load of the page, an API call and a socket connection were established on that page to fetch the complete order details. Whenever an event update occurred for that order, only the fields with updated values were sent via the socket response.
The Issue
Since the database in production is much larger than the one in the testing environment, API calls sometimes take longer. In such cases, if an update for the order occurs and a socket event is received, the details object would be updated with incomplete but new data. This incomplete data might be missing some necessary keys required by the frontend to load the page, resulting in page errors due to page getting rendered with incomplete data.
The Solution
We implemented a solution by maintaining a state to temporarily store the socket data. This way, we only update the order details object once the complete response from the API is received. This ensures that the data remains consistent and complete, preventing the frontend from encountering errors due to missing keys
Top comments (0)