Vue

Vue.js Performance Monitoring

Get deeper visibility into your Vue.js front-end app. Debug Vue.js apps and improve web app performance with powerful insights using Vue.js monitoring.

Vue.js error and performance monitoring in real-time

Atatus monitors Vue.js performance to provide visibility into how actual users experience your browser-side application. Atatus automatically captures Vue.js errors and pinpoints the root cause of the crashes.

Vue.js Performance Monitoring
Web VitalsWeb Vitals

Optimize your user experience quality

We gather critical performance data for Google's Core Web Vitals and Other Web Vitals that helps you understand what’s the cause of the slow performance at the user level if they are having troubling interacting with the page, seeing sudden changes or having slow loading times.

Core metrics

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • First Contentful Paint (FCP)
  • Time to First Byte (TTFB)
  • Cumulative Layout Shift (CLS)
Learn moreLearn More
Google Core Web Vitals
Slow pagesSlow resources

Slow pages leads to more bounce rate - Fix your slow ones!

Gain insights into why your customers were affected by bad front end performance and slow page load. Inspect individual users having poor experiences due to slow pages, Vue.js exceptions or failing AJAX calls. Quickly see how network or geographical region is affecting your end users' experience. Session traces provides waterfall view of the session to identify slow Vue.js assets, long load times and errors.

Learn moreLearn More
Vue.js Page Load Performance
XHR CallsXHR Calls

Get full picture of AJAX requests.

Examine all XHR requests sent by your Vue.js app. Monitor and measure XHR calls' response times and failure rates. Identify slow and failed AJAX calls and optimize request performance. Slice and dice AJAX calls in real time—based on browser, user, version, tag and other attributes.

Learn moreLearn More
Vue.js AJAX Monitoring
Exception RateFix issues

Quickly diagnose and fix Vue.js errors

Every Vue.js error is tracked and captured with full stacktrace and exact line of source code is highlighted to make bug fixing easier. Get all the essential data such as class, message, URL, request agent, version etc to fix the Vue.js exceptions. Identify buggy API or third party services by investigating failure rates and application crashes. Get alerts for application errors and exceptions via Email, Slack, PagerDuty, or using webhooks.

Learn moreLearn More
Vue.js Error Tracking
SPA MonitoringSPA Monitoring

Discover slow single page route changes

See how much time each route changes takes. Drill down into Vue.js SPA response times, AJAX breakdown of the route change, slow routes breakdown with trace. Get a detailed view along with the impact that it has on your end-user experience.

Learn moreLearn More
Vue.js SPA Monitoring

Start resolving frontend performance issues

Try it free. No credit card required. Instant set-up.

Awesome Support

Great product for tracking issues on Production

"We were struggling with site speed on the Production side and it wasn't clear what was causing it. With Atatus we were able to pinpoint exactly what wrong, and after a fix, we saw the speed improvements right away on the performance charts And the installation was so easy. I definitely recommend trying it."

— Ivan S, Engineering Manager, iSavta

Atatus supports major frontend frameworks seamlessly

1. Install atatus-js from the npm registry:

npm install --save atatus-spa

  Import and initialize atatus to monitor your application:

import * as atatus from  "atatus-spa";

atatus.config ("YOUR_API_KEY").install();

2. To collect errors from Vue app, you need to set up the Vue.config.errorHandler handler for your app.

import Vue from  "vue";
import * as atatus from  "atatus-spa";

function trackVueExceptions() {
    if (!Vue || !Vue.config) return;

    if (!atatus || !atatus.config) return;
    var _oldOnError = Vue.config.errorHandler;
    Vue.config.errorHandler = function VueErrorHandler(error, vm) {
       atatus.notify(error, {
          extra: {
            propsData: vm.$options.propsData
          }
       });

       if (typeof _oldOnError === 'function') {
          _oldOnError.call(this, error, vm);
       }
    };
}

trackVueExceptions();

3. To verify that your integration is working, call notify() in your application:

atatus.notify(new Error("Test Atatus Setup"));

Deep dive into your Vue app's performance

Setup

Two Line Setup

Adding two lines of code gets you started with tracking your Vue app's performance and errors. Start seeing immediately what are the pain points your users are facing.

Source Maps

Source Maps

Make readable stack traces in your errors by providing source maps. Un-minifying JavaScript lets you view source code in their original form, which helps in debugging minified code from production.

Block Bots & Malicious IPs

Block Bots & Malicious IPs

You can filter Bots, Domains, IPs, User Agents and many other configurations in making sure that you get actionable insights from the real data that affects your customers.

Smart notifications

Smart notifications

Setup alerts to automatically monitor your applications for increase in response time, API failures, or error rate and much more. Get notified through various channels, including Slack, Teams, Email, PagerDuty and more.

Collaborate

Collaborate

Invite your team members and work together to resolve issues. Add comments to the Vue errors, so that your team members who view the errors, get to know what and how the fix was made.

Search data

Slice and Dice data

Get your questions answered. Use custom queries to slice and dice the data by transaction, URL, error, user, browser, host OS and more.

Unlimited websites

Unlimited websites

Track all your websites in one place. Add your production, dev, staging, QA to monitor your websites through the complete software development cycle.

Email digests

Email digests

Don't miss out on your Vue app's performance and error stats. Atatus can send you weekly and monthly summaries directly to your inbox.

Ticketing Inetgration

Ticketing Integration

Maintain your workflow with Atatus issues in various Project Management integrations. We support Jira, Asana, BugHerd, GitHub, GitLab, and more.

Ready to see actionable data?

Avail Atatus features for 14 days free-trial. No credit card required. Instant set-up.