Angular 17 SSR -> _FirebaseError: Performance: Window is not available. (performance/no window)

[jjgriff93]

trafficstars

Version info

Angular: 17.0.8

Firebase: 10.7.1

AngularFire: 17.0.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 18, Ionic 7, MacOS

How to reproduce these conditions

Steps to set up and reproduce

1. New Angular 17 project
2. ng add @angular/fire@17
3. ng add @angular/ssr
4. Set up Performance as per https://github.com/angular/angularfire/blob/master/docs/performance.md
5. ng build

Debug output

⠇ Building...
_FirebaseError: Performance: Window is not available. (performance/no window).
    at _Api (/app/.angular/prerender-root/node_modules/@firebase/performance/dist/esm/index.esm2017.js:127:33)
    at Function.getInstance (/app/.angular/prerender-root/node_modules/@firebase/performance/dist/esm/index.esm2017.js:202:27)
    at _Trace (/app/.angular/prerender-root/node_modules/@firebase/performance/dist/esm/index.esm2017.js:1032:24)
    at trace (/app/.angular/prerender-root/node_modules/@firebase/performance/dist/esm/index.esm2017.js:1492:12)
    at <anonymous> (/app/.angular/prerender-root/39307160-ad59-4f3c-a738-b9eb3f06e2ec/node_modules/@angular/fire/fesm2022/angular-fire.mjs:216:44)
    at <anonymous> (/app/.angular/prerender-root/39307160-ad59-4f3c-a738-b9eb3f06e2ec/node_modules/@angular/fire/fesm2022/angular-fire.mjs:148:57)
    at _ZoneDelegate.invoke (/app/.angular/prerender-root/node_modules/zone.js/fesm2015/zone.js:368:26)
    at _Zone.run (/app/.angular/prerender-root/node_modules/zone.js/fesm2015/zone.js:129:43)
    at _NgZone.runOutsideAngular (/app/.angular/prerender-root/node_modules/@angular/core/fesm2022/core.mjs:14619:28)
    at runOutsideAngular (/app/.angular/prerender-root/39307160-ad59-4f3c-a738-b9eb3f06e2ec/node_modules/@angular/fire/fesm2022/angular-fire.mjs:148:33) {
  code: 'performance/no window',
  customData: {}
An unhandled exception occurred: Performance: Window is not available. (performance/no window).
See "/private/var/folders/_1/812j7dg974961xvzh0b7h5lh0000gn/T/ng-zxfYjy/angular-errors.log" for further details.
/node_modules/rxjs/dist/cjs/internal/util/reportUnhandledError.js:13
            throw err;
            ^

Expected behavior

AngularFire should check if rendering on a browser before calling Performance code (which relies on window being available)

Actual behavior

No check is done, so when calling the Performance library, this above error occurs as soon as pre-rendering on the server happens and window is accessed but isn't available due to not running in a browser

[jjgriff93]

For others hitting this issue you can work around it like so:

constructor(
    private performance: Performance,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.isBrowser = isPlatformBrowser(this.platformId);
    if (this.isBrowser) {
      this.startupTrace = trace(this.performance, 'angularStartup');
      this.startupTrace.start();
    }
}