Redux Logging in Production with LogRocket

LogRocket: Your web application DVR, helping Redux application debugging

LogRocket is a revolutionary developer tool, like a web application's DVR, recording every event that happens on a website. It records Redux actions and status, console logs, JavaScript errors, stack traces, network requests/responses, browser metadata and custom logs, and reproduces pixel-level precise videos of even the most complex single-page applications.

It is difficult to understand problems in web applications. From mysterious JavaScript errors, bugs reported by users to problems found in QA, developers have been working hard to solve problems that affect users. And these are just obvious problems – most bugs are never actually reported because users who encounter bad experiences just leave or endure it silently.

To solve this problem, developers are increasingly adopting front-end logging tools, as modern state management libraries like Redux leave a rich audit trail. Recording actions and status in production environments makes it easy to understand bugs and user-reported issues.

This article will show you how to set up Redux logging using LogRocket and then discuss techniques to make Redux applications easier to debug.

This article was originally published on logrocket.com and was reproduced here with the permission of the author.

LogRocket: DVR for web applications

LogRocket is a new type of developer tool. It's like a DVR for a web application, recording everything that actually happens on a website. It works perfectly with any application, no matter what framework it is used, and has plugins that can record extra context from React, Redux, Vue.js, and Angular. With LogRocket, you can replay sessions containing bugs or user issues to quickly understand the root cause without guessing why the problem occurs. In addition to logging Redux actions and status, LogRocket also records console logs, JavaScript errors, stack traces, network requests/responses with headers and bodies, browser metadata and custom logs. It also detects the DOM to record HTML and CSS on the page, reproducing pixel-level precise videos of even the most complex single-page applications.

Set LogRocket

Setting up LogRocket is simple, you only need to add a few lines of code to your app:

Install using npm:

.
1. npm i --save logrocketCreate a free account at https://app.logrocket.com and note your application ID.
2. Initialize LogRocket in your app:

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

Add Redux middleware:

This is the basic setup – here is everything you need to start using LogRocket!

import { applyMiddleware, createStore } from 'redux';
const store = createStore(
  reducer, // 您的应用reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
);

LogRocket also provides plugins for other Flux implementations such as ngrx and vuex, which you can read about here.

Replay user session

Replaying a session in LogRocket is like seeing it happening in your own browser. You can check Redux actions, including the full action payload and previous and next status.

LogRocket captures network requests and responses and allows you to dig into specific requests and view headers and bodies. The waterfall chart displays timing, allowing you to easily see which requests are slow, or if potential race conditions have occurred.

Sometimes, Redux logs alone are not enough to understand bugs, especially when dealing with user-reported issues. LogRocket's video playback helps by allowing you to see exactly what users see in your app.

Since this video is actually a rebuild of the DOM (rather than a real video), you can check HTML/CSS for visual bugs, or play at 2x speed to quickly understand how users do it in the app when dealing with support issues What happened.

Integrate Redux logging into your workflow

Ability to replay user sessions and view Redux logs is very useful throughout the development workflow.

Fix bug

LogRocket integrates with bug reporting tools such as Sentry and Bugsnag, allowing you to view Redux logs and videos for each bug. This not only helps fix bugs, but also helps understand the impact of the error, as some JavaScript errors are totally irrelevant. By watching the video when the error occurs, you can easily tell whether it actually affects the user or can be ignored.

Support

Users often report problems, but do not provide enough context to understand exactly what is going on.

If you are using a chat support tool like Intercom, you can directly integrate LogRocket to add comments with recorded URLs when users start chatting.

If you are integrating with a more general analytics tool, you can add a recording URL using the tracking API as shown below:

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

Make full use of Redux logging in production environments

Production environment logging is immediately useful in all Redux applications, but by building your application with logging in mind, you can ensure that logging is most useful when debugging issues.

Try to save most of the state in Redux

I don't want to discuss the argument between local state and Redux state here, but when deciding whether a given state part should be in Redux, ask yourself if it helps to see that state when debugging the question. If the answer is yes, consider putting that state into Redux so that it will be logged along with crash reports and user issues.

Use data acquisition library using Redux

