cannot handle error from useFirestoreCollectionData

Version info

React: 18.2.0

Firebase: 9.9.0

ReactFire: 4.2.2

Other (e.g. Node, browser, operating system) (if applicable):
Next.js 12.2.2

Test case

use useFirestoreCollectionData and handle FirebaseError: Missing or insufficient permissions.

Steps to reproduce

Set permissions in firebase console and set a rule that doesn't allow the query for a user
Make the query

const { status, data: users, error } = useFirestoreCollectionData(usersQuery);

Expected behavior

The hook doesn't throw and the error is in error variable

Actual behavior

The hook throws and error cannot be handled without try catch (that should't be used?)

reactfire/src/useObservable.ts

Lines 120 to 134 in 9754f86

    
           React.useEffect(() => { 
        
             const subscription = observable.subscribe({ 
        
               next: () => { 
        
                 dispatch('value'); 
        
               }, 
        
               error: (e) => { 
        
                 dispatch('error'); 
        
                 throw e; 
        
               }, 
        
               complete: () => { 
        
                 dispatch('complete'); 
        
               }, 
        
             }); 
        
             return () => subscription.unsubscribe(); 
        
           }, [observable]);

I have a similar issue with useFirestoreDocData and useFirestoreDocDataOnce.

The error actually originates from the SuspenseSubject class which throws an error when the value property is read while the Subject has an error i.e. Firebase Permission Error.

This error is also cannot be caught without a React Error Boundary. I think it would be better to pass in a flag like throwErrorInObservable that allows it to return the initialValue or just undefined to represent the error state. Would be more convenient to check for errors synchronously using the error attribute in the ObservableStatus. I would not mind making a PR for this if maintainers can sign off on it.

reactfire/src/SuspenseSubject.ts

Lines 51 to 61 in 9754f86

    
           get value(): T { 
        
             // TODO figure out how to reset the cache here, if I _reset() here before throwing 
        
             // it doesn't seem to work. 
        
             // As it is now, this will burn the cache entry until the timeout fires. 
        
             if (this._error) { 
        
               throw this._error; 
        
             } else if (!this.hasValue) { 
        
               throw Error('Can only get value if SuspenseSubject has a value'); 
        
             } 
        
             return this._value as T; 
        
           }

Another approach could be to not set hasValue as true when there is an error however it seems that there might be a lot of code already dependent on such behaviour.

@jhuleatt

tagging @jhuleatt to hopefully increase visibility

Bumping this as well. Crashing on FirebaseError: Missing or insufficient permissions renders this library unusable for me as this is a valid use case which I am unable to handle.

Same here. Anyone have something on this?

same

useFirestoreDoc also has this issue.

Bump. I can't use this library either because of this issue. Wrapping the entire function body in a try/catch does allow you to catch the error but is not tenable.

Bump, same here.

Bump, when will this be fixed?

fix: surface observable errors via status instead of re-throwing

fix: surface observable errors via status instead of re-throwing (#735)

Fixed by #735, merged into the v5 branch.

The unconditional throw you linked at useObservable.ts#L120-L134 is exactly what changed. In non-suspense mode (the default) errors are no longer thrown; they are surfaced via status with the error on error, which is the behavior you asked for:

const { status, data: users, error } = useFirestoreCollectionData(usersQuery);
if (status === 'error') {
  // error is the FirebaseError, e.g. "Missing or insufficient permissions."
}

No try/catch needed. Previously status: 'error' was unreachable in practice because the throw happened first.

In suspense mode (suspense: true) errors are still thrown so an Error Boundary can catch them. That is intentional and unchanged.

Please note this ships in 5.0.0, not in any 4.x release, since the change is breaking for anyone currently relying on an Error Boundary in non-suspense mode. See the v4 to v5 upgrade guide for the migration path.

Navigation Menu

Repository navigation

cannot handle error from useFirestoreCollectionData #540

Version info

Test case

Steps to reproduce

Expected behavior

Actual behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	React.useEffect(() => {
	const subscription = observable.subscribe({
	next: () => {
	dispatch('value');
	},
	error: (e) => {
	dispatch('error');
	throw e;
	},
	complete: () => {
	dispatch('complete');
	},
	});
	return () => subscription.unsubscribe();
	}, [observable]);

	get value(): T {
	// TODO figure out how to reset the cache here, if I _reset() here before throwing
	// it doesn't seem to work.
	// As it is now, this will burn the cache entry until the timeout fires.
	if (this._error) {
	throw this._error;
	} else if (!this.hasValue) {
	throw Error('Can only get value if SuspenseSubject has a value');
	}
	return this._value as T;
	}

cannot handle error from useFirestoreCollectionData #540

Description

Version info

Test case

Steps to reproduce

Expected behavior

Actual behavior

Activity

aadito123 commented on Sep 6, 2022

aadito123 commented on Sep 13, 2022

jaskaye17 commented on Dec 3, 2022

utkudotdev commented on Dec 4, 2022

beamercola commented on Dec 20, 2022

jbaldassari commented on Jan 5, 2023

IAmJamesMudge commented on Feb 23, 2024

rangel-rangelov commented on Apr 3, 2024

samdeen commented on May 21, 2024

tyler-reitz commented on Jul 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions