Green with Envy: Tracing Network Calls Across Your Application Stack

November 20, 2023

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.,q_auto/v1682469059/dotcom/puma-global-pay/flexible-api.png

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


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.

Related Posts

Mastering UI Testing: Crushing False Failures with GraphQL Mocking

September 20, 2023
what happens when you have UI tests running which hit your GraphQL server and subsequently fail because of issues in upstream systems?

The Evolution of urql

December 6, 2022
As Formidable and urql evolve, urql has grown to be a project that is driven more by the urql community, including Phil and Jovi, than by Formidable itself. Because of this, and our commitment to the ethos of OSS, we are using this opportunity to kick off what we’re calling Formidable OSS Partnerships.

Async GraphQL with Rust: AuthN and AuthZ

June 21, 2022
Welcome back to my series covering Async GraphQL in Rust! Today's entry will cover authentication and authorization using the biscuit and Oso libraries.