Setting Up an Observable System for React/Redux and Node.js
In today’s complex application landscape, understanding system behavior is crucial for identifying and fixing problems. Observability, a measure of how well we can understand a system from the work it does, helps explain why a system is behaving a certain way. In this article, we’ll set up an observable system for a React/Redux app and a Node.js back end deployed with Docker, using LogRocket, DataDog, and Honeycomb.
Why Observability Matters
Observability is often confused with monitoring, but while monitoring identifies known issues, observability explains why an issue occurred in the first place. With the rise of client-side JavaScript apps and serverless back ends, traditional monitoring approaches are no longer sufficient. We need a way to quickly get visibility into how our app is performing and handling errors.
The Need for Context
To determine what went wrong with an app, we need context across the full stack – front end, back end, and infrastructure. This requires a quick way to gather data about the entire stack and finalize a solution. An observable system should emit metrics/logs/traces, providing a complete picture of system behavior.
React with LogRocket
LogRocket helps us understand user behavior by capturing logs and session recordings from our app. Error tracking is still essential, even with end-to-end testing. LogRocket makes it easy to identify which section of users is affected, reproduce errors in a development setup, and filter out noise.
Setting Up LogRocket
To set up LogRocket, sign up on their website, install the library via npm, and initialize LogRocket in your app. Add the Redux middleware to start receiving events and replay them on your dashboard. Tag each event to a user by triggering the identify method once a user is authenticated.
Uptime Monitoring and Tracing with DataDog
DataDog aggregates metrics and events across the full DevOps stack. Assuming a typical microservice architecture, we’ll use DataDog to monitor uptime and tracing. Set up a dashboard to observe different metrics of the underlying cloud cluster where the application’s Docker container is running.
Threshold Alerts and Monitors
Create threshold alerts to notify your team when metric conditions are met. Set up monitors to check metrics, integration availability, network endpoints, and more. Use these monitors to trigger alerts when a metric crosses a threshold.
APM – dd-trace
Tracing brings visibility to the application stack, especially in a multi-container setup. Enable APM in DataDog Agent and instrument your code to start tracing request/response on your back-end server.
Visualize with Honeycomb
Honeycomb provides a visual representation of what’s going on with our application. Set up Honeycomb to capture metrics from the back end and get started with their Node.js integration. Apply filters, break down data by different parameters, and query to see if recent deployments are working fine.
Adding Safeguards
Follow best practices across the stack to minimize what can go wrong in production. Ensure prudent error handling, stable infrastructure provider, and up-to-date tooling to provide basic safeguards for your application.
Summary
Leverage built-in integrations of all the tools to set up an observable system. Plugin integration for common frameworks/libraries across the stack is key. Observability comes at a cost, but it helps solve mission-critical business issues at a faster rate as the application/business scales.