Green with Envy: Tracing Network Calls Across Your Application Stack

With the rise of Server Side Rendering frameworks like Next.js and Remix and the wide spread adoption of Graphql frameworks like Apollo, tracing your applications internals has become even more challenging than before.

In traditional Single Page Applications (SPA) like vanilla React, an engineer can trace every outbound network call by simply viewing the network panel in their browser. Frameworks like Next.js shift those network calls to the server in order to prerender a page before delivering it to the client. Often, the prerender executes multiple network calls to other servers, databases, and APIs.

Graphql frameworks are powerful API tools that often aggregate multiple datasources into a single unified API, allowing consumers to craft a query specific to their use case. When a consumer submits a request, it could result in multiple network calls to different datasources.

During development, it's crucial that engineers can accurately trace and view these network calls to various systems in order to troubleshoot and optimize their systems for both scale and cost.

Envy

Envy is a zero config network tracing and telemetry viewer for development. It allows engineers to have a live view into the network requests your application stack is making during local development. Unlike production telemetry tools that send your information to vendor products, Envy allows you to see your data locally in a browser tab.

You can connect multiple Node.js based applications to the Envy Web UI and view your entire application stack when developing locally.

Envy has built in context awareness for specific types of queries such as Sanity and Graphql, and will show additional details for those types of requests.

Future

The current version of Envy is just the start. We plan to release a host of exciting new features such as:

• Customizable UI components that adapt to your specific systems
• Additional context-aware query types for common systems
• Next.js & Remix SSR request tracing and timing
• Graphql field resolver tracing and timing
• Node.js process telemetry

Getting Started

Envy is designed to get you up and running very quickly with little to no configuration.

1. Install the NPM packages

# using npm
$ npm i --save-dev @envyjs/node @envyjs/webui
# or yarn
$ yarn add --dev @envyjs/node @envyjs/webui

2. Import the package into your application

import { enableTracing } from '@envyjs/node';
enableTracing({ serviceName: 'your-node-app-name' });

// ... your app code

3. Run the Web UI alongside your application

"scripts": {
  "start": "<your application start command>",
  "start:withenvy": "concurrently \"npx @envyjs/webui\" \"npm start\""
},

Check out the full Envy Documentation to get started today.