Use logrocket to record Redux logs — Sitepoint in the production environment

Time:2021-9-15

Original link

Troubleshooting problems in web applications is difficult. Those intractable JS errors, bugs reported by users, and issues in QA system. Solving these problems that affect users is an eternal struggle. These are only obvious problems. The fact is that most bugs have never been reported, because when users have a bad experience with the application, they will no longer use it or swallow it.
Use logrocket to record Redux logs -- Sitepoint in the production environment

In order to solve this problem, more and more developers have introduced front-end logging tools, because the current state management library, like Redux, has reserved rich tracking log interfaces. In the production environment, recording actions and states makes it easy to understand bugs and issues reported by users

In this article, I will show you how to use logrocket to record Redux logs. Then, I’ll discuss some techniques that make it easy to debug Redux applications.

This article was originally published inlogrocket.comCome on. It is reproduced here with the authorization of the author. If you like this article, you can follow Ben’s other articlesarticle。 If you want to know more about Redux, why not sign up for a Sitepoint account? Here is our latestcourse

Logrocket: video recorder for web application

Use logrocket to record Redux logs -- Sitepoint in the production environment

LogRocketIs a new developer tool. It is like a video recorder of a web application, which can record everything that happens on your page. It applies to any app, no matter what framework you use. For react, Redux, vue.js and angular, corresponding plug-ins are available. Through logrocket, you can play back the session information of the bug or the issue fed back by the user, so as to quickly locate the problem.

In addition to recording Redux action and state, logrocket can also record console console logs, JS errors, stack information, network requests / responses (including header and ResponseBody), browser metadata and user-defined logs. It can also monitor the DOM to record HTML and CSS on the page and restore pixel level video, even the most complex single page applications.

Start using logrocket

Using logrocket is very simple. Just add a few lines of code to your application:

  1. usenpm i --save logrocketInstall

  2. stayhttps://app.logrocket.comCreate a free account on and create your app ID

  3. Initialize logrocket in your application

    import LogRocket from 'logrocket';
    // Initialize LogRocket with your app ID
    LogRocket.init(<your_application_id>);
  1. Add Redux Middleware

    import { applyMiddleware, createStore } from 'redux';
    const store = createStore(
      reducer, // your app reducer
      applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
    );

This is the basic usage

Logrocket is also implemented for other fluxes, such asngrxandvuex, a plug-in is provided, you canhereGet more details

–Advertising–

Playback user session

Use logrocket to record Redux logs -- Sitepoint in the production environment

Playing back a session in logrocket is like watching it happen step by step in your own browser. You can view the detailed action payload, previous status and next status in Redux actions

Use logrocket to record Redux logs -- Sitepoint in the production environment

Logrocket captures the network request and response. You can view the details of the headers and body of a request. The waterfall chart below shows that it is time-consuming and can easily distinguish which requests are slow or which potential network competition exists.

Use logrocket to record Redux logs -- Sitepoint in the production environment

Sometimes, it is not enough to check bugs only by Redux logs, especially when checking problems reported by users. Logrocket video playback can help you view the user interface at that time

Because the video is actually a DOM reconstruction process (not a real video), you can check HTML and CSS to troubleshoot UI bugs, or fast forward at twice the speed to understand what users do in the app when they encounter problems.

Integrate Redux logs into your workflow

Replaying user sessions and Redux logs is undoubtedly very helpful to the whole development process.

Fix bug

Use logrocket to record Redux logs -- Sitepoint in the production environment

Logrocket, like sentry and bugsnag, integrates an error reporting tool to allow you to view Redux logs and video records of each bug. This is not only helpful for fixing bugs, but also helps to understand the impact range of errors. After all, some JS errors are completely unaffected. By viewing the video, you can judge whether the error will really affect the user’s operation or whether it can be ignored.

Support

Usually, when users report a problem, they can’t give enough context to judge what happened.

If you are using an imageIntercomYou can directly integrate logrocket into the chat tool, so that whenever users start chatting, you can insert a record link.

Use logrocket to record Redux logs -- Sitepoint in the production environment

If you integrate a more general analysis tool, you can call its tracking API interface to add a record link, as follows:

LogRocket.getSessionURL(function (sessionURL) {
  analytics.track('LogRocket recording', sessionURL);
})

Create as many Redux logs as possible in the production environment

In all Redux applications, production environment logging is very useful. Through good design, you can make the log record the most effective and ensure that these logs are sufficient to troubleshoot the problem.

Keep as much status information as possible in redux

I don’t want to go into rdux state here. When you decide whether to put some data into the state, ask yourself whether these states can help you troubleshoot the problem. If the answer is yes, put them in state. When the application crashes or users encounter problems, they will be recorded.

Get twice the result with half the effort data request Library

Like for graphqlapollo-client, using restredux-querySuch a library can help you grab data from network requests. They use Redux as a persistence layer, which means that when debugging problems, you can view your Redux log to see what data the client has obtained

If you prefer a simple method, you can not use these data pulling frameworks, but simply dispatch action when you are ready to send and receive requests.

Use Redux to handle unknown data sources

When from WebSockets, localstorage, indexeddb, orDate()When accessing data in, consider using dispatch action, so that you can debug easily in the future. For example, when listening to a websocket, you can dispatch an action for each message, so that you can see the data in the Redux log

Consider other console APIs

Console methods, such asconsole.time(),console.count()andconsole.group(), you can add rich data to your log, such as the rendering number of react components, animation time and component life cycle log. If you are interested in these, you can check myAnother article

Compile and upload source map to logrocket

Logrocket supports source map. You can useCommand upload。 In this way, you can see JS error stack, Redux action, console log and network request in the code

conclusion

Both react and Redux are praised as applications that can create maintainability. Recording Redux data in the production environment is very useful because bugs and problems reported by users can be debugged by viewing Redux status, network requests and DOM.

Using logrocket in Redux logs can simplify the bug fix process. You canStart using logrocket