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.
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.
Sentry is used for code observability in application development, focusing on error monitoring and performance monitoring to help developers understand and improve the health of their applications from front end to back end.
Sentry supports all major programming languages and frameworks, including Vue, and provides documentation and SDKs for easy integration into these environments.
To integrate Sentry with a Vue application, you need to perform an NPM install, followed by adding a few lines of code to configure Vue. This setup hooks Sentry onto the global error handler of the application.
Sentry enhances error tracking by capturing errors as they occur, providing notifications through integrations like Slack, and displaying detailed error information including stack traces, user details, and related commits.
Sentry's distributed trace feature allows developers to track the relationship between front end and back end errors, providing a comprehensive view of issues across the application stack, which aids in quicker diagnosis and resolution.
Sentry helps improve application performance by monitoring web vitals, identifying performance bottlenecks like suboptimal database queries, and providing insights into how to optimize these areas to enhance overall user experience.
The user misery score in Sentry is a metric that evaluates user dissatisfaction based on the latency and performance issues experienced during interactions with the application. It helps developers prioritize issues impacting user experience the most.
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.
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.
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.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments