Today we’re excited to announce official support for Vue.js and Vuex in LogRocket. Using the new logrocket-vuex npm package, developers can log mutations in production, helping fix bugs and user issues faster.
Vue.js developers who aren’t using Vuex can still take advantage of all other LogRocket features including console and error logging, network request/response logging, and session replay (DOM recording).
What is LogRocket?
LogRocket is the first production logging tool for webapps. It has a highly-optimized JavaScript SDK and plugins for Redux, ngrx, and Vuex.
In addition to logging Vuex mutations, 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.
Vuex plugin
The Vuex plugin logs mutations to your app’s store. Setup requires just a few lines of code:
import createPlugin from 'logrocket-vuex';
const logrocketPlugin = createPlugin(LogRocket);
const store = new Vuex.Store({
// ...
plugins: [logrocketPlugin]
});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.
Vuex mutation 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.
LogRocket is the JavaScript logging and replay tool that helps you fix bugs faster. By capturing every log, network request and user session of your app, you can fix problems without back and forth.
Experience your Vue apps exactly how a user does
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
https://logrocket.com/signup/LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.
