Adding error handling for different stores and components

README.md

@@ -82,7 +82,9 @@ Hello {$user?.uid}
 
 3. Listen to realtime data.
 
-Use the `$` as much as you want - it will only result in one Firebase read request. When all the subscriptions are removed, it will automatically unsubscribe.
+Use the `$` as much as you want - it will only result in one Firebase read request. When all the subscriptions are removed, it will automatically unsubscribe. To get the data from stores, use the `data` property, if an
+error occurs, the error property will be set with an Error instance.
+
 
 ```svelte
 <script>
@@ -92,8 +94,9 @@ Use the `$` as much as you want - it will only result in one Firebase read reque
   const post = docStore(firestore, 'posts/test');
 </script>
 
-{$post?.content}
-{$post?.title}
+{$post?.data?.content}
+{$post?.data?.title}
+{$post?.error?.message}
 ```
 
 Or better yet, use the built in `Doc` and `Collection` components for Firestore, or `Node` and `NodeList` components for Realtime Database. See below.
@@ -135,9 +138,9 @@ Subscribe to realtime data. The store will unsubscribe automatically to avoid un
   const posts = collectionStore(firestore, 'posts');
 </script>
 
-{$post?.content}
+{$post?.data?.content}
 
-{#each $posts as post}
+{#each $posts?.data as post}
 
 {/each}
 ```
@@ -301,16 +304,19 @@ Pass a `startWith` value to bypass the loading state. This is useful in SvelteKi
 
 ### Collection
 
-Collections provides array of objects containing the document data, as well as the `id` and `ref` for each result. It also provides a `count` slot prop for number of docs in the query.
+Collections provides array of objects containing the document data, as well as the `id` and `ref` for each result. It also provides a `count` slot prop for number of docs in the query. Errors can be handled with the `error` slot prop.
 
 ```svelte
-<Collection ref="posts" let:data let:count>
+<Collection ref="posts" let:data let:count let:error>
   <p>Fetched {count} documents</p>
   {#each data as post}
     {post.id}
     {post.ref.path}
     {post.content}
   {/each}
+  {#if error}
+    <p>Error: {error.message}</p>
+  {/if}
 </Collection>
 ```
 
@@ -376,49 +382,55 @@ Fetch lists of nodes from the Realtime Database and listen to their data in real
 
 ### DownloadURL
 
-DownloadURL provides a `link` to download a file from Firebase Storage and its `reference`. 
+DownloadURL provides a `link` to download a file from Firebase Storage and its `reference`. Errors can be handled with the `error` slot prop.
 
 ```svelte
-<DownloadURL ref={item} let:link let:ref>
-  <a href={link} download>Download {ref?.name}</a>
+<DownloadURL ref={item} let:link let:ref let:error>
+    <a href={link} download>Download {ref?.name}</a>
+    {#if error}
+        <p>Error: {error.message}</p>
+    {/if}
 </DownloadURL>
 ```
 
 ### StorageList
 
-StorageList provides a list of `items` and `prefixes` corresponding to the list of objects and sub-folders at a given Firebase Storage path. 
+StorageList provides a list of `items` and `prefixes` corresponding to the list of objects and sub-folders at a given Firebase Storage path. Errors can be handled with the `error` slot prop.
 
 ```svelte
-<StorageList ref="/" let:list>
-  <ul>
-    {#if list === null}
-      <li>Loading...</li>
-    {:else if list.prefixes.length === 0 && list.items.length === 0}
-      <li>Empty</li>
-    {:else}
-      <!-- Listing the prefixes -->
-      {#each list.prefixes as prefix}
-        <li>
-          {prefix.name}
-        </li>
-      {/each}
-      <!-- Listing the objects in the given folder -->
-      {#each list.items as item}
-        <li>
-          {item.name}
-        </li>
-      {/each}
+<StorageList ref="/" let:list let:error>
+    <ul>
+        {#if list === null}
+            <li>Loading...</li>
+        {:else if list.prefixes.length === 0 && list.items.length === 0}
+            <li>Empty</li>
+        {:else}
+          <!-- Listing the prefixes -->
+          {#each list.prefixes as prefix}
+              <li>
+                  {prefix.name}
+              </li>
+          {/each}
+          <!-- Listing the objects in the given folder -->
+          {#each list.items as item}
+              <li>
+                  {item.name}
+              </li>
+          {/each}
+        {/if}
+    </ul>  
+    {#if error}
+        <p>Error: {error.message}</p>
     {/if}
-  </ul>
 </StorageList>
 ```
 
 ### UploadTask
 
-Upload a file with progress tracking
+Upload a file with progress tracking. If error occurs, the `error` slot prop will be defined. The `snapshot` slot prop provides access to the upload task's `state`, `ref`, and `progress` percentage.
 
 ```svelte
-<UploadTask ref="filename.txt" data={someBlob} let:progress let:snapshot>
+<UploadTask ref="filename.txt" data={someBlob} let:progress let:snapshot let:error>
   {#if snapshot?.state === "running"}
     {progress}% uploaded
   {/if}
@@ -428,6 +440,10 @@ Upload a file with progress tracking
       <a href={link} download>Download</a>
     </DownloadURL>
   {/if}
+
+  {#if error}
+    <p>Error: {error.message}</p>
+  {/if}
 </UploadTask>
 ```
 

src/lib/components/Collection.svelte

@@ -18,6 +18,7 @@
   interface $$Slots {
     default: {
       data: Data[];
+      error: Error | null;
       ref: CollectionReference<Data[]> | Query<Data[]> | null;
       count: number;
       firestore?: Firestore;
@@ -27,7 +28,7 @@
 </script>
 
 {#if $store !== undefined}
-  <slot data={$store} ref={store.ref} count={$store?.length ?? 0} {firestore} />
+  <slot data={$store?.data} error={$store?.error} ref={store.ref} count={$store?.data?.length ?? 0} {firestore} />
 {:else}
   <slot name="loading" />
 {/if}

src/lib/components/Doc.svelte

@@ -16,7 +16,8 @@
 
   interface $$Slots {
     default: {
-      data: Data;
+      data: Data | null | undefined;
+      error: Error | null;
       ref: DocumentReference<Data> | null;
       firestore?: Firestore;
     };
@@ -25,7 +26,7 @@
 </script>
 
 {#if $store !== undefined && $store !== null}
-  <slot data={$store} ref={store.ref} {firestore} />
+  <slot data={$store.data} error={$store.error} ref={store.ref} {firestore} />
 {:else}
   <slot name="loading" />
 {/if}

src/lib/components/DownloadURL.svelte

@@ -9,13 +9,13 @@
     const store = downloadUrlStore(storage!, ref);
 
     interface $$Slots {
-        default: { link: string | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        default: { link: string | null; error: Error | null; ref: StorageReference | null; storage?: FirebaseStorage },
         loading: {},
     }
 </script>
 
-{#if $store !== undefined}
-    <slot link={$store} ref={store.reference} {storage}/>
+{#if $store !== undefined && $store !== null}
+    <slot link={$store.data} error={$store.error} ref={store.reference} {storage}/>
 {:else}
     <slot name="loading" />
 {/if}

src/lib/components/StorageList.svelte

@@ -9,13 +9,13 @@
     const listStore = storageListStore(storage!, ref);
 
     interface $$Slots {
-        default: { list: ListResult | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        default: { list: ListResult | null; ref: StorageReference | null; storage?: FirebaseStorage, error: Error | null },
         loading: {},
     }
 </script>
 
-{#if $listStore !== undefined}
-    <slot list={$listStore} ref={listStore.reference} {storage} />
+{#if $listStore !== undefined && $listStore !== null}
+    <slot list={$listStore.data ?? null} error={$listStore.error} ref={listStore.reference} {storage} />
 {:else}
     <slot name="loading" />
 {/if}

src/lib/components/UploadTask.svelte

@@ -19,16 +19,17 @@
   interface $$Slots {
     default: {
       task: UploadTask | undefined;
+      error: Error | null;
       ref: StorageReference | null;
       snapshot: UploadTaskSnapshot | null;
       progress: number;
       storage?: FirebaseStorage;
     };
   }
 
-  $: progress = ($upload?.bytesTransferred! / $upload?.totalBytes!) * 100 ?? 0;
+  $: progress = ($upload?.data?.bytesTransferred! / $upload?.data?.totalBytes!) * 100 ?? 0;
 </script>
 
-{#if $upload !== undefined}
-  <slot task={$upload?.task} snapshot={$upload} {progress} ref={upload.reference} {storage} />
+{#if $upload !== undefined && $upload !== null}
+  <slot task={$upload?.data?.task} error={$upload?.error} snapshot={$upload.data} {progress} ref={upload.reference} {storage} />
 {/if}

src/lib/stores/auth.ts

@@ -1,5 +1,4 @@
 import { writable } from "svelte/store";
-import { getFirebaseContext } from "./sdk.js";
 import { onAuthStateChanged, type Auth } from "firebase/auth";
 
 /**