Merge pull request #30 from statelyai/davidkpiano/maxDeferredEvents

Add `maxDeferredEvents`

src/browser.ts

@@ -1,6 +1,10 @@
 import safeStringify from 'fast-safe-stringify';
 import { AnyEventObject, Observer, Subscribable, toObserver } from 'xstate';
-import { InspectorOptions, createInspector } from './createInspector';
+import {
+  InspectorOptions,
+  createInspector,
+  defaultInspectorOptions,
+} from './createInspector';
 import { Adapter, Inspector, StatelyInspectionEvent } from './types';
 import { UselessAdapter } from './useless';
 
@@ -54,6 +58,7 @@ export function createBrowserInspector(
   }
 
   const resolvedOptions = {
+    ...defaultInspectorOptions,
     url: 'https://stately.ai/inspect',
     filter: () => true,
     serialize: (inspectionEvent) => JSON.parse(safeStringify(inspectionEvent)),
@@ -189,5 +194,10 @@ export class BrowserAdapter implements Adapter {
     }
 
     this.deferredEvents.push(event);
+
+    // Remove the oldest event if we've reached the max deferred events
+    if (this.deferredEvents.length > this.options.maxDeferredEvents) {
+      this.deferredEvents.shift();
+    }
   }
 }

src/createInspector.ts

@@ -40,12 +40,14 @@ export interface InspectorOptions {
    * @default true
    */
   autoStart?: boolean;
+  maxDeferredEvents?: number;
 }
 
 export const defaultInspectorOptions: Required<InspectorOptions> = {
   filter: () => true,
   serialize: (event) => event,
   autoStart: true,
+  maxDeferredEvents: 200,
 };
 
 export function createInspector<TAdapter extends Adapter>(

src/webSocket.ts

@@ -20,6 +20,7 @@ export class WebSocketAdapter implements Adapter {
 
   constructor(options?: WebSocketInspectorOptions) {
     this.options = {
+      ...defaultInspectorOptions,
       filter: () => true,
       serialize: (inspectionEvent) =>
         JSON.parse(safeStringify(inspectionEvent)),
@@ -74,6 +75,10 @@ export class WebSocketAdapter implements Adapter {
       this.ws.send(safeStringify(inspectionEvent));
     } else {
       this.deferredEvents.push(inspectionEvent);
+
+      if (this.deferredEvents.length > this.options.maxDeferredEvents) {
+        this.deferredEvents.shift();
+      }
     }
   }
 }