Could not reach Cloud Firestore Backend when browser tab was inactive (AngularFire)
Tobias Kaufmann
In my Angular application, I have a home component that loads the content of a profile from Firestore via the provided URL (for example: mypage.com/username searches for a profile named "username"). Now I thought this was working fine but I noticed some very strange behaviour:
- loading a profile in an active tab (meaning the user is currently on this tab) always loads the profile
- opening the profile in a new, currently inactive tab (meaning the user has currently still opened a different tab) and letting the tab fully load also works
- opening the profile in a new tab and switching to it WHILE it's still loading produces the following error: Could not reach Firestore backend. Backend didn't respond within 10 seconds...
In the last case Firestore throws an error and the query just returns an empty array. At this point I'd usually show a 404 message because I'd assume the profile couldn't be found (although it exists in this case). If this error occurs, the Firestore query still returns the result object when the tab goes active (user switches to this tab) but keep in mind that this happens AFTER it already threw an error and returned an empty array (and my actions (show 404) are based on the first result)
I am using @angular/fire 6.0.0 but this behaviour also exists with previous versions like 5.2.3.
app-routing.module.ts
const routes: Routes = [
{ path: '', component: LandingComponent },
{ path: 'login', component: LoginComponent },
{ path: ':id', component: HomeComponent }
];
home.component.ts:
ngOnInit() {
this.route.paramMap.subscribe(param => {
let routeParam = param.get("id").toLowerCase()
this.firebaseServcie.queryProfileByUniqueName(routeParam).subscribe(res => {
if (res.length > 0) {
//profile found ... some further actions
}
else {
//profile not found ... usually show 404 message
}
});
}
}
firebase.service.ts:
queryProfileByUniqueName(uniqueName: string): Observable<Profile[]> {
return this.firestore.collection<Profile>("profiles", ref => ref.where('uniqueName', '==', uniqueName))
.valueChanges();
}
For this particular use case I've made a workaround by iterating with ngFor over an Obervable array by using the async pipe. This kind of solves my issue but the error still get's thrown the way I described it above. I don't know why I'm getting downvoted but I'd really like to find out if this is an issue from my side or from Firebase.
Kato Richardson
--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/a0a5b5c9-b237-41ac-b0f3-4f603f5a5ac6%40googlegroups.com.