fix: standardize FontAwesome usage and improve error handling

- Change <fa> to <font-awesome> for consistent component naming
- Add structured error logging in QR scanner services
- Fix cacheImage event handling in ActivityListItem
- Improve code formatting and error wrapping

src/components/ActivityListItem.vue

@@ -57,7 +57,7 @@
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
             :src="record.image"
             alt="Activity image"
-            @load="$emit('cacheImage', record.image)"
+            @load="cacheImage(record.image)"
           />
         </a>
       </div>
@@ -182,7 +182,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
@@ -202,6 +202,11 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  @Emit()
+  cacheImage(image: string) {
+    return image;
+  }
+
   get fetchAmount(): string {
     const claim =
       (this.record.fullClaim as unknown).claim || this.record.fullClaim;