Nextview-tracing NPM

PACKAGE

NextView-banner-final-900x300

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 instrumentation data, stores the information 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

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 key to true in the nextConfig object

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 two environment variables, one for your API Key and one for your service’s name

API_KEY=<Your-NextView-API-Key>
Service_Name=<Name-Of-Your-Service>

Start the OpenTelemetry Collector in your terminal via the Docker Command

docker-compose-up

Return to your NextView account and enter the Dashboard to see your instrumentation data displayed!

Key Concepts in OpenTelemetry

Trace

Span

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

For more details on OpenTelemetry, please read the documentation here.