TypeError: Converting circular structure to JSON

[jbeckton]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request

What is the current behavior?

Just came across this issue. I can consistently reproduce this error by having my app throw an error from an unprovided service. I have a core module with a service in it that is used in my signup feature module / component (lazy loaded). When the service is removed from the providers array on the core module then this error occurs when I try and load the route to the signup component that uses it.

package.json

"@ngrx/store-devtools": "~4.0.0",

app.module.ts

!environment.production ? StoreDevtoolsModule.instrument() : [],

Error and stack trace

ERROR Error: Uncaught (in promise): TypeError: Converting circular structure to JSON TypeError: Converting circular structure to JSON at Object.stringify (<anonymous>) at Object.e.stringify (<anonymous>:1:9263) at stringify (<anonymous>:1:18991) at toContentScript (<anonymous>:1:20255) at Function.sendMessage [as send] (<anonymous>:1:20741) at DevtoolsExtension.webpackJsonp.../../../../@ngrx/store-devtools/@ngrx/store-devtools.es5.js.DevtoolsExtension.notify (store-devtools.es5.js:184) at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (store-devtools.es5.js:566) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._tryNext (scan.js:109) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._next (scan.js:102) at ScanSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at Object.stringify (<anonymous>) at Object.e.stringify (<anonymous>:1:9263) at stringify (<anonymous>:1:18991) at toContentScript (<anonymous>:1:20255) at Function.sendMessage [as send] (<anonymous>:1:20741) at DevtoolsExtension.webpackJsonp.../../../../@ngrx/store-devtools/@ngrx/store-devtools.es5.js.DevtoolsExtension.notify (store-devtools.es5.js:184) at ScanSubscriber.StoreDevtools.applyOperators.state [as accumulator] (store-devtools.es5.js:566) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._tryNext (scan.js:109) at ScanSubscriber.webpackJsonp.../../../../rxjs/operator/scan.js.ScanSubscriber._next (scan.js:102) at ScanSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at resolvePromise (zone.js:795) at zone.js:847 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

Expected behavior:

No error message from the dev tools

Minimal reproduction of the problem with instructions:

Version of affected browser(s),operating system(s), npm, node and ngrx:

node v8.1.0
npm v5.4.0
Mac OS v10.12.6
Chrome Version 60.0.3112.113
99 Jeep Cherokee XJ

Other information:

[pietmichal]

Create Custom Serializer to get necessary data. Default serializer provides whole router state which might contain circular structure leading to dev-tools' crash.

[jbeckton]

The custom Serializer did not seem to make a difference

[brandonroberts]

Can you provide a repo?

[jbeckton]

@brandonroberts I added you to my repo, you can clone the repo. Let me know when you are done.

To reproduce just remove one of the providers from the core.module and then run the app.

http://localhost:4200/signup

[brandonroberts]

Link?

[jbeckton]

https://foo

[brandonroberts]

I see the error but I don't see how router-store is going to guard against this since your app is throwing a stack trace error from an unknown dependency. Are you getting this error under normal usage?

[jbeckton]

No, I realize that getting an error due to me forgetting to provide a service is not your problem per say but it took me awhile to figure out the root of my problem due to the dev tools error. I wanted to bring it to your attention to see if there was something you could do in this case so your dev tools would not cover up the error that I would normally see from the Angular framework.

In my case my app is still very early and there is not a lot of code but some one with a larger code base may have pulled their hair out trying to figure that one out.

Thanks

[brandonroberts]

I see. Thanks