NextView is a lightweight and user-friendly application designed to assist developers in optimizing the server performance of their Next.js applications. Our observability platform utilizes OpenTelemetry to trace and monitor crucial server metrics, stores the data in real time, and visualizes the time-series data in clear graphical representations on the NextView Dashboard. With easier data analysis, developers can swiftly identify bottlenecks and pinpoint areas that require server performance optimization, and thereby improve the efficiency of their applications.
- To get started, install our npm package in your Next.js application
npm i nextview-tracing
- In your next.config.js file, opt-in to the Next.js instrumentation by setting the experimental instrumentationHook to true
experimental.instrumentationHook = true;
-
Navigate to the NextView Dashboard and copy your generated API key
-
In the .env.local file in the root directory of your application (create one if it doesn’t exist), create an environment variable for your API Key
API_KEY=<Your-NextView-API-Key>
- Return to your NextView account and enter the Dashboard to see the metrics displayed!
Trace
The entire "path" of events that occurs when a request is made to an application. A trace is a collection of spans.
Span
A trace consists of spans, each of which represents an individual operation. A span contains information on the operation, such as request methods (get/post), start and end timestamps, status codes, and URL endpoints. NextView focuses on three main spans.
- Client: The span is a request to some remote service, and does not complete until a response is received. It is usually the parent of a remote server span.
- Server: The child of a remote client span that covers server-side handling of a remote request.
- Internal: The span is an internal operation within an application that does not have remote parents or children.
Action
The term "action" in the NextView application refers to a child span within a trace. A single trace typically contains a parent span and one or more child spans. While the parent span represents the request to a particular page, the child spans represent the various actions that need to be completed before that request can be fulfilled.
For more details on OpenTelemetry, please read the documentation here.
The NextView Dashboard automatically lands the Overview page that provides an overview of performance metrics for your entire Next.js application. Specific values can be seen by hovering over the graph.
Metrics displayed on the page include:
- Average page load duration (in milliseconds)
- Total number of traces
- Average span load duration
- Top 5 slowest pages
- Average duration of operations by span kind (in milliseconds) over time
By default, the overview data covers the last 24 hours. You can modify the time period using the date and time selector located in the top right corner of the dashboard.
On the left-hand sidebar, you will find a list of all the pages in your application. When selecting a specific page, you can view server performance metrics for that individual page.
Metrics displayed for each page include:
- Average page load duration (in milliseconds)
- Total number of traces
- Details on each request (duration in milliseconds, number of traces, number of executions)
- Average duration of actions (in milliseconds) over time
We welcome your contributions to the NextView product!
- Fork the repo
- Create your feature branch (
git checkout -b feature/newFeature
) and create your new feature - Commit your changes (
git commit -m 'Added [new-feature-description]'
) - Push to the branch (
git push origin feature/newFeature
) - Make a Pull Request
- The NextView Team will review the feature and approve!
Here’s a list of features being considered by our team:
- Enable multiple applications to be added to a single user account
- Incorporate additional OpenTelemetry instrumentation (Metrics and Logs) to visualize on the dashboard
- NextView is currently collecting observability metrics and allows for default visualization via Prometheus. To access metrics, users can spin up the NextView custom collector via Docker:
docker-compose up
which will automatically route all metrics data to Prometheus at the default endpoint of localhost:9090 - Incorporate metrics visualization in our own dashboard moving forward
- NextView is currently collecting observability metrics and allows for default visualization via Prometheus. To access metrics, users can spin up the NextView custom collector via Docker:
- Enable user to select time zone
- Enhance security through change password functionality
- Add comprehensive testing suite
- Add a dark mode feature
- Eduardo Zayas: GitHub | LinkedIn
- Evram Dawd: GitHub | LinkedIn
- Kinski (Jiaxin) Wu: GitHub | LinkedIn
- Scott Brasko: GitHub | LinkedIn
- SooJi Kim: GitHub | LinkedIn
Distributed under the MIT License. See LICENSE for more information.