Skip to content

Firebase Analytics issue on angular 11 #2672

Closed
#2687
Closed
Firebase Analytics issue on angular 11#2672
#2687

Description

@jtushar53
jtushar53
opened on Nov 19, 2020

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.

Activity

  1. jimmykane commented on Nov 20, 2020

    @jimmykane
    jimmykane
    on Nov 20, 2020

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

  2. jimmykane commented on Nov 20, 2020

    @jimmykane
    jimmykane
    on Nov 20, 2020

    6.1.0-rc.4 and above causes this

  3. jamesdaniels commented on Nov 21, 2020

    @jamesdaniels
    jamesdaniels
    on Nov 21, 2020
    Contributor

    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.

  4. acadianaapps commented on Nov 21, 2020

    @acadianaapps
    acadianaapps
    on Nov 21, 2020

    Getting the same error also.

  5. jimmykane commented on Nov 21, 2020

    @jimmykane
    jimmykane
    on Nov 21, 2020

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

  6. jamesdaniels commented on Nov 21, 2020

    @jamesdaniels
    jamesdaniels
    on Nov 21, 2020
    Contributor

    @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.

  7. UnlikeMars commented on Nov 22, 2020

    @UnlikeMars
    UnlikeMars
    on Nov 22, 2020

    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)

  8. joelmeaders commented on Nov 23, 2020

    @joelmeaders
    joelmeaders
    on Nov 23, 2020

    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

  9. afriedma commented on Nov 23, 2020

    @afriedma
    afriedma
    on Nov 23, 2020

    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?

  10. jamesdaniels
    closed this as completedin #2687on Nov 24, 2020

  11. jamesdaniels commented on Nov 24, 2020

    @jamesdaniels
    jamesdaniels
    on Nov 24, 2020
    Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions