Merge pull request #61 from vineethwilson15/feat/effect-error-details

feat(effects): surface error message and stack trace in effects panel

Author: adxdits

projects/ngrx-devtool-ui/src/components/effects-panel/effects-panel.component.html

@@ -80,6 +80,18 @@ <h3><mat-icon>bolt</mat-icon> Registered Effects</h3>
               <span class="detail-label">Time:</span>
               <span class="detail-value">{{ execution.endTime | date:'medium' }}</span>
             </div>
+            @if (execution.status === 'error' && execution.errorMessage) {
+              <div class="detail-row error-message-row">
+                <span class="detail-label">Error:</span>
+                <span class="detail-value error-message-text">{{ execution.errorMessage }}</span>
+              </div>
+              @if (execution.errorStack) {
+                <details class="stack-trace">
+                  <summary>Stack Trace</summary>
+                  <pre class="stack-trace-content">{{ execution.errorStack }}</pre>
+                </details>
+              }
+            }
           </div>
         </mat-expansion-panel>
       }

projects/ngrx-devtool-ui/src/components/effects-panel/effects-panel.component.scss

@@ -210,6 +210,43 @@ mat-panel-title {
   }
 }
 
+// Error details
+.error-message-row {
+  align-items: flex-start;
+
+  .error-message-text {
+    color: $effect-error;
+    font-weight: 500;
+    word-break: break-word;
+  }
+}
+
+.stack-trace {
+  margin-top: $spacing-md;
+
+  summary {
+    cursor: pointer;
+    color: $color-on-surface-variant;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: $spacing-xs 0;
+    user-select: none;
+  }
+
+  .stack-trace-content {
+    margin-top: $spacing-sm;
+    padding: $spacing-md;
+    background: $color-surface-container;
+    border-radius: $corner-extra-small;
+    font-size: 0.78rem;
+    line-height: 1.5;
+    color: $color-on-surface-variant;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+}
+
 // Lifecycle events
 .lifecycle-events {
   padding: $spacing-lg;

projects/ngrx-devtool-ui/src/components/effects-panel/effects-panel.component.ts

@@ -71,7 +71,11 @@ export class EffectsPanelComponent {
       const lifecycleProps = {
         emitted: { status: 'completed' as const, emittedAction: event.action, dispatch: true },
         executed: { status: 'executed' as const, dispatch: false },
-        error: { status: 'error' as const },
+        error: {
+          status: 'error' as const,
+          errorMessage: event.effectEvent.errorMessage,
+          errorStack: event.effectEvent.errorStack,
+        },
       };
 
       completedExecutions.push({

projects/ngrx-devtool-ui/src/components/effects-panel/effects-panel.models.ts

@@ -8,6 +8,8 @@ export interface EffectEventMessage {
     readonly duration?: number;
     readonly executionId?: string;
     readonly dispatch?: boolean;
+    readonly errorMessage?: string;
+    readonly errorStack?: string;
   };
   readonly timestamp: string;
 }
@@ -24,4 +26,6 @@ export interface EffectExecution {
   readonly emittedAction?: string;
   readonly executionId?: string;
   readonly dispatch?: boolean;
+  readonly errorMessage?: string;
+  readonly errorStack?: string;
 }

projects/ngrx-devtool/src/lib/core/actions-interceptor.service.ts

@@ -81,6 +81,11 @@ export class ActionsInterceptorService implements OnDestroy {
     this.effectTracker.effectEvents$.pipe(
       takeUntil(this.destroy$),
       tap((event: EffectEvent) => {
+        const errorMessage = event.error instanceof Error
+          ? event.error.message
+          : event.error != null ? String(event.error) : undefined;
+        const errorStack = event.error instanceof Error ? event.error.stack : undefined;
+
         const message: DevToolMessage = {
           type: 'EFFECT_EVENT',
           action: event.action?.type,
@@ -91,6 +96,8 @@ export class ActionsInterceptorService implements OnDestroy {
             duration: event.duration,
             executionId: event.executionId,
             dispatch: event.dispatch,
+            errorMessage,
+            errorStack,
           },
           timestamp: new Date().toISOString(),
         };

projects/ngrx-devtool/src/lib/core/core.models.ts

@@ -77,4 +77,6 @@ export interface DevToolEffectEventPayload {
   readonly duration?: number;
   readonly executionId?: string;
   readonly dispatch?: boolean;
+  readonly errorMessage?: string;
+  readonly errorStack?: string;
 }

projects/ngrx-devtool/src/lib/testing/actions-interceptor.service.spec.ts

@@ -1,11 +1,11 @@
-import { TestBed } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { PLATFORM_ID } from '@angular/core';
 import { provideStore } from '@ngrx/store';
 import { provideEffects, EffectSources } from '@ngrx/effects';
 
 import { ActionsInterceptorService, DevToolMessage } from '../core/actions-interceptor.service';
 import { EffectTrackerService } from '../core/effect-tracker.service';
-import { DevToolsEffectSources } from '../core/devtools-effect-sources';
+import { DevToolsEffectSources, EffectEvent } from '../core/devtools-effect-sources';
 import { WebSocketService } from '../core/websocket.service';
 import { TestEffects, testActions, testReducer } from './test-effects';
 import { MockWebSocket, WebSocketConstants } from './mock-websocket';
@@ -172,6 +172,94 @@ describe('ActionsInterceptorService', () => {
     });
   });
 
+  describe('Effect Event Forwarding', () => {
+    function getEffectSources(): DevToolsEffectSources {
+      return TestBed.inject(EffectSources) as DevToolsEffectSources;
+    }
+
+    function emitEffectEvent(event: EffectEvent): void {
+      getEffectSources().effectEvents$.next(event);
+    }
+
+    it('should include errorMessage and errorStack in EFFECT_EVENT when lifecycle is error', fakeAsync(() => {
+      interceptorService.initialize();
+      const ws = getCreatedWebSocket();
+      ws.simulateOpen();
+      ws.clearMessages();
+
+      const error = new Error('Something went wrong');
+
+      emitEffectEvent({
+        effectName: 'TestEffects.failingEffect$',
+        sourceName: 'TestEffects',
+        propertyName: 'failingEffect$',
+        lifecycle: 'error',
+        error,
+        timestamp: Date.now(),
+        executionId: 'test-exec-error-1',
+      });
+      tick(0);
+
+      const messages = ws.getSentMessagesAsObjects<DevToolMessage>();
+      const effectMsg = messages.find((m) => m.type === 'EFFECT_EVENT');
+
+      expect(effectMsg).toBeDefined();
+      expect(effectMsg!.effectEvent?.errorMessage).toBe('Something went wrong');
+      expect(effectMsg!.effectEvent?.errorStack).toContain('Error: Something went wrong');
+    }));
+
+    it('should include errorMessage for non-Error thrown values', fakeAsync(() => {
+      interceptorService.initialize();
+      const ws = getCreatedWebSocket();
+      ws.simulateOpen();
+      ws.clearMessages();
+
+      emitEffectEvent({
+        effectName: 'TestEffects.failingEffect$',
+        sourceName: 'TestEffects',
+        propertyName: 'failingEffect$',
+        lifecycle: 'error',
+        error: 'plain string error',
+        timestamp: Date.now(),
+        executionId: 'test-exec-error-2',
+      });
+      tick(0);
+
+      const messages = ws.getSentMessagesAsObjects<DevToolMessage>();
+      const effectMsg = messages.find((m) => m.type === 'EFFECT_EVENT');
+
+      expect(effectMsg).toBeDefined();
+      expect(effectMsg!.effectEvent?.errorMessage).toBe('plain string error');
+      expect(effectMsg!.effectEvent?.errorStack).toBeUndefined();
+    }));
+
+    it('should not include errorMessage or errorStack for non-error lifecycle', fakeAsync(() => {
+      interceptorService.initialize();
+      const ws = getCreatedWebSocket();
+      ws.simulateOpen();
+      ws.clearMessages();
+
+      emitEffectEvent({
+        effectName: 'TestEffects.loadItems$',
+        sourceName: 'TestEffects',
+        propertyName: 'loadItems$',
+        lifecycle: 'emitted',
+        action: testActions.loadItemsSuccess({ items: [] }),
+        timestamp: Date.now(),
+        executionId: 'test-exec-emitted-1',
+        dispatch: true,
+      });
+      tick(0);
+
+      const messages = ws.getSentMessagesAsObjects<DevToolMessage>();
+      const effectMsg = messages.find((m) => m.type === 'EFFECT_EVENT');
+
+      expect(effectMsg).toBeDefined();
+      expect(effectMsg!.effectEvent?.errorMessage).toBeUndefined();
+      expect(effectMsg!.effectEvent?.errorStack).toBeUndefined();
+    }));
+  });
+
   describe('Platform Detection', () => {
     it('should not create WebSocket on non-browser platform', () => {
       TestBed.resetTestingModule();