1. Home
  2. Forum
  3. Angular - EJ 2
  4. "Converting circular structure to JSON" when e-column has [dataSource] and using of Sentry

"Converting circular structure to JSON" when e-column has [dataSource] and using of Sentry

I am using Sentry error reporting tool and since 23.1 the following error happens which prevents me from upgrading to newer version of Syncfusion.

console.js:36
 TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Zone'
    | property '_zoneDelegate' -> object with constructor '_ZoneDelegate'
    --- property 'zone' closes the circle
    at JSON.stringify (<anonymous>)
    at ArrayBase.isChanged (complex-array-base.js:185:49)
    at ArrayBase.ngAfterContentChecked (complex-array-base.js:218:32)
    at callHookInternal (core.mjs:6138:14)
    at callHook (core.mjs:6169:9)
    at callHooks (core.mjs:6120:17)
    at executeCheckHooks (core.mjs:6051:5)
    at refreshView (core.mjs:12172:21)
    at detectChangesInView (core.mjs:12361:9)
    at detectChangesInViewIfAttached (core.mjs:12324:5)
    at detectChangesInComponent (core.mjs:12313:5)
    at detectChangesInChildComponents (core.mjs:12374:9)
    at refreshView (core.mjs:12187:13)
    at detectChangesInView (core.mjs:12361:9)
    at detectChangesInViewIfAttached (core.mjs:12324:5)
    at detectChangesInEmbeddedViews (core.mjs:12281:13)
    at refreshView (core.mjs:12161:9)
    at detectChangesInView (core.mjs:12361:9)
    at detectChangesInViewIfAttached (core.mjs:12324:5)
    at detectChangesInEmbeddedViews (core.mjs:12281:13)
    at refreshView (core.mjs:12161:9)
    at detectChangesInView (core.mjs:12361:9)
    at detectChangesInViewIfAttached (core.mjs:12324:5)
    at detectChangesInComponent (core.mjs:12313:5)
    at detectChangesInChildComponents (core.mjs:12374:9)
    at refreshView (core.mjs:12187:13)
    at detectChangesInView (core.mjs:12361:9)
    at detectChangesInViewWhileDirty (core.mjs:12078:5)
    at detectChangesInternal (core.mjs:12060:9)
    at ApplicationRef.detectChangesInView (core.mjs:31198:9)
    at ApplicationRef.detectChangesInAttachedViews (core.mjs:31159:22)
    at ApplicationRef.tick (core.mjs:31128:18)
    at core.mjs:31494:41
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Object.onInvoke (core.mjs:14223:33)
    at _ZoneDelegate.invoke (zone.js:367:52)
    at Zone.run (zone.js:130:43)
    at NgZone.run (core.mjs:14074:28)
    at Object.next (core.mjs:31493:27)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30
    at errorContext (errorContext.js:19:9)
    at EventEmitter_.next (Subject.js:27:21)
    at EventEmitter_.emit (core.mjs:117:19)
    at checkStable (core.mjs:14142:35)
    at onLeave (core.mjs:14273:5)
    at Object.onInvokeTask (core.mjs:14217:17)
    at _ZoneDelegate.invokeTask (zone.js:402:36)

I found out that the error happens if sentry is set up and for at least the following situations:

  • Schedule
  • Grid
    • If the Grid has columns that have a [dataSource] set (note the adatpor is a ODataV4Adaptor

The error does not happen in the following situations:
  • SF is version 22.2.x
  • Sentry is not enabled

Please note that I do not think the error is Sentry related since it is working flawless up to 22.2.x. But after 23.1.x both components will not work together



3 Replies
MM Michael Mairegger March 21, 2024 04:08 PM UTC

I tried to debug somethind and found the following:

On complex-array-bare.js ln 185 where the following comparison is made

     isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==
                            JSON.stringify(childrenDataSource[i].propCollection.dataSource));

The error gets raised in the following condition:

if the compared dataSource has at least one Fetch-item in the requests array and that Fetch-Item has a value on property fetchResponse. fetchResponse is of instance ZoneAwarePromise

I tried in the debugger to set fetchResponse to null then serialization works.


Note: If I disable Sentry then fetchResponse is of type Promise and not ZoneAwarePromise. Sound like that Sentry modifies something in the resulting code but on v22.1 this error was not there


MM Michael Mairegger March 21, 2024 04:20 PM UTC

I have reported this issue in Sentry GitHub repo too:

"Converting circular structure to JSON" when using Syncfusion libraries and Sentry · Issue #11226 · getsentry/sentry-javascript (github.com)


VK Vasanthakumar K Syncfusion Team March 28, 2024 05:32 AM UTC

Hi Michael Mairegger,


Greetings from Syncfusion support.


We have validated your query and understand that you are facing a script error issue when using the OData V4 adaptor as a data source binding in the grid or a column within the grid's foreign key data source. We have prepared a sample of both a normal grid with the OData V4 adaptor and a foreign key data column data source, but we were unable to replicate the script error on our end. The only thing changed in version 23.x.x is we switched the default request type from HTTP XHR to fetch, so we suspect that the issue is related to sentry with fetch response alone.


Additionally, we noticed that in the sentry GitHub report, you mentioned that if you configure and change the sentry integration and default integration, it works fine. So, this purely depends on the sentry and their configuration. Please refer to the below normal sample without script error for your reference. Please get back to us if you have any queries about this.


Grid odatav4 datasource sample: https://stackblitz.com/edit/angular-kco7mw?file=src%2Fapp.component.ts,src%2Fapp.component.html


Grid’s foreignkey column datasource sample: https://stackblitz.com/edit/angular-zdukuu?file=src%2Fapp.component.html,src%2Fapp.component.ts


Github issue sample ensured with latest configuration comment: https://github.com/getsentry/sentry-javascript/issues/11226#issuecomment-2022405459, https://github.com/getsentry/sentry-javascript/issues/11226#issuecomment-2023118678


Regards,

Vasanthakumar K


Loader.
Up arrow icon