This document provides guidance on some key metrics to track when logging and monitoring a frontend application at Dwarves Foundation.
Frontend applications receive a lot of user interactions and unexpected errors can arise quickly. To help developers catch and resolve these errors easily, we need a tool can:
- Integrate to the staging and dev environments in order to catch any new issues before they become production bugs.
- Group similar error events together in one table so we can locate and resolve the errors more quickly.
- Make sure application errors can be identified by the times at which they occur, as well as which users were affected.
- Prioritize error reports based on impact so that we can focus attention on the errors most likely to be happening.
- Notify responsible developers as soon as possible when production issues arise so they can take immediate action.
- Link errors to management tools to prevent missing these errors.
- Ensure that issues are updated with current statuses.
In light of these criteria, we chose Sentry as the platform with which to monitor issues happening on our client side.
To provide users with the best experience, it is important to know how good your application is. The performance insights feature of DevTools allows you to measure which areas of your application are performing well and where improvements can be made.
- Loading time: the main content should load quickly.
- Interactivity: how much time it takes to respond when users interact with our application.
- Visual stability: the content must be visually stable and without unexpected changes in layout.
If your application is compatible with SEO engines, you can check its PageSpeed Insight scores on the Google Developers website. This will show you all of your application's metric scores for each page URL and how to improve it so that you can improve it metric by metric.
If a site is using authentication, PageSpeed Insights will be unable to check it. We need to use Lighthouse Google Extension to check for the same metrics as PageSpeed Insight.
To track all page loading time, we should install tracking code to your application like Google Analytics and Mix Panel. These tools can generate detailed reports that help us understand and improve our application.
Lighthouse helps you improve the start-up performance of your website by identifying optimization opportunities. You can find details on this document to help you identify and fix the issues that slow down your site.
In addition, We use Webpack Bundle Analyzer to identify which code bundles are large and need to be optimized with code splitting or a reduction in third-party modules. Tools such as BundlePhobia are used to compare or find alias packages in order to reduce the bundle size.
This metric will be difficult to monitor and maintain because there are many different device sizes and browser engines in use today. To address this problem we must follow responsive design standards and use automation tools that check on multiple devices, reporting their results back to us.
We recommend using BrowserStack to run automated testing in CI/CD, and sending us a report after any releases.
We use Google Analytics on our projects by default to log important user interactions. In addition, custom events can be set for specific goals based on Marketing team requirements.
Based on analytic data, we can identify which page needs to be improved to decrease bounce rate and fix broken links.