/NetPulse

Server-side network observability for Next.js applications.

Primary LanguageJavaScriptMIT LicenseMIT

NetPulse: Next.js Server Side Observability

Getting Started

  1. Install the following two NetPulse npm packages:
npm install @netpulse/tracing @netpulse/dashboard

  1. Create a tracing.js file in the root directory of your project.

  2. Add the following code to tracing.js:

const tracing = require('@netpulse/tracing');
tracing();
  1. Inside the app or pages directory (depending on if you are using beta) create a file Dashboard.tsx and add the following code:
'use client';
import dynamic from 'next/dynamic';
const DashboardUI = dynamic(() => import('@netpulse/dashboard'), { ssr: false });
export default function Home() {
    return <DashboardUI/>;
}
  1. Finally, in your package.json add the following start script:
"tracing": "node --require ./tracing.js & ./node_modules/.bin/next dev"

You can now run your Next.js application:

npm run tracing

Open http://localhost:3000/Dashboard in the browser to view traces related to server side api calls and NoSQL / SQL database calls.

Notes

API Compatibility:

  • node-fetch
  • xmlHttpRequest
  • Node HTTP

Note: The current version of Next.js (13.2.4) uses an older version of node-fetch. As such, node-fetch (>=3.3.1) must be manually installed and imported into components that require monitoring of fetch calls

Database Compatibility:

  • MongoDB (Mongoose): >=5.9.7 <7
  • Postgresql (Pg): >=8 <9

Coming soon

As an open source project we are open to pull requests or feature requests from the developer community!

Currently prioritized features:

  • Dashboard containerization through DockerHub
  • Compatiblity with additional databases / drivers
  • Compatability with native Next.js fetch
  • Build tool update for better compatibility with ES modules (Non-dynamic import of Dashboard)