Today we’re excited to announce official support for Angular and ngrx in LogRocket. Using the new logrocket-ngrx npm package, developers can log actoins/state in production, helping fix bugs and user issues faster.
What is LogRocket?
LogRocket is the first production logging tool for webapps. It has a highly-optimized JavaScript SDK and plugins for Redux, @ngrx/store, and Vuex.
In addition to logging actions/state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Why it helps
Vuex logs often hold the key to solving errors and user-reported issues.
LogRocket integrates with error reporting tools like Sentry and Bugsnag to let you see Vuex logs and video for every bug. This is not only helpful for fixing bugs, but also for understanding error impact, since some JavaScript errors are completely innocuous. By watching the video and viewing logs from when an error occurred, you can easily tell if it actually affects users, or can be ignored.
@ngrx/store plugin
The ngrx plugin logs actions/state in your app. Setup requires just a few lines of code:
import createNgrxMiddleware from 'logrocket-ngrx';const logrocketMiddleware = createNgrxMiddleware(LogRocket, opts);const productionReducer = compose( stateSetter, logrocketMiddleware, combineReducers) (reducers);
By default, all mutations are logged, but the plugin lets you specify a sanitizer function to prevent certain mutations from being logged, or hide sensitive information from mutation payloads.
ngrx action search
LogRocket has a powerful search interface that lets you search for particular Vuex mutations across sessions. You can combine search filters to find mutations for a given user, or on a certain page in your app.
Getting Started
To get started with LogRocket, create a free account at https://logrocket.com.
