Identify Issues and Prevent Slowdowns in your Vue.JS Apps

Rate this content

In this lightning talk, you will see: 

1. The lack of visibility on Vue.js applications. 

2. How to install the Sentry Vue.js SDK. 

3. How you can use Sentry to identify errors and slowdowns within your Vue.js App.

8 min
20 Oct, 2021


Sign in or register to post your comment.

AI Generated Video Summary

Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end. We can optimize queries to improve user experience and reduce user misery.

1. Introduction to Sentry and Code Observability

Short description:

Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process.

Hi there. My name is Simon. I'm a solutions engineer at Sentry. What we focus on is code observability. With Sentry, you can understand the health of your application from the front end to the back end.

Sentry is designed for all developers, meaning we support all major languages and frameworks, including Vue. With the Sentry SDK on your application, you can alert the necessary team members and enable your developers to optimize the developer and customer experience. The Sentry platform provides multiple perspectives on the health of your application.

But what we will be focusing on today is error monitoring and performance monitoring. To get started with Sentry, we would go to the Sentry documentation site, search for Vue, or click to see all 99 supported platforms. And in this JavaScript section, we have a link to Vue. The installation process is very easy. It's an NPM install and a few lines of code to configure Vue on your application.

2. Sentry Error Monitoring and Analysis

Short description:

What this will do is hook Sentry onto your global error handler. As users interact with your application, events and transactions are sent to Sentry. You can configure alerts to get notified of errors in real-time. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end.

What this will do is hook Sentry onto your global error handler. And as users are interacting with your application, events and transactions are sent to Sentry.

What I've got on the side here is a demo Vue app, which is very basic, but let's just take a look together. I just refreshed it for us because I've set it up so that an HTTP request is sent on page load. We'll review what that means on the performance side of things, but for now let's click onto these error buttons. And as these errors are happening, they're also being sent to Sentry. I've configured some alerts for us. So we're actually getting notified of these errors as they're happening. So on Slack, I just clicked into a notification that'll take us straight to this error. And these details on the error are all displayed in front of me. We got the error, the error message, the magnitude of this error, how many times it happened, against how many users. We also integrate with source control management systems, so we have details on maybe the commit that could have caused this as well, links to those commits, contextual information through these tags like the user details, the environment they're in. We can add our own tags, but what we probably care about the most at this point is the stack trace. So that's right below. And in a Sentry-less world, we'd be dealing more with like a minified stack trace, optimal for performance, but not great for human readability. But thankfully, Sentry helps out with that. So during our build process, we had uploaded our source maps, Sentry took that, translated the source map, the stack trace for us, and we have this beautiful human readable stack trace, including the highlighting the line where the error happened. And we see that the response that okay was false. We also know the file to take a look at as well. So let's all keep that in mind, very curious stuff.

But just below that, we have more context, a timeline of the activities in our bread crumbs. We can add our own bread crumbs as well. And this is all automatically instrumented. We can adjust the time to a more T minus format where when we hit time equals zero, we hit that internal server error. So this is all great to get more context. And if that wasn't enough, this error had happened about 50 times. So we've actually gathered all the tags from all these errors into this heat map section to the right. So with all this information, the context and content from the front end perspective, we can consider creating a new ticket or linking to an existing ticket through these integrations with issue tracking tools. I also want to bring our attention to the distributed trace feature we have in Sentry. Since we have Sentry installed on our back end as well, we see a relationship.

3. Event and Performance Analysis

Short description:

We see a child event and related error from the backend perspective. The performance health provides web vitals and a user misery score. Clicking into the homepage transaction shows the duration breakdown and operation breakdown. Most of the operation time is from HTTP client requests and sequential database queries. We can optimize these queries to improve user experience and reduce user misery. Thank you for reviewing the Vue app with me.

We see that there is a child event and a related error that we should take a look at. This is referring to that response that OK was false coming in from our back end. So if we click into this, we can see the back end tags, back end stack trace, back end breadcrumbs, everything that we see here, but just from the back end perspective.

So let's just switch gears for a moment here. There's a lot on issue side and we've got just enough time to check out the performance health that is provided by Sentry. Right away, we see our web vitals. That's how long it takes for the first thing to load, largest thing to load, input delay, stability of our page, latency over time and distribution over the past 24 hours. That was quick, right? Lightning talk. But what is standing out here is the user misery score. As I highlight over it, it gives us a definition of this metric. The same goes for all these other metrics as well.

But let's just follow our nose, click into the homepage transaction here and you can see the duration breakdown, how long it took for these transactions to complete over the past, in this case, 24 hours. We can interact with this graph highlighting a different section. That will update the time frame of course, and also the events that show up. Most of the operation is covered in this HTTP red. So clicking into an event ID, we can take a look at the operation breakdown in this waterfall type of graph. It took 15 seconds for the, about 15 seconds for this transaction, and most of the operation time was coming from this HTTP client request. And this is going to our backend, and we can see that because we got this plus icon here. We got distributed trace set up. If we didn't, we would just not see this plus icon and we can't expand it. Luckily we can, and we can see that a lot of this time is through these sequential database queries.

Now we have a way to move forward, work with our backend team, optimize these database queries, make it like an asynchronous processing type of situation, and that'll improve that user experience, reduce that user misery as well. So just to recap for a moment here. On our Vue app, we clicked a few of these error buttons. We're notified through our integration with Slack to get to our error page. Looking at the full context and content from the front end perspective and with distributed trace could also do it from the backend perspective. On the performance health side of things, we have a summary of that health through these web vitals, followed our nose through that user misery score on that homepage transaction, took a look at the operation breakdown, and we can make some improvements on these suboptimal database queries. In any case, thank you so much for reviewing this Vue app with me. Have a wonderful rest of your conference. Thank you very much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!

Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.
For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.
Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.
Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem
IDE of choice (Inellij or VSC) installed
Nodejs + NPM

Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errors
a - When to return errors vs throw
b - Setup logging service like Sentry, LogRocket, and Bugsnag
- Forms? How to validate and handle multi-page forms
a - Use zod to validate form data in your action
b - Step through multi-page forms without losing data
- Stuck? How to patch bugs or missing features in Remix so you can move on
a - Use patch-package to quickly fix your Remix install
b - Show tool for managing multiple patches and cherry-pick open PRs
- Users? How to handle multi-tenant apps with Prisma
a - Determine tenant by host or by user
b - Multiple database or single database/multiple schemas
c - Ensures tenant data always separate from others
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.

Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.
Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
VSCode setup and an empty Vite + Vue project.

Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
- Intro 3D 
- Intro WebGL
- ThreeJS
- Why TresJS
- Installation or Stackblitz setup 
- Core Basics
- Setting up the Canvas
- Scene
- Camera
- Adding an object
- Geometries
- Arguments
- Props
- Slots
- The Loop
- UseRenderLoop composable
- Before and After rendering callbacks
- Basic Animations
- Materials
- Basic Material
- Normal Material
- Toon Material
- Lambert Material
- Standard and Physical Material
- Metalness, roughness 
- Lights
- AmbientLight
- DirectionalLight
- PointLights
- Shadows
- Textures
- Loading textures with useTextures
- Tips and tricks
- Misc
- Orbit Controls
- Loading models with Cientos
- Debugging your scene
- Performance