feat(store-devtools): add redux dev tool trace support (#3517) (#3665)

Closes #3517 
Closes #1868

Author: zizifn

modules/store-devtools/spec/config.spec.ts

@@ -28,6 +28,8 @@ describe('StoreDevtoolsOptions', () => {
       logOnly: false,
       autoPause: false,
       features: defaultFeatures,
+      trace: false,
+      traceLimit: 75,
     });
   });
 
@@ -45,6 +47,8 @@ describe('StoreDevtoolsOptions', () => {
       name: 'ABC',
       serialize: true,
       autoPause: true,
+      trace: true,
+      traceLimit: 20,
       features: {
         test: true,
       },
@@ -58,6 +62,8 @@ describe('StoreDevtoolsOptions', () => {
       serialize: true,
       logOnly: false,
       autoPause: true,
+      trace: true,
+      traceLimit: 20,
       features: {
         test: true,
       },
@@ -75,6 +81,8 @@ describe('StoreDevtoolsOptions', () => {
       serialize: false,
       logOnly: false,
       autoPause: false,
+      trace: false,
+      traceLimit: 75,
       features: defaultFeatures,
     });
   });
@@ -92,6 +100,8 @@ describe('StoreDevtoolsOptions', () => {
       serialize: false,
       logOnly: true,
       autoPause: false,
+      trace: false,
+      traceLimit: 75,
       features: {
         pause: true,
         export: true,

modules/store-devtools/spec/extension.spec.ts

@@ -26,13 +26,17 @@ function createOptions(
   },
   serialize: boolean | undefined = false,
   maxAge: false | number = false,
-  autoPause: boolean = false
+  autoPause: boolean = false,
+  trace: boolean = false,
+  traceLimit: number = 75
 ) {
   const options: ReduxDevtoolsExtensionConfig = {
     name,
     features,
     serialize,
     autoPause,
+    trace,
+    traceLimit,
   };
   if (maxAge !== false /* support === 0 */) {
     options.maxAge = maxAge;
@@ -121,6 +125,8 @@ describe('DevtoolsExtension', () => {
         // these two should not be added
         actionSanitizer: myActionSanitizer,
         stateSanitizer: myStateSanitizer,
+        trace: true,
+        traceLimit: 20,
       }),
       <any>null
     );
@@ -131,7 +137,9 @@ describe('DevtoolsExtension', () => {
       undefined,
       true,
       10,
-      true
+      true,
+      true,
+      20
     );
     expect(reduxDevtoolsExtension.connect).toHaveBeenCalledWith(options);
   });

modules/store-devtools/src/config.ts

@@ -104,6 +104,16 @@ export class StoreDevtoolsConfig {
    * Auto pauses when the extension’s window is not opened, and so has zero impact on your app when not in use.
    */
   autoPause?: boolean;
+
+  /**
+   * If set to true, will include stack trace for every dispatched action
+   */
+  trace?: boolean | (() => string);
+
+  /**
+   * Maximum stack trace frames to be stored (in case trace option was provided as true).
+   */
+  traceLimit?: number;
 }
 
 export const STORE_DEVTOOLS_CONFIG = new InjectionToken<StoreDevtoolsConfig>(
@@ -139,6 +149,8 @@ export function createConfig(
     serialize: false,
     logOnly: false,
     autoPause: false,
+    trace: false,
+    traceLimit: 75,
     // Add all features explicitly. This prevent buggy behavior for
     // options like "lock" which might otherwise not show up.
     features: {

modules/store-devtools/src/extension.ts

@@ -57,6 +57,8 @@ export interface ReduxDevtoolsExtensionConfig {
   maxAge?: number;
   autoPause?: boolean;
   serialize?: boolean | SerializationOptions;
+  trace?: boolean | (() => string);
+  traceLimit?: number;
 }
 
 export interface ReduxDevtoolsExtension {
@@ -244,6 +246,8 @@ export class DevtoolsExtension {
       features: config.features,
       serialize: config.serialize,
       autoPause: config.autoPause ?? false,
+      trace: config.trace ?? false,
+      traceLimit: config.traceLimit ?? 75,
       // The action/state sanitizers are not added to the config
       // because sanitation is done in this class already.
       // It is done before sending it to the devtools extension for consistency:

projects/ngrx.io/content/guide/store-devtools/index.md

@@ -27,8 +27,12 @@ import { environment } from '../environments/environment'; // Angular CLI enviro
       maxAge: 25, // Retains last 25 states
       logOnly: !isDevMode(), // Restrict extension to log-only mode
       autoPause: true, // Pauses recording actions and state changes when the extension window is not open
+      trace: false, //  If set to true, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code
+      traceLimit: 75, // maximum stack trace frames to be stored (in case trace option was provided as true)
     }),
   ],
 })
 export class AppModule {}
 </code-example>
+
+> More extension options and explanation, refer to [Redux Devtools Documentation](https://github.com/reduxjs/redux-devtools#documentation)