From 00d8bc733d52a810c438e1081496e3b0ac58958f Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 14 Dec 2023 10:51:39 +0100
Subject: [PATCH] fix(front): fix ErrorComponent.vue sentry integration

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/components/ErrorComponent.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/ErrorComponent.vue b/src/components/ErrorComponent.vue
index f096b4ba3..7c093bfe3 100644
--- a/src/components/ErrorComponent.vue
+++ b/src/components/ErrorComponent.vue
@@ -36,7 +36,7 @@
             keypath="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
           >
             <template #instanceName>
-              <b>{{ config?.name }}</b>
+              <b>{{ instanceName }}</b>
             </template>
             <template #mobilizon_link>
               <a href="https://joinmobilizon.org">{{ t("Mobilizon") }}</a>
@@ -57,7 +57,10 @@
             }}
           </span>
         </p>
-        <SentryFeedback />
+        <SentryFeedback
+          v-if="sentryProvider"
+          :providerConfig="sentryProvider"
+        />
 
         <p class="prose dark:prose-invert" v-if="!sentryEnabled">
           {{
@@ -84,7 +87,7 @@
         <div class="buttons" v-if="!sentryEnabled">
           <o-tooltip
             :label="tooltipConfig.label"
-            :type="tooltipConfig.type"
+            :variant="tooltipConfig.variant"
             :active="copied !== false"
             always
           >
@@ -101,12 +104,13 @@
 </template>
 <script lang="ts" setup>
 import { checkProviderConfig } from "@/services/statistics";
-import { IAnalyticsConfig } from "@/types/config.model";
+import { IAnalyticsConfig, IConfig } from "@/types/config.model";
 import { computed, defineAsyncComponent, ref } from "vue";
-import { useQueryLoading } from "@vue/apollo-composable";
+import { useQuery, useQueryLoading } from "@vue/apollo-composable";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@unhead/vue";
 import { useAnalytics } from "@/composition/apollo/config";
+import { INSTANCE_NAME } from "@/graphql/config";
 const SentryFeedback = defineAsyncComponent(
   () => import("./Feedback/SentryFeedback.vue")
 );
@@ -126,6 +130,12 @@ useHead({
   title: computed(() => t("Error")),
 });
 
+const { result: instanceConfig } = useQuery<{ config: Pick<IConfig, "name"> }>(
+  INSTANCE_NAME
+);
+
+const instanceName = computed(() => instanceConfig.value?.config.name);
+
 const copyErrorToClipboard = async (): Promise<void> => {
   try {
     if (window.isSecureContext && navigator.clipboard) {