search

angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.64k stars 2.2k forks source link

Firebase Analytics issue on angular 11 #2672

Closed jtushar53 closed 3 years ago

jtushar53 commented 3 years ago

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 image

Expected behavior

Actual behavior

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

jimmykane commented 3 years ago

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

jimmykane commented 3 years ago

6.1.0-rc.4 and above causes this

jamesdaniels commented 3 years ago

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 commented 3 years ago

Getting the same error also.

jimmykane commented 3 years ago

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

jamesdaniels commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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