Can't unsubscribe from realtime updates: Uncaught Error in onSnapshot: Error: Missing or insufficient permissions

Question

I'm having some trouble unsubscribing from updates using Firestore's onSnapshot method.

I do some processing on a file with an external worker. It updates the Firestore database when it's finished. I listen for these updates on my front end using this code:

import store from "../store";
import db from "./firebase"
import { updateModelConversionProgress } from "../actions/updateModelConversionProgress";

const listenForConversions = (resource, id) => {
  const modelRef = db.collection(resource).doc(id);
  const unsubscribe = db.collection(resource).doc(id).onSnapshot(() => {});
  modelRef.onSnapshot(doc => {
    const model = doc.data();
    if (model) {
      store.dispatch(
        updateModelConversionProgress(
          id,
          model.file.uniqueFilename,
          model.conversionStatus
        )
      );
    }
    if (model && model.conversionStatus === "completed") {
      // Unsubscribe from updates
      unsubscribe();
    }
  });
};

export default listenForConversions;

This all works great, my UI updates when the database is updated. However, if I go to delete this file I get the following error in the console: Uncaught Error in onSnapshot: Error: Missing or insufficient permissions.

I assume this has something to do with the fact that the document has been deleted and thus the user doesn't have access to it anymore (I have security rules that only allow users to access documents that have their userID) hence the Missing or insufficient permissions part. Regardless, the UI should no longer be listening for updates, which makes me wonder why I'm getting this error message? I've tried passing an empty callback using the same document reference (i.e. const unsubscribe = modelRef.onSnapshot(() => {});) but then I just get the error message twice. The documentation implies that I should use a different document reference anyway. I'm pretty sure I'm not unsubscribing properly, but I'm not sure what to change. Any help would be very much appreciated.

Answer 1

The error you are seeing is intended. You are only able to view data if it is explicitly permitted. Since there is no data to execute the rules on, the permission is not explicitly given therefore the error.

If you don't want to see the error hit the console or bubble up, you can always pass an onError function that handles that specific error.