Skip to content

QuotaExceededError for RemoteConfig on Android <10 #3177

Open
@sanderschnydrig

Description

@sanderschnydrig

Version info

Angular: 11.2.14

Firebase: 8.10.0

AngularFire: 6.1.5

Other (e.g. Ionic/Cordova, Node, browser, operating system): @capacitor/core: 3.3.3, node: 16.14.0, npm: 8.5.0, MacOS Monetery 12.2.1

How to reproduce these conditions

Stackblitz wont demonstrate the issue as it only seems to happen on Samsung devices with Android 9 or lower. Maybe Letsencrypt issue since the support for that has been dropped on those Android APIs?

Tested on Galaxy Nexus with API 28.

Steps to set up and reproduce
app.module.ts

import { AngularFireRemoteConfigModule, DEFAULTS, SETTINGS } from '@angular/fire/remote-config';

function initializeRemoteConfig(remoteConfig: RemoteConfigService) {
  return () => remoteConfig.init()
}

function initializeTheming(theming: ThemingService) {
  return () => theming.init()
}

imports: [
    AngularFireRemoteConfigModule,
],
providers: [
    { provide: DEFAULTS, useValue: { darkMode: false } },
    {
      provide: APP_INITIALIZER,
      useFactory: initializeRemoteConfig,
      deps: [RemoteConfigService],
      multi: true
    },
   {
      provide: APP_INITIALIZER,
      useFactory: initializeTheming,
      deps: [ThemingService],
      multi: true
    }
]

remote-config.service.ts

import { Injectable } from '@angular/core';
import { AngularFireRemoteConfig } from '@angular/fire/remote-config';

@Injectable({
  providedIn: 'root'
})
export class RemoteConfigService {
  constructor(
    private remoteConfig: AngularFireRemoteConfig,
  ) { }

  async init() {
    await this.remoteConfig.ensureInitialized()
  }

  public getString(key: string) {
    return this.remoteConfig.fetchAndActivate().then(async () => {
      const value = await this.remoteConfig.getString(key)
      return value
    })
  }

  public getBoolean(key: string) {
    return this.remoteConfig.fetchAndActivate().then(async () => {
      const value = await this.remoteConfig.getBoolean(key)
      return value
    })
  }
}

theming.service.ts

@Injectable({
  providedIn: 'root'
})
export class ThemingService implements OnDestroy {
constructor(
    private remoteConfig: RemoteConfigService,
) { }

async init() {
    this.remoteConfigDarkMode = await this.remoteConfig.getBoolean('darkMode')
}
}

Debug output

** Errors in the JavaScript console **
Screenshot 2022-03-11 at 16 26 35

** Output from firebase.database().enableLogging(true); **

** Screenshots **
Screenshot 2022-03-11 at 17 03 56

Expected behavior

fetchAndActivate() to not halt code execution on Android <10 and instead provide a fallback like remoteconfig defaults

Actual behavior

Angular will never finish APP_INITIALIZER

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