Added web sender and wired up to example/apollo-client

examples/apollo-client/package.json

@@ -5,9 +5,10 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "parcel ./src/index.html --port 4001"
+    "start": "parcel ./src/index.html --port 4001 --no-cache"
   },
   "dependencies": {
+    "@envy/web": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "urql": "^4.0.5"

examples/apollo-client/src/components/Sanity.tsx

@@ -26,7 +26,7 @@ export default function Sanity() {
                   <div className="flex flex-col gap-2">
                     {category.products.map((product: any) => {
                       return product.variants.map((variant: any) => (
-                        <div className="flex flex-row justify-between ml-4 mr-12">
+                        <div key={variant.id} className="flex flex-row justify-between ml-4 mr-12">
                           <div>{variant.name}</div>
                           <div>${variant.price.toFixed(2)}</div>
                         </div>

examples/apollo-client/src/index.js

@@ -1,7 +1,11 @@
+import { enableTracing } from '@envy/web';
 import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 
 const container = document.getElementById('app');
 const root = createRoot(container);
-root.render(<App />);
+
+enableTracing({ serviceName: 'examples/apollo-client', debug: true, port: 9999 }).then(() => {
+  root.render(<App />);
+});

packages/browser/src/components/TraceDetail.tsx

@@ -22,7 +22,8 @@ type DetailProps = React.HTMLAttributes<HTMLElement>;
 function CodeDisplay({ contentType, children }: CodeDisplayProps) {
   if (!children) return null;
 
-  const isJson = contentType?.includes('application/json');
+  const isJson =
+    contentType?.includes('application/json') || contentType?.includes('application/graphql-response+json');
   const isXml = contentType?.includes('application/xml');
 
   return (
@@ -42,8 +43,18 @@ export default function TraceDetail({ className }: DetailProps) {
   const { getSelectedTrace, clearSelectedTrace } = useApplication();
   const trace = getSelectedTrace();
 
-  const { timestamp, method, host, url, requestHeaders, statusCode, statusMessage, responseHeaders, duration } =
-    trace || {};
+  const {
+    serviceName,
+    timestamp,
+    method,
+    host,
+    url,
+    requestHeaders,
+    statusCode,
+    statusMessage,
+    responseHeaders,
+    duration,
+  } = trace || {};
   const responseComplete = duration !== undefined && statusCode !== undefined;
 
   const updateTimer = useCallback(() => {
@@ -111,6 +122,9 @@ export default function TraceDetail({ className }: DetailProps) {
               </span>
               <span className="block text-opacity-70 text-black">{url}</span>
             </div>
+            <div className="mt-4">
+              Sent from <span className="font-bold">{serviceName}</span>
+            </div>
           </div>
         </div>
       </div>

packages/browser/src/components/TraceList.tsx

@@ -1,4 +1,4 @@
-import { HiOutlineEmojiSad } from 'react-icons/hi';
+import { HiOutlineChartBar, HiOutlineEmojiSad, HiOutlineLightningBolt } from 'react-icons/hi';
 
 import { Loading } from '@/components/ui';
 import useApplication from '@/hooks/useApplication';
@@ -65,20 +65,17 @@ export default function TraceList({ className }: TraceListProps) {
     ['Time', getRequestDuration, 'w-[50px] md:w-[100px] text-center', () => ''],
   ];
 
+  const [Icon, message] = connected
+    ? [HiOutlineLightningBolt, `Connected to ws://localhost:${port}...`]
+    : connecting
+    ? [HiOutlineChartBar, 'Connecting...']
+    : [HiOutlineEmojiSad, 'Unable to connect'];
+
   return (
     <div className={`h-full flex flex-col overflow-y-scroll bg-slate-300 ${className}`}>
       {data.length === 0 ? (
-        <div className="flex flex-none h-full justify-center items-center text-3xl md:text-6xl text-slate-400">
-          {connected ? (
-            `Server established on ws://localhost:${port} - waiting for data...`
-          ) : connecting ? (
-            'connecting...'
-          ) : (
-            <span className="flex items-center gap-2">
-              <HiOutlineEmojiSad className="translate-y-[0.1em] w-8 h-8 md:w-16 md:h-16" />
-              <span>unable to connect</span>
-            </span>
-          )}
+        <div className="flex flex-none h-full justify-center items-center text-3xl text-slate-400">
+          <Icon className="translate-y-[0.1em] w-8 h-8 mr-2" /> <span>{message}</span>
         </div>
       ) : (
         <div className="table table-fixed w-full relative">

packages/browser/src/model/CollectorClient.ts

@@ -1,4 +1,4 @@
-import { Event, EventType, HttpRequest } from '@envy/core';
+import { DEFAULT_WEB_SOCKET_PORT, Event, EventType, HttpRequest } from '@envy/core';
 
 import { Traces } from '@/types';
 import { safeParseJson } from '@/utils';
@@ -13,8 +13,6 @@ export default class CollectorClient {
 
   private _connected: boolean = true;
   private _connecting: boolean = false;
-  private _shouldRetry: boolean = true;
-  private _retryCount: number = 0;
   private _traces: Traces = new Map();
   private _changeHandler?: () => void;
 
@@ -44,28 +42,19 @@ export default class CollectorClient {
   }
 
   private _connect() {
-    const socket = new WebSocket(`ws://localhost:${this._port}/viewer`);
+    const port = this._port ?? DEFAULT_WEB_SOCKET_PORT;
+    const socket = new WebSocket(`ws://localhost:${port}/viewer`);
 
     socket.onopen = () => {
       this._connecting = false;
       this._connected = true;
-      this._retryCount = 0;
       this._signalChange();
     };
 
     socket.onclose = () => {
       this._connected = false;
       this._connecting = true;
       this._signalChange();
-      this._retryCount += 1;
-      if (this._shouldRetry && this._retryCount < 3) {
-        // TODO: implement incremental back-off?
-        setTimeout(this._connect, 3000);
-      } else {
-        this._shouldRetry = false;
-        this._connecting = false;
-        this._signalChange();
-      }
     };
 
     socket.onmessage = ({ data }) => {

packages/browser/src/model/mockData.ts

@@ -14,12 +14,11 @@ function requestData(
   host: Trace['host'],
   port: Trace['port'],
   path: Trace['path'],
-): Pick<Trace, 'httpVersion' | 'method' | 'host' | 'port' | 'path' | 'url'> {
+): Pick<Trace, 'method' | 'host' | 'port' | 'path' | 'url'> {
   const protocol = port === 433 ? 'https://' : 'http://';
   const hostString = port === 80 || port === 443 ? `${host}` : `${host}:${port.toString()}`;
 
   return {
-    httpVersion: '1.1',
     method,
     host,
     port,
@@ -34,6 +33,7 @@ const mockTraces: Trace[] = [
     id: '1',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(0),
     ...requestData('GET', 'auth.restserver.com', 443, '/auth?client=mock_client'),
     requestHeaders: {
@@ -47,6 +47,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: 200,
     statusMessage: 'OK',
     responseHeaders: {
@@ -71,6 +72,7 @@ const mockTraces: Trace[] = [
     id: '2',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'web',
     timestamp: elapseTime(0.1),
     ...requestData('POST', 'localhost', 3000, '/api/graphql'),
     requestHeaders: {
@@ -119,6 +121,7 @@ const mockTraces: Trace[] = [
     id: '3',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(1.2),
     ...requestData('GET', 'data.restserver.com', 443, '/features'),
     requestHeaders: {
@@ -128,6 +131,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: 200,
     statusMessage: 'OK',
     responseHeaders: {
@@ -149,6 +153,7 @@ const mockTraces: Trace[] = [
     id: '4',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(3.1),
     ...requestData('GET', 'data.restserver.com', 443, '/countries?start=0&count=20'),
     requestHeaders: {
@@ -158,6 +163,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: 404,
     statusMessage: 'Not found',
     responseHeaders: {
@@ -176,6 +182,7 @@ const mockTraces: Trace[] = [
     id: '5',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(16.3),
     ...requestData('POST', 'data.restserver.com', 443, '/people'),
     requestHeaders: {
@@ -191,6 +198,7 @@ const mockTraces: Trace[] = [
       lastName: 'Bear',
     }),
     // ---------
+    httpVersion: '1.1',
     statusCode: 200,
     statusMessage: 'OK',
     responseHeaders: {
@@ -205,7 +213,6 @@ const mockTraces: Trace[] = [
       'connection': 'keep-alive',
       'keep-alive': 'timeout=5',
     },
-    httpVersion: '1.1',
     responseBody: JSON.stringify({
       id: '4',
     }),
@@ -217,6 +224,7 @@ const mockTraces: Trace[] = [
     id: '6',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'web',
     timestamp: elapseTime(0.1),
     ...requestData('POST', 'localhost', 3000, '/api/graphql'),
     requestHeaders: {
@@ -239,6 +247,7 @@ const mockTraces: Trace[] = [
       },
     }),
     // ---------
+    httpVersion: '1.1',
     statusCode: 200,
     statusMessage: 'OK',
     responseHeaders: {
@@ -267,6 +276,7 @@ const mockTraces: Trace[] = [
     id: '7',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(3.14),
     ...requestData('GET', 'data.restserver.com', 433, '/movies?start=0&count=20'),
     requestHeaders: {
@@ -276,6 +286,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: 500,
     statusMessage: 'Internal Server Error',
     responseHeaders: {
@@ -294,6 +305,7 @@ const mockTraces: Trace[] = [
     id: '8',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(3.14),
     ...requestData('GET', 'hits.webstats.com', 433, '/?apikey=c82e66bd-4d5b-4bb7-b439-896936c94eb2'),
     requestHeaders: {
@@ -303,6 +315,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: 200,
     statusMessage: 'OK',
     responseHeaders: {
@@ -321,6 +334,7 @@ const mockTraces: Trace[] = [
     id: '9',
     parentId: undefined,
     type: EventType.HttpRequest,
+    serviceName: 'gql',
     timestamp: elapseTime(0.4),
     ...requestData('GET', 'data.restserver.com', 433, '/features'),
     requestHeaders: {
@@ -330,6 +344,7 @@ const mockTraces: Trace[] = [
     },
     requestBody: undefined,
     // ---------
+    httpVersion: '1.1',
     statusCode: undefined,
     statusMessage: undefined,
     responseHeaders: undefined,

packages/browser/src/scripts/startCollector.cjs

@@ -18,21 +18,18 @@ wss.on('listening', () => {
 });
 
 wss.on('connection', (ws, request) => {
-  if (request.url === '/viewer' && !viewer) {
+  if (request.url === '/viewer') {
     log(chalk.green('✅ Envy viewer client connected'));
     viewer = ws;
   }
 
-  if (request.url === '/node' && !viewer) {
+  if (request.startsWith === '/node') {
     log(chalk.green('✅ Envy node sender connected'));
   }
 
-  ws.on('close', () => {
-    if (viewer !== null) {
-      log(chalk.red('❌ Envy viewer client disconnected'));
-      viewer = null;
-    }
-  });
+  if (request.startsWith === '/web') {
+    log(chalk.green('✅ Envy web sender connected'));
+  }
 
   ws.on('message', data => {
     if (!viewer || viewer.readyState !== WebSocket.OPEN) {

packages/browser/src/systems/GraphQL.tsx

@@ -21,7 +21,7 @@ export default class GraphQL implements System<GraphQLData> {
   name = 'GraphQL';
 
   isMatch(trace: Trace) {
-    return trace.path === '/api/graphql';
+    return trace.path?.endsWith('/graphql') ?? false;
   }
 
   getData(trace: Trace) {

packages/web/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@envy/web",
+  "version": "0.1.0",
+  "description": "Node.js Network & Telemetry Viewer",
+  "main": "dist/index.js",
+  "repository": "https://github.com/FormidableLabs/envy.git",
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@envy/core": "0.2.0"
+  }
+}