npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nextview-tracing

v1.1.1

Published

OpenTelemetry Tracing Package for Next.js Applications

Downloads

48

Readme

PACKAGE

NextView-banner-final-900x300

TypeScript JavaScript React Tailwind MUI Recharts Node Express PostgreSQL OpenTelemetry NextJS Vite Docker GitHubActions Husky Jest

Website LinkedIn npm Medium

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

  1. To get started, install our npm package in your Next.js application
npm i nextview-tracing
  1. 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;
  1. Navigate to the NextView Dashboard and copy your generated API key

  2. 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>
  1. Start the OpenTelemetry Collector in your terminal via the Docker Command
docker-compose-up
  1. 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.

Contributors

License

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