fix: \loadActivePositionData\ has no error handling — silent failure on RPC error (#377)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web-app/src/components/collapse/CollapseActive.vue

@@ -35,6 +35,10 @@
       </div>
     </template>
     <div class="collapsed-body">
+      <div v-if="error" class="collapsed-body--error">
+        <span>{{ error }}</span>
+        <FButton size="tiny" outlined @click="loadActivePositionData">Retry</FButton>
+      </div>
       <div class="profit-stats-wrapper">
         <div class="profit-stats-item">
           <div><b>Tax Paid</b></div>
@@ -117,6 +121,7 @@ const taxDue = ref<bigint>(0n);
 const taxPaidGes = ref<number>();
 const profit = ref<number>();
 const loading = ref<boolean>(false);
+const error = ref<string | null>(null);
 
 const tag = computed(() => {
   // Compare by index instead of decimal to avoid floating-point issues
@@ -214,6 +219,9 @@ async function unstakePosition() {
 }
 
 async function loadActivePositionData() {
+  loading.value = true;
+  error.value = null;
+  try {
     //loadTaxDue
     taxDue.value = await getTaxDue(props.id);
     taxPaidGes.value = weiToNumber(taxDue.value + props.position.taxPaid);
@@ -222,6 +230,12 @@ async function loadActivePositionData() {
 
     // Calculate issuance earned using kraiken-lib profit calculation
     profit.value = calculateActivePositionProfit(props.position.totalSupplyInit, statCollection.kraikenTotalSupply, props.position.share);
+  } catch (err) {
+    console.error('Failed to load active position data:', err);
+    error.value = 'Failed to load position data.';
+  } finally {
+    loading.value = false;
+  }
 }
 
 onMounted(() => {
@@ -317,6 +331,13 @@ onMounted(() => {
                 &.profit-stats-total
                     border-top: 2px solid var(--color-font)
                     padding-top: 2px
+        .collapsed-body--error
+            display: flex
+            align-items: center
+            gap: 8px
+            color: #f87171
+            font-size: 13px
+            margin-bottom: 8px
         .collapsed-body--actions
             .collapse-menu-open
                 display: flex