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

[edmundo096]

I got across a similar circular structure JSON conversion error but with a different cause (tried to use .do() rxjs operator on an activatedRouter.queryParamMap without importing it).
The error stack trace (similar to the OP one) didn't helped, there was no clue over where the error may have originated from.

Then I remembered that Angular's Router supports the enableTracing option, which revealed more details.

Not really related directly to StoreDevtools, but the original error stack trace thrown only makes mention of it.
Leaving my comment here in case anyone finds this while Googling this kind of error.

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:783)
    at zone.js:834
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

[mikeeus]

Thanks a lot @edmundo096 !!
Using the router's enableTracing option allowed me to see that the error was a missing provider. You saved me a lot of time! :)

[AlexKhymenko]

For me it was my external library i didnt export pipe.

[krist-jin]

I had a similar situation and the error message like this does not help at all. In order to see the real error message and find the root cause, I turned off the redux devtools by commenting it out in the module imports. Then the real error message showed up and it told me I forgot to register one of the service provider. Hope it helps for other folks who have the same issue.