Merge pull request #806 from MuckRock/allanlasser/issue758

Handles errors when rendering PDF in viewer
MuckRock · Nov 4, 2024 · ca90f75 · ca90f75
2 parents 1e1fcce + d1e9390
commit ca90f75
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 29 deletions.
diff --git a/src/lib/components/viewer/PDF.svelte b/src/lib/components/viewer/PDF.svelte
@@ -19,9 +19,11 @@
   import {
     getCurrentPage,
     getDocument,
+    getErrors,
     getPDF,
     getZoom,
   } from "./ViewerContext.svelte";
+  import Error from "../common/Error.svelte";
 
   const documentStore = getDocument();
   const currentPage = getCurrentPage();
@@ -32,42 +34,56 @@
   $: scale = zoomToScale($zoom);
   $: sizes = document.page_spec ? pageSizes(document.page_spec) : [];
   $: sections = getSections(document);
+  $: errors = getErrors();
 
   onMount(() => {
-    $pdf.then((p) => {
-      // handle missing page_spec
-      if (sizes.length === 0) {
-        sizes = Array(p.numPages).fill([0, 0]);
-      }
+    $pdf
+      .then((p) => {
+        // handle missing page_spec
+        if (sizes.length === 0) {
+          sizes = Array(p.numPages).fill([0, 0]);
+        }
 
-      if ($currentPage > 1) {
-        scrollToPage($currentPage);
-      }
+        if ($currentPage > 1) {
+          scrollToPage($currentPage);
+        }
 
-      // @ts-ignore
-      window.pdf = p;
-    });
+        // @ts-ignore
+        window.pdf = p;
+      })
+      .catch((e) => {
+        console.error(e);
+        errors.update((errs) => [...errs, e]);
+      });
   });
 
   let width: number;
 </script>
 
-<div
-  class="pages"
-  bind:clientWidth={width}
-  class:sm={width < remToPx(35)}
-  class:lg={width > remToPx(70)}
->
-  {#each sizes as [width, height], n}
-    {@const page_number = n + 1}
-    {#if sections[n]}
-      <h3 class="section">
-        {sections[n].title}
-      </h3>
-    {/if}
-    <PdfPage {page_number} {scale} {width} {height} />
-  {/each}
-</div>
+{#if Boolean($errors?.length)}
+  <Error>
+    {#each $errors as error}
+      <p>{String(error)}</p>
+    {/each}
+  </Error>
+{:else}
+  <div
+    class="pages"
+    bind:clientWidth={width}
+    class:sm={width < remToPx(35)}
+    class:lg={width > remToPx(70)}
+  >
+    {#each sizes as [width, height], n}
+      {@const page_number = n + 1}
+      {#if sections[n]}
+        <h3 class="section">
+          {sections[n].title}
+        </h3>
+      {/if}
+      <PdfPage {page_number} {scale} {width} {height} />
+    {/each}
+  </div>
+{/if}
 
 <style>
   .pages {

diff --git a/src/lib/components/viewer/ViewerContext.svelte b/src/lib/components/viewer/ViewerContext.svelte
@@ -87,6 +87,10 @@ layouts, stories, and tests.
   export function getZoom(): Writable<Zoom> {
     return getContext("zoom");
   }
+
+  export function getErrors(): Writable<Error[]> {
+    return getContext("errors");
+  }
 </script>
 
 <script lang="ts">
@@ -102,6 +106,7 @@ layouts, stories, and tests.
   export let mode: ViewerMode = "document";
   export let query: string = "";
   export let zoom: Zoom = 1;
+  export let errors: Error[] = [];
 
   // https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentProxy.html
   export let pdf: Writable<Promise<pdfjs.PDFDocumentProxy>> = writable(
@@ -131,11 +136,13 @@ layouts, stories, and tests.
   setContext("zoom", writable(zoom));
   setContext("progress", progress);
   setContext("pdf", pdf);
+  setContext("errors", writable(errors));
 
   $: currentDoc = getDocument();
   $: currentMode = getCurrentMode();
   $: currentPage = getCurrentPage();
   $: currentNote = getCurrentNote();
+  $: currentErrors = getErrors();
 
   $: noteMatchingPageHash = (note: Note) =>
     note.id === noteFromHash($pageStore.url.hash);
@@ -168,7 +175,11 @@ layouts, stories, and tests.
       task.onProgress = (p: DocumentLoadProgress) => {
         $progress = p;
       };
-      $pdf = task.promise;
+      $pdf = task.promise.catch((error) => {
+        console.error(error);
+        $currentErrors = [...$currentErrors, error];
+        return Promise.reject(error);
+      });
     }
   });
 

diff --git a/src/lib/components/viewer/stories/PDF.stories.svelte b/src/lib/components/viewer/stories/PDF.stories.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { rest } from "msw";
-  import type { Document, Note, Section, ViewerMode } from "@/lib/api/types";
+  import type { Document, Section } from "@/lib/api/types";
 
   import { Story, Template } from "@storybook/addon-svelte-csf";
 
@@ -146,3 +146,17 @@
     },
   }}
 />
+
+<Story
+  name="With Errors"
+  args={{
+    ...args,
+    context: {
+      ...args.context,
+      errors: [
+        new TypeError("Something went wrong :("),
+        new TypeError("And another thing, too!"),
+      ],
+    },
+  }}
+/>