alvin-cheung/nextview

NextView is an easy-to-use and lightweight toolkit for measuring performance of server-side rendering requests in your Next.js application

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.

Getting Started

1. To get started, install our npm package in your Next.js application

npm i nextview-tracing

2. In your next.config.js file, opt-in to the Next.js instrumentation by setting the experimental instrumentationHook to true

experimental.instrumentationHook = true;

3. Navigate to the NextView Dashboard and copy your generated API key

4. 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>

5. Return to your NextView account and enter the Dashboard to see the metrics displayed!

Key Concepts in OpenTelemetry

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.

User Guidelines

Overview Page

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.

User's App Page(s)

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

Contribution Guidelines

Contribution Method

We welcome your contributions to the NextView product!

1. Fork the repo
2. Create your feature branch (git checkout -b feature/newFeature) and create your new feature
3. Commit your changes (git commit -m 'Added [new-feature-description]')
4. Push to the branch (git push origin feature/newFeature)
5. Make a Pull Request
6. The NextView Team will review the feature and approve!

Looking Ahead

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
• Enable user to select time zone
• Enhance security through change password functionality
• Add comprehensive testing suite
• Add a dark mode feature

Contributors

• Eduardo Zayas: GitHub | LinkedIn
• Evram Dawd: GitHub | LinkedIn
• Kinski (Jiaxin) Wu: GitHub | LinkedIn
• Scott Brasko: GitHub | LinkedIn
• SooJi Kim: GitHub | LinkedIn

License

Distributed under the MIT License. See LICENSE for more information.