fix: app resvg crashes (#1590)

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

Author: gaspergrom

frontend/app/components/modules/project/views/contributors.vue

@@ -140,6 +140,12 @@ const tmpClickedItem = ref('');
 const { scrollToTarget, scrollToTop } = useScroll();
 
 const onSideNavUpdate = (value: string) => {
+  // Skip DOM operations during SSR
+  if (import.meta.server) {
+    activeItem.value = value;
+    return;
+  }
+
   tmpClickedItem.value = value;
   if (value === sideNavItems[0]?.key) {
     scrollToTop();

frontend/app/components/modules/project/views/overview.vue

@@ -107,7 +107,7 @@ const { data: overviewData, status, error, suspense } = OVERVIEW_API_SERVICE.fet
 // delete the search queries from the overview data
 const data = computed(() => {
   const data = { ...overviewData.value };
-  if (overviewData.value?.searchQueries.value === 0) {
+  if (overviewData.value?.searchQueries?.value === 0) {
     delete data.searchQueries;
   }
   return data as HealthScoreResults;

frontend/app/components/modules/widget/components/shared/widget-area.vue

@@ -208,6 +208,12 @@ const sideNavItems = computed(() =>
 );
 
 const onSideNavUpdate = (value: string) => {
+  // Skip DOM operations during SSR
+  if (import.meta.server) {
+    activeItem.value = value;
+    return;
+  }
+
   tmpClickedItem.value = value;
   if (value === sideNavItems.value?.[0]?.key) {
     scrollToTop();

frontend/app/components/og-image/leaderboard.vue

@@ -33,14 +33,19 @@ SPDX-License-Identifier: MIT
         left: 80px;
         top: 136px;
         width: 807px;
+        height: 160px;
         font-family: 'Roboto Slab', serif;
         font-size: 56px;
         font-weight: 300;
         color: #0f172a;
         line-height: 80px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       "
     >
-      {{ props.leaderboardTitle }}
+      {{ safeTitle }}
     </div>
 
     <!-- LFX Insights Logo -->
@@ -53,6 +58,8 @@ SPDX-License-Identifier: MIT
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 const props = withDefaults(
   defineProps<{
     leaderboardTitle?: string;
@@ -61,4 +68,16 @@ const props = withDefaults(
     leaderboardTitle: '',
   },
 );
+
+// Strip emojis and other problematic unicode characters that can crash resvg
+const stripEmojis = (text: string): string => {
+  return text
+    .replace(
+      /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{FE00}-\u{FE0F}\u{200D}]/gu,
+      '',
+    )
+    .trim();
+};
+
+const safeTitle = computed(() => stripEmojis(props.leaderboardTitle));
 </script>

frontend/app/components/og-image/project.vue

@@ -17,11 +17,15 @@ SPDX-License-Identifier: MIT
         left: 80px;
         top: 80px;
         width: 807px;
+        height: 70px;
         font-family: 'Roboto Slab', serif;
         font-size: 56px;
         font-weight: 700;
         line-height: 1.25;
         color: #0f172a;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       "
     >
       {{ truncatedProjectName }}
@@ -35,11 +39,15 @@ SPDX-License-Identifier: MIT
         left: 80px;
         top: 80px;
         width: 807px;
+        height: 60px;
         font-family: 'Roboto Slab', serif;
         font-size: 48px;
         line-height: 1.25;
         color: #0f172a;
         font-weight: 300;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       "
     >
       {{ truncatedProjectName }}
@@ -51,11 +59,15 @@ SPDX-License-Identifier: MIT
         left: 80px;
         top: 140px;
         width: 807px;
+        height: 60px;
         font-family: 'Roboto Slab', serif;
         font-size: 48px;
         line-height: 1.25;
         color: #0f172a;
         font-weight: 700;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       "
     >
       / {{ truncatedRepositoryName }}
@@ -67,11 +79,16 @@ SPDX-License-Identifier: MIT
         position: absolute;
         left: 80px;
         width: 807px;
+        height: 108px;
         font-family: 'Inter', sans-serif;
         font-size: 24px;
         font-weight: 400;
         line-height: 36px;
         color: #0f172a;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
       "
       :style="{
         top: repositoryName ? '224px' : '174px',
@@ -139,30 +156,43 @@ const props = withDefaults(
   },
 );
 
+// Strip emojis and other problematic unicode characters that can crash resvg
+const stripEmojis = (text: string): string => {
+  return text
+    .replace(
+      /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{FE00}-\u{FE0F}\u{200D}]/gu,
+      '',
+    )
+    .trim();
+};
+
 // Truncate project name to fit in one line (approximately 30 characters for 56px font)
 const truncatedProjectName = computed(() => {
+  const cleanName = stripEmojis(props.projectName);
   const maxLength = props.repositoryName ? 29 : 24;
-  if (props.projectName.length <= maxLength) {
-    return props.projectName;
+  if (cleanName.length <= maxLength) {
+    return cleanName;
   }
-  return props.projectName.substring(0, maxLength).trim() + '...';
+  return cleanName.substring(0, maxLength).trim() + '...';
 });
 
 // Truncate repository name to fit in one line (approximately 35 characters for 48px font)
 const truncatedRepositoryName = computed(() => {
+  const cleanName = stripEmojis(props.repositoryName);
   const maxLength = 29;
-  if (props.repositoryName.length <= maxLength) {
-    return props.repositoryName;
+  if (cleanName.length <= maxLength) {
+    return cleanName;
   }
-  return props.repositoryName.substring(0, maxLength).trim() + '...';
+  return cleanName.substring(0, maxLength).trim() + '...';
 });
 
 // Truncate description to fit in 3 lines (approximately 150 characters)
 const truncatedDescription = computed(() => {
+  const cleanDescription = stripEmojis(props.projectDescription);
   const maxLength = 150;
-  if (props.projectDescription.length <= maxLength) {
-    return props.projectDescription;
+  if (cleanDescription.length <= maxLength) {
+    return cleanDescription;
   }
-  return props.projectDescription.substring(0, maxLength).trim() + '...';
+  return cleanDescription.substring(0, maxLength).trim() + '...';
 });
 </script>

frontend/nuxt.config.ts

@@ -75,6 +75,13 @@ export default defineNuxtConfig({
         path: '/fonts/RobotoSlab-Bold.ttf',
       },
     ],
+    // Use compatibility mode to prevent resvg crashes from taking down the app
+    compatibility: {
+      runtime: {
+        resvg: 'node',
+        satori: 'node',
+      },
+    },
   },
   plugins: ['~/plugins/vue-query.ts', '~/plugins/analytics.ts', '~/plugins/canonical.ts'],
   css: ['~/assets/styles/main.scss'],