refactor: Replace console logging with logger utility

- Add logger import across multiple view components
- Replace console.error/warn/log with logger methods
- Update error handling to use structured logging
- Improve type safety for error objects
- Add crypto-browserify polyfill for browser environment

The changes improve logging by:
1. Using consistent logging interface
2. Adding structured error logging
3. Improving error type safety
4. Centralizing logging configuration
5. Fixing browser compatibility issues

Affected files:
- Multiple view components
- vite.config.ts
- Build configuration

src/views/ClaimView.vue

@@ -366,7 +366,9 @@
       </div>
     </div>
 
-    <!-- Note that a similar section is found in ConfirmGiftView.vue, and kinda in HiddenDidDialog.vue -->
+    <!-- 
+    Note that a similar section is found in ConfirmGiftView.vue, and kinda in HiddenDidDialog.vue
+    -->
     <h2
       class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
       @click="showVeriClaimDump = !showVeriClaimDump"
@@ -554,6 +556,7 @@ import {
   ProviderInfo,
 } from "../interfaces";
 import * as libsUtil from "../libs/util";
+import { logger } from "../utils/logger";
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -617,7 +620,7 @@ export default class ClaimView extends Vue {
   }
 
   async created() {
-    console.log("ClaimView created");
+    logger.log("ClaimView created");
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
@@ -687,7 +690,7 @@ export default class ClaimView extends Vue {
   }
 
   async loadClaim(claimId: string, userDid: string) {
-    console.log("[ClaimView] loadClaim called with claimId:", claimId);
+    logger.log("[ClaimView] loadClaim called with claimId:", claimId);
     const urlPath = libsUtil.isGlobalUri(claimId)
       ? "/api/claim/byHandle/"
       : "/api/claim/";
@@ -695,7 +698,7 @@ export default class ClaimView extends Vue {
     const headers = await serverUtil.getHeaders(userDid);
 
     try {
-      console.log("[ClaimView] Making API request to:", url);
+      logger.log("[ClaimView] Making API request to:", url);
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.veriClaim = resp.data;
@@ -707,7 +710,7 @@ export default class ClaimView extends Vue {
         );
       } else {
         // actually, axios typically throws an error so we never get here
-        console.error("Error getting claim:", resp);
+        logger.error("Error getting claim:", resp);
         this.$notify(
           {
             group: "alert",
@@ -735,7 +738,7 @@ export default class ClaimView extends Vue {
         if (giveResp.status === 200 && giveResp.data.data?.length > 0) {
           this.detailsForGive = giveResp.data.data[0];
         } else {
-          console.error("Error getting detailed give info:", giveResp);
+          logger.error("Error getting detailed give info:", giveResp);
         }
 
         // look for providers
@@ -754,7 +757,7 @@ export default class ClaimView extends Vue {
         ) {
           this.providersForGive = providerResp.data.data;
         } else {
-          console.error("Error getting give providers:", giveResp);
+          logger.error("Error getting give providers:", giveResp);
           this.$notify(
             {
               group: "alert",
@@ -777,7 +780,7 @@ export default class ClaimView extends Vue {
         if (offerResp.status === 200) {
           this.detailsForOffer = offerResp.data.data[0];
         } else {
-          console.error("Error getting detailed offer info:", offerResp);
+          logger.error("Error getting detailed offer info:", offerResp);
           this.$notify(
             {
               group: "alert",
@@ -807,7 +810,7 @@ export default class ClaimView extends Vue {
       }
     } catch (error: unknown) {
       const serverError = error as AxiosError;
-      console.error("Error retrieving claim:", serverError);
+      logger.error("Error retrieving claim:", serverError);
       this.$notify(
         {
           group: "alert",
@@ -832,7 +835,7 @@ export default class ClaimView extends Vue {
         this.fullClaimDump = yaml.dump(this.fullClaim);
       } else {
         // actually, axios typically throws an error so we never get here
-        console.error("Error getting full claim:", resp);
+        logger.error("Error getting full claim:", resp);
         this.$notify(
           {
             group: "alert",
@@ -844,7 +847,7 @@ export default class ClaimView extends Vue {
         );
       }
     } catch (error: unknown) {
-      console.error("Error retrieving full claim:", error);
+      logger.error("Error retrieving full claim:", error);
       const serverError = error as AxiosError;
       if (serverError.response?.status === 403) {
         let issuerPhrase = "";
@@ -939,7 +942,7 @@ export default class ClaimView extends Vue {
         5000,
       );
     } else {
-      console.error("Got error submitting the confirmation:", result);
+      logger.error("Got error submitting the confirmation:", result);
       this.$notify(
         {
           group: "alert",
@@ -1029,7 +1032,7 @@ export default class ClaimView extends Vue {
       };
       (this.$router as Router).push(route);
     } else {
-      console.error(
+      logger.error(
         "Unrecognized claim type for edit:",
         this.veriClaim.claimType,
       );