Announcing LogRocket for Vue.js

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.

🚀 Sign up for The Replay newsletter

The Replay is a weekly newsletter for dev and engineering leaders.

Delivered once a week, it's your curated guide to the most important conversations around frontend dev, emerging AI tools, and the state of modern software.

LogRocket understands everything users do in your Vue apps.

Debugging Vue.js applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Vue mutations and actions for all of your users in production, try LogRocket.

LogRocket lets you replay user sessions, eliminating guesswork by showing exactly what users experienced. It captures console logs, errors, network requests, and pixel-perfect DOM recordings — compatible with all frameworks.

With Galileo AI, you can instantly identify and explain user struggles with automated monitoring of your entire product experience.

Modernize how you debug your Vue apps — start monitoring for free.