Libraries like apollo-client (for GraphQL) and redux-query (for REST) ​​all facilitate data fetching from the network through Redux. They use Redux as the persistence layer, which means that when debugging the problem, you can check the Redux logs to see what data these clients have fetched.

If you prefer a simpler approach, you can write your own data to get the "framework" by simply scheduling explicit actions when querying and receiving data from the network.

Using Redux to handle sources of uncertainty

When accessing data from APIs such as websockets, local storage, IndexedDB and even Date(), consider scheduling Redux actions containing results so you can easily debug this data in the future. For example, when listening to a websocket, schedule a Redux action on each message - so that you can see the data in the Redux log.

Use other console APIs

Console methods like console.time(), console.count(), and console.group() allow you to add rich data to the logs, such as React component rendering counts, transaction timing, and component lifecycle logs.

Build and upload source map to LogRocket

LogRocket supports source mapping, which you can upload via cli. By doing this, you can see JavaScript errors, Redux actions, console logs, and symbolized stack traces for network requests, which allows you to see where specific actions are triggered in your code.

Conclusion

React and Redux are often hailed as tools for building maintainable applications—one of the important components is debugability. Recording Redux data in a production environment can provide such insights because bugs and other user-reported issues can be easily debugged by checking Redux status, network requests, and DOM.

Redux logging with LogRocket can greatly simplify the work of fixing bugs and supporting users. You can start using LogRocket here.

FAQs (FAQs) on Redux logging in production environments using LogRocket

What are the main functions of LogRocket in Redux logging?

LogRocket is a powerful tool that helps developers track, record and understand user interactions in their web applications. It provides a comprehensive view of what is happening in the application, including network requests, console logs, and even user actions. This makes it easier to identify and fix problems, as developers can see exactly what causes the problem. LogRocket is especially useful in Redux applications because it can log Redux actions and states, thus clearly displaying event sequences.

How is LogRocket different from other logging tools?

LogRocket stands out for its session replay feature. This feature allows developers to replay problematic sessions and accurately view what users see. This can be invaluable in identifying and fixing bugs. Additionally, LogRocket integrates seamlessly with Redux, making it easy to log Redux actions and state.

How to integrate LogRocket with my Redux application?

Integrating LogRocket with Redux applications is very simple. After installing LogRocket through npm, you can initialize it in the application's entry file. You can then use LogRocket's Redux middleware to log Redux actions and status. This middleware can be added when creating Redux storage.

Can I use LogRocket in a production environment?

Yes, LogRocket is designed for use in production environments. It has a variety of features that make it suitable for production use, such as privacy controls that protect sensitive user data and performance optimizations that ensure that applications do not slow down.

What types of data can LogRocket record?

LogRocket can record a variety of data, including network requests, console logs, Redux actions and status, and user interaction. This provides a comprehensive view of what is happening in the application, making it easier to identify and fix issues.

How does LogRocket handle sensitive user data?

LogRocket has powerful privacy controls that can protect sensitive user data. You can configure these controls to prevent certain data from being recorded. For example, you can prevent logging form input to protect user passwords.

Can I use LogRocket with other state management libraries?

Yes, while LogRocket integrates seamlessly with Redux, it can also be used with other state management libraries. It provides middleware for several popular libraries, including MobX and Vuex.

How does LogRocket help debug?

LogRocket's session replay feature can be very valuable in debugging. By replaying the problematic session, developers can view exactly what users see, making it easier to identify and fix bugs. Additionally, LogRocket's comprehensive logging of network requests, console logs, and user interactions can provide valuable context when debugging.

Can I customize the data recorded by LogRocket?

Yes, LogRocket is highly customizable. You can configure the data to be logged, and you can also add custom logs to track specific events or states in your application.

Is LogRocket suitable for large applications?

Yes, LogRocket is designed to handle large applications. It has performance optimization to ensure that the application is not slowed down and can handle a lot of logs. In addition, LogRocket's powerful search and filtering capabilities make it easy to find relevant logs in large datasets.

The above is the detailed content of Redux Logging in Production with LogRocket. For more information, please follow other related articles on the PHP Chinese website!