Next.js
Track and monitor your Next.js application with Alerty
Alerty SDK is a powerful monitoring tool designed, built, and priced for the needs of developers and founders. It helps you monitor your applications, track errors, and ensure your software runs smoothly.
Features
- Error Monitoring: Automatically captures errors and their stack traces.
- Service Monitoring: Monitors the health and performance of your services.
- Customizable Alerts: Set up alerts to notify you when something goes wrong.
- Lightweight and Fast: Designed to be efficient with minimal overhead.
Tutorial Video
Getting Started
You can install the Alerty SDK via npm or yarn:
npm install @alerty/nextjs
yarn add @alerty/nextjs
In a Next.js application, you can initialize Alerty SDK in app/layout.tsx
:
import * as Alerty from "@alerty/nextjs";
Alerty.configure({
dsn: "__YOUR_DSN__",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// ...
}
Data should be flowing now!
Dashboard Overview
After setting up Alerty, you’ll have access to a comprehensive dashboard that provides insights into your application’s performance:
Experience Score
A quick overview of your site’s performance, displayed as a score out of 100. The score is calculated using Web Vitals metrics.
- A score over 90 is recommended for a good user experience.
- You can click on “how the Experience Score is calculated” to learn more about the metrics used.
Top Improvements by Route
This section identifies which routes need the most attention, helping you prioritize optimizations.
- Routes are listed with their respective scores.
- A score of 0 indicates significant room for improvement.
Network Requests
Provides a detailed breakdown of API calls and network activity:
- Domain: The URL of the service being called.
- Time Spent (minutes): Total time spent on requests to each domain.
- Requests: Number of requests made to each domain.
This helps you identify which external services or APIs might be impacting your application’s performance.
Monitors
Real-time status indicators for critical aspects of your application:
- App Crashes: Indicates if your application is experiencing crashes.
- App Performance: Overall performance status of your app.
Each monitor shows an “OK” status when things are running smoothly, and updates every minute.
Events
Visualizes event volume over time, allowing you to spot trends and anomalies:
- The graph shows event frequency over a 12-hour period.
- You can expand the “Show Event Details” section for more in-depth information.
Additional Features
- View DSN: Easily access your Data Source Name for configuration.
- Edit Resource: Quickly make changes to your monitored resource settings.
Best Practices
- Regularly check your Experience Score and work on improving it, especially for scores below 90.
- Investigate routes with low scores in the “Top Improvements by Route” section.
- Monitor network requests to optimize API calls and reduce time spent on external services.
- Set up alerts for the Monitors to be notified immediately of any issues.
- Use the Events graph to identify unusual patterns or spikes in activity.
For more detailed information on how to leverage Alerty’s features, please refer to our full documentation.