How many times have you been asked by a product manager “how often is this feature being used?” Or there’s a mysterious crash in your app that you can’t reproduce. Or a user a reports a problem and you have to ask them for a screenshot of the page JavaScript console. It’s happened to me way too many times.
Log-Driven Development solves all of these problems. The idea is that by driving the business logic of an app via logs, we are able to automatically capture information that helps us reproduce bugs, resolve user issues, and understand user behavior without additional work.
Using Redux makes this very easy: we can just log everything and then search and investigate our logs later.
Here are a few examples of how we use Log-Driven Development at LogRocket:
We use crash reporting tools and we get a bunch of errors that look something like this:
We don’t have enough information here to reproduce the bug. However, since we are using Redux in our app, we capture the series of events that led to the problem in LogRocket:
The other day, a user told us that they were having difficulty logging in. Normally I’d have to ask a bunch of clarifying questions: “What account are you using?”, “Can you send us a screenshot?”, “Have you tried incognito mode?” In this case, we had captured all of the information in logs, and we discovered the fix without back-and-forth. Success!
Our product manager works really hard to understand what makes our users successful. He set up Heap to be able to retroactively analyze interactions, but we found that there were still a number of events that he had to ask us to manually tag in the app. I set up a Redux middleware to send all of our events to Segment: https://github.com/rangle/redux-segment and we haven’t had a problem since 🙂
redux-query for REST APIs
apollo-client for GraphQL APIs
redux-saga for asynchronous events
Happy logging!
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
This isn’t theory. It’s the exact setup you need to deliver fast, resilient apps across AWS regions with zero fluff.
Looking for a FaunaDB alternative to migrate to? Examine nine other platforms you can use and factors to consider when choosing an alternative.
From onboarding to bug tracking, these knowledge-sharing techniques keep your team aligned, reduce overhead, and build long-term technical clarity.
Learn how to build a real-time collaborative document editing app with a Node.js backend and React frontend using the WebSocket protocol.
