Closed
Description
Operating System
Windows 11, Chrome, Edge, Android, iOS
Environment (if applicable)
Chrome all major versions, Edge, Safari iOS tested on 16
Firebase SDK Version
10.14
Firebase SDK Product(s)
Firestore
Project Tooling
Vanilla JS.
Also tried on other web frameworks.
Detailed Problem Description
If Firestore persistence is active and a doc is cached. Then the user clears the site data, and and doc is updated on backend.
Cache gets corrupted and now the firestore listener returns NULL document FROM CACHE
I, leave some concrete steps for reproduction below.
(You have to put your own firebase_api_key for security)
Firebase.err.mp4
Steps and code to reproduce issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Firebase Cache Bug</title>
</head>
<script type="module">
//For this sample Im using vanilla JS and firebase from CDN.
//But the same error was tested on sveltekit + vite and firebase js sdk.
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js';
import {
initializeFirestore,
CACHE_SIZE_UNLIMITED,
persistentLocalCache,
persistentMultipleTabManager,
onSnapshot,
doc,
getDoc,
clearIndexedDbPersistence,
} from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js';
import {
signInWithEmailAndPassword,
onAuthStateChanged,
} from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js';
const firebaseConfig = {
//Change this to your FIREBASE API KEYS
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = initializeFirestore(app, {
localCache: persistentLocalCache(),
});
// You can use this function to clear all the persistence on your IndexedDB.
// This will fix the problem
//
//
/*clearIndexedDbPersistence(db);*/
//Getting the documentData
const docRef = doc(db, 'tests', 'test_document');
const unsub = onSnapshot(docRef, (doc) => {
console.log('Current doc: ', doc);
if (doc.exists()) {
document.getElementById('display').innerHTML = doc.data().data;
}
document.getElementById('diplay-from-cache').innerHTML = JSON.stringify(
doc.metadata,
null,
2
);
});
</script>
<body>
<h1>Firebase BUG</h1>
<blockquote>
If user clear site data and document is modified from outside, firestore
IndexedDB cache return null document from cache.
</blockquote>
<p>Setup:</p>
<ul>
<li>1. Change your FIREBASE API KEYS</li>
<li>2. Create a document on tests/test_document {data:'Hello world'}</li>
</ul>
<hr />
<ul>
<li>1. Refresh page (To cache the doc)</li>
<li>3. Clear site data</li>
<li>4. Modify the document on firebase console</li>
<li>5. Refresh</li>
<li>6. Refresh Again... (Doc return blank from cache:true)</li>
</ul>
<div class="card">
<h2 class="card-header">DocData:</h2>
<p id="display"></p>
<h2 class="card-header">Metadata:</h2>
<pre id="diplay-from-cache"></pre>
</div>
<pre id="display-auth"></pre>
</body>
</html>
<style>
.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
}
.card-header {
font-weight: bold;
}
</style>