fix: restore PDF downloads and locale switching

Author: Sebastian Fellner 💯

components/ChatVisualization/PdfDownloadPopup.vue

@@ -204,8 +204,12 @@ export default {
       GTAG_PAYMENT,
       GTAG_PDF,
       progress: 0,
+      pdfWorker: null,
     };
   },
+  beforeUnmount() {
+    this.closePdfWorker();
+  },
   methods: {
     handleFreePdfClick() {
       this.downloadSample();
@@ -225,9 +229,12 @@ export default {
     },
     onError() {},
     async download(isSample = false) {
-      if (process.browser) {
-        this.isLoading = true;
-        this.progress = 0;
+      if (!import.meta.client) return;
+
+      this.isLoading = true;
+      this.progress = 0;
+
+      try {
         // the graphs need to be converted to an image beforehand, as the web worker has no access to document
         const chatTimeline = await loadImage("#chat-timeline");
         const messagesPerTimeOfDay = await loadImage(
@@ -237,16 +244,17 @@ export default {
         const radarMonth = await loadImage("#radar-month");
         const radarDay = await loadImage("#radar-day");
 
-        const worker = new PDFWorker();
-        worker.addEventListener("message", this.workerResponseHandler);
+        this.pdfWorker = new PDFWorker();
+        this.pdfWorker.addEventListener("message", this.workerResponseHandler);
+        this.pdfWorker.addEventListener("error", this.pdfErrorHandler);
 
         const chat = objectToDictionary(this.chat); // remove functions
         chat.funFacts = await this.chat.getFunFacts(); // set funfacts beforehand instead of using function call
 
-        worker.postMessage({
+        this.pdfWorker.postMessage({
           // pass all data to service worker
           chat: chat,
-          attachments: this.attachments,
+          attachments: objectToDictionary(this.attachments),
           ego: this.ego,
           isSample,
           chatTimeline,
@@ -255,6 +263,8 @@ export default {
           radarMonth,
           radarDay,
         });
+      } catch (error) {
+        this.pdfErrorHandler(error);
       }
     },
     downloadSample() {
@@ -269,11 +279,27 @@ export default {
         const blob = new Blob([data.data], { type: "application/pdf" });
         saveAs(blob, "WhatsAnalyze - " + this.ego);
         this.isLoading = false;
+        this.closePdfWorker();
       }
       if (data.type === "progress") {
         this.progress = data.data;
       }
     },
+    pdfErrorHandler(error) {
+      console.error("PDF generation failed", error);
+      this.$sentry?.captureException(error);
+      this.isLoading = false;
+      this.progress = 0;
+      this.closePdfWorker();
+    },
+    closePdfWorker() {
+      if (!this.pdfWorker) return;
+
+      this.pdfWorker.removeEventListener("message", this.workerResponseHandler);
+      this.pdfWorker.removeEventListener("error", this.pdfErrorHandler);
+      this.pdfWorker.terminate();
+      this.pdfWorker = null;
+    },
     gtagEvent,
   },
 };

components/LanguageSwitcher.vue

@@ -1,64 +1,36 @@
 <template>
-  <select v-model="selectedLocale" class="text-md-h3 text-h4">
+  <select
+    :value="locale"
+    class="text-md-h3 text-h4"
+    aria-label="Select language"
+    @change="setLocale"
+  >
     <option
       v-for="locale in availableLocales"
       :key="locale.code"
       :value="locale.code"
     >
-      {{ locale.flag }}
+      {{ flags[locale.code] }} {{ locale.name }}
     </option>
   </select>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      selectedLocale: this.$i18n.locale,
-      availableLocales: [
-        {
-          code: "en",
-          name: "English",
-          flag: "🇬🇧",
-          iso: "en-GB",
-        },
-        {
-          code: "de",
-          name: "Deutsch",
-          flag: "🇩🇪",
-          iso: "de-DE",
-        },
-        {
-          code: "es",
-          name: "Español",
-          flag: "🇪🇸",
-          iso: "es-ES",
-        },
-        {
-          code: "pt",
-          name: "Português",
-          flag: "🇧🇷",
-          iso: "pt-PT",
-        },
-        {
-          code: "fr",
-          name: "Français",
-          flag: "🇫🇷",
-          iso: "fr-FR",
-        },
-        {
-          code: "it",
-          name: "Italiano",
-          flag: "🇮🇹",
-          iso: "it-IT",
-        },
-      ],
-    };
-  },
-  watch: {
-    selectedLocale(newLocale) {
-      this.$router.push(this.switchLocalePath(newLocale));
-    },
-  },
+<script setup>
+const { locale, locales } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
+
+const flags = {
+  en: "🇬🇧",
+  de: "🇩🇪",
+  es: "🇪🇸",
+  pt: "🇧🇷",
+  fr: "🇫🇷",
+  it: "🇮🇹",
+};
+
+const availableLocales = computed(() => locales.value);
+
+const setLocale = (event) => {
+  return navigateTo(switchLocalePath(event.target.value));
 };
 </script>

nuxt.config.js

@@ -133,12 +133,12 @@ export default defineNuxtConfig({
     defaultLocale: "en",
     strategy: "prefix_except_default",
     locales: [
-      { code: "en", language: "en-US" },
-      { code: "de", language: "de-DE" },
-      { code: "es", language: "es-ES" },
-      { code: "fr", language: "fr-FR" },
-      { code: "pt", language: "pt-PT" },
-      { code: "it", language: "it-IT" },
+      { code: "en", language: "en-US", name: "English" },
+      { code: "de", language: "de-DE", name: "Deutsch" },
+      { code: "es", language: "es-ES", name: "Español" },
+      { code: "fr", language: "fr-FR", name: "Français" },
+      { code: "pt", language: "pt-PT", name: "Português" },
+      { code: "it", language: "it-IT", name: "Italiano" },
     ],
     detectBrowserLanguage: {
       alwaysRedirect: false,

tests/e2e/home.spec.js

@@ -44,6 +44,21 @@ test("analyzes the example chat without uploading its contents", async ({
     return body.includes("Jane Doe") || body.includes("John Doe");
   });
   expect(uploadedChatRequests).toEqual([]);
+
+  const downloadPromise = page.waitForEvent("download", { timeout: 60_000 });
+  await page
+    .getByRole("button", { name: /Download free preview PDF/i })
+    .click();
+  await downloadPromise;
+});
+
+test("switches to a localized route", async ({ page }) => {
+  await page.getByLabel("Select language").selectOption("de");
+
+  await expect(page).toHaveURL(/\/de\/?$/);
+  await expect(
+    page.getByText("Analysiere dein WhatsApp Chat in Sekunden", { exact: true })
+  ).toBeVisible();
 });
 
 test("renders migrated markdown content", async ({ page }) => {

utils/utils.js

@@ -35,19 +35,27 @@ export function lastDate(chat) {
 
 // this is used on objects that should be transfered to the web worker
 // the webworker can not receive functions
-export function objectToDictionary(obj, dict = {}) {
-  for (const [key, value] of Object.entries(obj)) {
-    if (
-      typeof value === "object" &&
-      value !== null &&
-      !Array.isArray(value) &&
-      !(value instanceof Date)
-    ) {
-      objectToDictionary(value, (dict[key] = {}));
-    } else if (typeof value !== "function") {
-      dict[key] = value;
-    }
+export function objectToDictionary(value) {
+  if (typeof value === "function") return undefined;
+  if (value === null || typeof value !== "object") return value;
+  if (
+    value instanceof Date ||
+    value instanceof ArrayBuffer ||
+    ArrayBuffer.isView(value)
+  ) {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(objectToDictionary);
+  }
+
+  const dict = {};
+  for (const [key, nestedValue] of Object.entries(value)) {
+    const clonedValue = objectToDictionary(nestedValue);
+    if (clonedValue !== undefined) dict[key] = clonedValue;
   }
+
   return dict;
 }
 
@@ -63,9 +71,12 @@ export const getImgSizes = function (imgUrl) {
 };
 
 export const loadImage = async function (selector) {
-  const imgUrl = document
-    .querySelector(selector + ">*>canvas")
-    .toDataURL("image/png");
+  const canvas = document.querySelector(`${selector} canvas`);
+  if (!(canvas instanceof HTMLCanvasElement)) {
+    throw new Error(`Could not find chart canvas in "${selector}"`);
+  }
+
+  const imgUrl = canvas.toDataURL("image/png");
   const sizes = await getImgSizes(imgUrl);
   return { img: imgUrl, width: sizes[0], height: sizes[1] };
 };