{"id":26121547,"url":"https://github.com/formidablelabs/envy","last_synced_at":"2025-05-16T19:02:10.267Z","repository":{"id":194394570,"uuid":"688208274","full_name":"FormidableLabs/envy","owner":"FormidableLabs","description":"Node.js Telemetry \u0026 Network Viewer","archived":false,"fork":false,"pushed_at":"2025-01-09T17:09:02.000Z","size":2608,"stargazers_count":123,"open_issues_count":27,"forks_count":2,"subscribers_count":20,"default_branch":"main","last_synced_at":"2025-05-05T23:37:37.207Z","etag":null,"topics":["graphql","javascript","networking","nextjs","nodejs","react","telemetry","tracing"],"latest_commit_sha":null,"homepage":"https://envy-webui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-06T22:01:35.000Z","updated_at":"2025-05-04T14:28:49.000Z","dependencies_parsed_at":"2023-09-23T05:53:02.953Z","dependency_job_id":"e17100ed-9e4a-45f9-836f-73d81168eb6d","html_url":"https://github.com/FormidableLabs/envy","commit_stats":{"total_commits":155,"total_committers":8,"mean_commits":19.375,"dds":0.3935483870967742,"last_synced_commit":"48e1e8bbde46f7d61c9c66648b75d1eb2f1f33c4"},"previous_names":["formidablelabs/envy"],"tags_count":115,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fenvy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fenvy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fenvy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Fenvy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/envy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254592367,"owners_count":22097010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","javascript","networking","nextjs","nodejs","react","telemetry","tracing"],"created_at":"2025-03-10T14:23:44.289Z","updated_at":"2025-05-16T19:02:10.251Z","avatar_url":"https://github.com/FormidableLabs.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://formidable.com/open-source/\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Envy — Formidable, We build the modern web\" src=\"./docs/images/envy-hero.png\" /\u003e\n  \u003c/a\u003e\n\n  \u003cstrong\u003e\n    Zero Config Node.js Telemetry \u0026amp; Network Viewer\n  \u003c/strong\u003e\n\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\n  \u003ca href=\"https://github.com/FormidableLabs/envy/actions\"\u003e\n    \u003cimg alt=\"build status\" src=\"https://github.com/FormidableLabs/envy/actions/workflows/release.yml/badge.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/FormidableLabs/envy#maintenance-status\"\u003e\n    \u003cimg alt=\"Maintenance Status\" src=\"https://img.shields.io/badge/maintenance-active-green.svg\" /\u003e\n  \u003c/a\u003e\n\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n\u003c/div\u003e\n\n# Envy\n\nEnvy will trace the network calls from every application in your stack and allow you to view them in a central place. Whether you are running a Node.js backend, Express, Apollo, or even a Next.js server, Envy will capture it all.\n\n_Note: Envy is intended for development usage only, and is not a replacement for optimized production telemetry_\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Envy\" src=\"./docs/images/envy-example.png\" /\u003e\n\u003c/div\u003e\n\nCheck out our [live demo](https://envy-webui.vercel.app/) app to explore the Web UI\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Additional Options](#additional-options)\n- [Customizing](#customizing)\n- [Production Bundles](#production-bundles)\n- [Contributing](#contributing)\n\n## Getting Started\n\n### 1. Install the Envy Web UI to view application telemetry in your browser\n\n```sh\n# npm\n$ npm i --save-dev @envyjs/webui\n# or yarn\n$ yarn add --dev @envyjs/webui\n```\n\n### 2. Install a telemetry package for your application\n\n- [Node.js Application](#nodejs-application)\n- [Web Client Application](#web-client-application)\n- [Next.js Application](#nextjs-application)\n\n### 3. Run the Web UI and start collecting telemetry\n\nRun the browser in a seperate terminal session\n\n```\nnpx @envyjs/webui\n```\n\nor optionally, add it to your NPM scripts using a tool like [concurrently](https://www.npmjs.com/package/concurrently)\n\n```json\n\"scripts\": {\n  \"start\": \"\u003cyour application start command\u003e\",\n  \"start:withenvy\": \"concurrently \\\"npx @envyjs/webui\\\" \\\"npm start\\\"\"\n},\n```\n\n[Additional Options](#additional-options) are also available for running the web viewer\n\n## Available Telemetry Packages\n\n### Node.js Application\n\nInstall the `@envyjs/node` sender package in your node application:\n\n```sh\n# npm\n$ npm i --save-dev @envyjs/node\n# or yarn\n$ yarn add --dev @envyjs/node\n```\n\nImport and invoke the `enableTracing` function to the root of your app before any other code.\n\n```ts\nimport { enableTracing } from '@envyjs/node';\nenableTracing({ serviceName: 'your-node-app-name' });\n\n// ... your app code\n```\n\n### Web Client Application\n\nInstall the `@envyjs/web` sender package in your website:\n\n```sh\n# npm\n$ npm i --save-dev @envyjs/web\n# or yarn\n$ yarn add --dev @envyjs/web\n```\n\nImport the `enableTracing` function to the root of your app, and invoke it before mounting your application.\n\nFor example, in a simple React application:\n\n```ts\nimport { enableTracing } from '@envyjs/web';\nenableTracing({ serviceName: 'your-website-name' });\n\nimport { createRoot } from 'react-dom/client';\n\nimport { App } from './App';\n\nconst container = document.getElementById('app');\nconst root = createRoot(container);\nroot.render(\u003cApp /\u003e);\n```\n\n### Next.js Application\n\nInstall the `@envyjs/nextjs` sender package in your node application:\n\n```sh\n# npm\n$ npm i --save-dev @envyjs/nextjs\n# or yarn\n$ yarn add --dev @envyjs/nextjs\n```\n\nImport and wrap your Next config `next.config.js` file with Envy\n\n```ts\n// next.config.js\nconst { withEnvy } = require('@envyjs/nextjs');\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nconst envyConfig = {\n  serviceName: 'next-app',\n};\n\nmodule.exports = withEnvy(nextConfig, envyConfig);\n```\n\n*By default, `@envyjs/nextjs` will only inject itself into your `development` bundle.*\n\n#### Timing Data\n\n_Browsers prevent full timing data from being accessed from cross-origin requests unless the server responds with the [Timing-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin) header_.\n\n## Additional Options\n\nEnvy supports these additional options\n\n#### Filtering\n\nYou can filter the requests that are traced by setting a `filter` function that returns `true` for all traces you want to keep. (The same way javascript array.filter works)\n\n```ts\nenableTracing({ \n  serviceName: 'example-nextjs',\n\n  // ignores requests to google.com\n  filter: request =\u003e request.host !== 'google.com'\n});\n```\n\n#### Debug\n\nYou can see the information we send to the Web UI by setting the Debug option\n\n```ts\nenableTracing({ \n  serviceName: 'example-nextjs',\n  debug: true\n});\n```\n\n#### Viewer Port\n\nYou can customize the HTTP port the viewer runs on using the cli flag\n\n```sh\nnpx @envyjs/webui --viewerPort=65789\n```\n\n#### Disabling Parts\n\nThe webui and its collector can be individually disabled using cli flags. This is an advanced option and typically not used.\n\n```sh\n# disable ui\nnpx @envyjs/webui --no-ui\n\n# disable websocket collector\nnpx @envyjs/webui --no-collector\n```\n\n## Customizing\n\nWhilst Envy will run as a zero-config standalone viewer, it is also possible to run the Envy viewer locally from your application and to define your own systems to customize how traces are presented.\n\nSee the [customization docs](docs/customizing.md) for more information.\n\n## Production Bundles\n\nEnvy is designed to enhance your developer experience and is not intended for production usage. Depending on your application, there are various ways to exclude it from your bundle in production.\n\n### Dynamic Imports (Typescript)\n\n```ts\nif (process.env.NODE_ENV !== 'production') {\n  import('@envyjs/node').then(({ enableTracing }) =\u003e {\n    enableTracing({ serviceName: 'examples/apollo' });\n  });\n}\n```\n\n### Dynamic Require (Javascript)\n\n```js\nif (process.env.NODE_ENV !== 'production') {\n  const { enableTracing } = require('@envyjs/node');\n  enableTracing({ serviceName: 'examples/apollo' });\n}\n```\n\n### Disabling Tracing\n\nThis option is the simplest, but will leave the code in your output bundle. Depending on your application and its deployment and packaging method, this may be acceptable in your usage.\n\n```ts\nimport { enableTracing } from '@envyjs/node';\nif (process.env.NODE_ENV !== 'production') {\n  enableTracing({ serviceName: 'examples/apollo' });\n}\n```\n\n## Contributing\n\nPlease see the [Contributing guide](CONTRIBUTING.md).\n\n## Maintenance Status\n\n**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fenvy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Fenvy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Fenvy/lists"}