cannot handle error from useFirestoreCollectionData

[perryd01]

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]);

[aadito123]

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.

[aadito123]

tagging @jhuleatt to hopefully increase visibility

[jaskaye17]

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.

[Yey007]

Same here. Anyone have something on this?

[beamercola]

same

[jbaldassari]

useFirestoreDoc also has this issue.

[IAmJamesMudge]

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.

[rangel-rangelov]

Bump, same here.

[samdeen]

Bump, when will this be fixed?