Firebase Analytics issue on angular 11

[jtushar53]

Version info

Angular:
Angular 11.0.1
Firebase:
8.0.2
AngularFire:
6.1.1
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Ionic/Cordova, Mac os

How to reproduce these conditions

Try calling below code in one of the pages

const userInfo = { email: 'myemail@google.com'}
await this.angularFireAnalytics.setUserProperties(userInfo);

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

** Screenshots **

Expected behavior

Actual behavior

It was working earlier on 10.2.x, after upgrading to Angular 11 it is not working.

[jimmykane]

Same here but for me it was not AG 11 but angular fire > 6.0

[jimmykane]

6.1.0-rc.4 and above causes this

[jamesdaniels]

6.1.0-rc.4 and above causes this

What do you DI tokens look like? If rc.4 introduced this it sounds like it's the object comparison on the instance settings (I just did typeof a === 'object' && JSON.stringify(a) === JSON.stringify(b) as a dirty object comparison assuming things would be serializable. This check ensures that DI tokens haven't changed out from underneath you... that said all it does it add a warning, saying if you changed the DI tokens between lazy-loads or with HMR enabled you have to refresh, so I can just add a try/catch on it.

[acadianaapps]

Getting the same error also.

[jimmykane]

@jamesdaniels nothing was changed so far on the consumer side. DI tokens are imported as they used to.

[jamesdaniels]

@jamesdaniels nothing was changed so far on the consumer side. DI tokens are imported as they used to.

Understood, but are any of the DI tokens your providing to AngularFire objects that aren't serializable with JSON.stringify? These guard-rails are new on our side and would explain this error.

[UnlikeMars]

I'm having the same issue.

Nothing changed on my side. I'm using a configuration as provided by Firebase. Not using any DI.
After all Karma tests completed, the following error is thrown in afterAll:

Chrome 87.0.4280.66 (Windows 10) ERROR
  An error was thrown in afterAll
  Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'FirebaseAppImpl'
      |     property 'firebase_' -> object with constructor 'Object'
      |     property 'apps' -> object with constructor 'Array'
      --- index 0 closes the circle
  TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'FirebaseAppImpl'
      |     property 'firebase_' -> object with constructor 'Object'
      |     property 'apps' -> object with constructor 'Array'
      --- index 0 closes the circle
      at JSON.stringify (<anonymous>)
      at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js:440:1
      at Array.some (<anonymous>)
      at ɵfetchInstance (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js:431:1)
      at MapSubscriber.project (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire-analytics.js:213:34)
      at MapSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:29:1)
      at MapSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
      at SwitchMapSubscriber.notifyNext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/switchMap.js:66:1)
      at SimpleInnerSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/innerSubscribe.js:10:1)
      at SimpleInnerSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
  error properties: Object({ rejection: TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'FirebaseAppImpl'
      |     property 'firebase_' -> object with constructor 'Object'
      |     property 'apps' -> object with constructor 'Array'
      --- index 0 closes the circle, promise: [object Promise], zone: Zone({ _parent: Zone({ _parent: Zone({ _parent: Zone({ _parent: null, _name: '<root>', _properties: Object({  }), _zoneDelegate: ZoneDelegate({ _taskCounts: Object({ microTask: 0, macroTask: 0, e
ventTask: 0 }), zone: <circular reference: Object>, _parentDelegate: null, _forkZS: null, _forkDlgt: null, _forkCurrZone: null, _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: null, _invokeZS: null, _invokeDlgt: null, _invokeCurrZone: null, _handleErr
orZS: null, _handleErrorDlgt: null, _handleErrorCurrZone: null, _scheduleTaskZS: null, _scheduleTaskDlgt: null, _scheduleTaskCurrZone: null, _invokeTaskZS: null, _invokeTaskDlgt: null, _invokeTaskCurrZone: null,  ...
  Error: Uncaught (in promise): TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'FirebaseAppImpl'
      |     property 'firebase_' -> object with constructor 'Object'
      |     property 'apps' -> object with constructor 'Array'
      --- index 0 closes the circle
  TypeError: Converting circular structure to JSON
      --> starting at object with constructor 'FirebaseAppImpl'
      |     property 'firebase_' -> object with constructor 'Object'
      |     property 'apps' -> object with constructor 'Array'
      --- index 0 closes the circle
      at JSON.stringify (<anonymous>)
      at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js:440:1
      at Array.some (<anonymous>)
      at ɵfetchInstance (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire.js:431:1)
      at MapSubscriber.project (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/fire/__ivy_ngcc__/fesm2015/angular-fire-analytics.js:213:34)
      at MapSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/map.js:29:1)
      at MapSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
      at SwitchMapSubscriber.notifyNext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/switchMap.js:66:1)
      at SimpleInnerSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/innerSubscribe.js:10:1)
      at SimpleInnerSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:49:1)
      at resolvePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:798:1)
      at resolvePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:750:1)
      at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:860:1
      at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:399:1)
      at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:323:1)
      at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:398:1)
      at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:273:1)
      at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:398:1)
      at Object.onInvokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28225:1)
      at ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:398:1)
      at <Jasmine>
      at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:117:1)
      at ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:378:1)
      at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:272:1)
      at ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:378:1)
      at Zone.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:210:1)
      at Zone.scheduleMicroTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:230:1)
      at scheduleResolveOrReject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:847:1)
      at resolvePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:785:1)

[joelmeaders]

I have this same issue in the latest angularfire and none of my analytics events are being logged anymore. I am not using any custom DI for analytics

[afriedma]

I have the same issue on Angular 10 and "@angular/fire@6.1.0, during lazy loading of my module.

  constructor(private analytics: AngularFireAnalytics) { }

  ngOnInit(): void {
    this.analytics.logEvent('share_completion', JSON.parse(JSON.stringify({ name: 'done'})));
  }

Does anyone a have workaround?

[jamesdaniels]

Cutting 6.1.2 this afternoon with what I'm hoping is a fix.