jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: replace console.log with logger utility

Browse Source 
- Replace all console.log statements with appropriate logger methods in QRScannerDialog.vue
- Replace console.log statements with logger methods in WebDialogQRScanner.ts
- Fix TypeScript type for failsafeTimeout from 'any' to 'unknown'
- Update LogCollector.ts to use 'unknown' type instead of 'any'
- Add eslint-disable comments for console overrides in LogCollector

This change improves logging consistency across the application by using the centralized logger utility, which provides better error handling, log persistence, and environment-aware logging.
This commit is contained in:
Matt Raymer
2025-04-29 23:22:10 -04:00
parent 9f987d60a5
commit 254f14dc72
3 changed files with 198 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
src/components/QRScanner/QRScannerDialog.vue
View File

@@ -298,14 +298,14 @@ export default class QRScannerDialog extends Vue {
errorMessage = "";
created() {
console.log('[QRScannerDialog] created');
console.log('[QRScannerDialog] Props received:', {
logger.log("[QRScannerDialog] created");
logger.log("[QRScannerDialog] Props received:", {
onScan: typeof this.onScan,
onError: typeof this.onError,
options: this.options,
onClose: typeof this.onClose,
});
console.log('[QRScannerDialog] Initial state:', {
logger.log("[QRScannerDialog] Initial state:", {
visible: this.visible,
error: this.error,
useQRReader: this.useQRReader,
@@ -336,61 +336,69 @@ export default class QRScannerDialog extends Vue {
}
mounted() {
console.log('[QRScannerDialog] mounted');
logger.log("[QRScannerDialog] mounted");
// Timer to warn if no QR code detected after 10 seconds
this._scanTimeout = setTimeout(() => {
if (!this.isScanning) {
console.warn('[QRScannerDialog] No QR code detected after 10 seconds');
logger.warn("[QRScannerDialog] No QR code detected after 10 seconds");
}
}, 10000);
// Periodic timer to log waiting status every 5 seconds
this._waitingInterval = setInterval(() => {
if (!this.isScanning && this.cameraStatus === 'Active') {
console.log('[QRScannerDialog] Still waiting for QR code detection...');
if (!this.isScanning && this.cameraStatus === "Active") {
logger.log("[QRScannerDialog] Still waiting for QR code detection...");
}
}, 5000);
console.log('[QRScannerDialog] Waiting interval started');
logger.log("[QRScannerDialog] Waiting interval started");
}
beforeUnmount() {
if (this._scanTimeout) {
clearTimeout(this._scanTimeout);
console.log('[QRScannerDialog] Scan timeout cleared');
logger.log("[QRScannerDialog] Scan timeout cleared");
}
if (this._waitingInterval) {
clearInterval(this._waitingInterval);
console.log('[QRScannerDialog] Waiting interval cleared');
logger.log("[QRScannerDialog] Waiting interval cleared");
}
console.log('[QRScannerDialog] beforeUnmount');
logger.log("[QRScannerDialog] beforeUnmount");
}
async onInit(promise: Promise<void>): Promise<void> {
console.log('[QRScannerDialog] onInit called');
logger.log("[QRScannerDialog] onInit called");
if (this.isNativePlatform) {
logger.log("Closing QR dialog on native platform");
this.$nextTick(() => this.close());
return;
}
this.isInitializing = true;
console.log('[QRScannerDialog] isInitializing set to', this.isInitializing);
logger.log("[QRScannerDialog] isInitializing set to", this.isInitializing);
this.error = null;
this.initializationStatus = "Checking camera access...";
console.log('[QRScannerDialog] initializationStatus set to', this.initializationStatus);
logger.log(
"[QRScannerDialog] initializationStatus set to",
this.initializationStatus,
);
try {
if (!navigator.mediaDevices) {
console.log('[QRScannerDialog] Camera API not available');
logger.log("[QRScannerDialog] Camera API not available");
throw new Error(
"Camera API not available. Please ensure you're using HTTPS.",
);
}
const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevices = devices.filter((device) => device.kind === "videoinput");
console.log('[QRScannerDialog] videoDevices found:', videoDevices.length);
const videoDevices = devices.filter(
(device) => device.kind === "videoinput",
);
logger.log("[QRScannerDialog] videoDevices found:", videoDevices.length);
if (videoDevices.length === 0) {
throw new Error("No camera found on this device");
}
this.initializationStatus = "Requesting camera permission...";
console.log('[QRScannerDialog] initializationStatus set to', this.initializationStatus);
logger.log(
"[QRScannerDialog] initializationStatus set to",
this.initializationStatus,
);
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
@@ -401,10 +409,17 @@ export default class QRScannerDialog extends Vue {
});
stream.getTracks().forEach((track) => track.stop());
this.initializationStatus = "Camera permission granted...";
console.log('[QRScannerDialog] initializationStatus set to', this.initializationStatus);
logger.log(
"[QRScannerDialog] initializationStatus set to",
this.initializationStatus,
);
} catch (permissionError) {
const error = permissionError as Error;
console.log('[QRScannerDialog] Camera permission error:', error.name, error.message);
logger.log(
"[QRScannerDialog] Camera permission error:",
error.name,
error.message,
);
if (
error.name === "NotAllowedError" ||
error.name === "PermissionDeniedError"
@@ -429,67 +444,94 @@ export default class QRScannerDialog extends Vue {
}
}
this.initializationStatus = "Starting QR scanner...";
console.log('[QRScannerDialog] initializationStatus set to', this.initializationStatus);
logger.log(
"[QRScannerDialog] initializationStatus set to",
this.initializationStatus,
);
await promise;
this.isInitializing = false;
this.cameraStatus = "Ready";
console.log('[QRScannerDialog] QR scanner initialized successfully');
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] QR scanner initialized successfully");
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
} catch (error) {
const wrappedError = error instanceof Error ? error : new Error(String(error));
const wrappedError =
error instanceof Error ? error : new Error(String(error));
this.error = wrappedError.message;
this.cameraStatus = "Error";
console.log('[QRScannerDialog] Error initializing QR scanner:', wrappedError.message);
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log(
"[QRScannerDialog] Error initializing QR scanner:",
wrappedError.message,
);
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
if (this.onError) {
this.onError(wrappedError);
}
} finally {
this.isInitializing = false;
console.log('[QRScannerDialog] isInitializing set to', this.isInitializing);
logger.log(
"[QRScannerDialog] isInitializing set to",
this.isInitializing,
);
}
}
onCameraOn(): void {
this.cameraStatus = "Active";
console.log('[QRScannerDialog] Camera turned on successfully');
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] Camera turned on successfully");
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
}
onCameraOff(): void {
this.cameraStatus = "Off";
console.log('[QRScannerDialog] Camera turned off');
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] Camera turned off");
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
}
onDetect(result: DetectionResult | Promise<DetectionResult>): void {
const ts = new Date().toISOString();
console.log(`[QRScannerDialog] onDetect called at ${ts} with`, result);
logger.log(`[QRScannerDialog] onDetect called at ${ts} with`, result);
this.isScanning = true;
this.cameraStatus = "Detecting";
console.log('[QRScannerDialog] isScanning set to', this.isScanning);
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
const processResult = (detection: DetectionResult | DetectionResult[]) => {
try {
console.log(`[QRScannerDialog] onDetect exit at ${new Date().toISOString()} with detection:`, detection);
logger.log(
`[QRScannerDialog] onDetect exit at ${new Date().toISOString()} with detection:`,
detection,
);
// Fallback: If detection is an array, check the first element
let rawValue: string | undefined;
if (Array.isArray(detection) && detection.length > 0 && 'rawValue' in detection[0]) {
if (
Array.isArray(detection) &&
detection.length > 0 &&
"rawValue" in detection[0]
) {
rawValue = detection[0].rawValue;
} else if (detection && typeof detection === 'object' && 'rawValue' in detection && detection.rawValue) {
rawValue = (detection as any).rawValue;
} else if (
detection &&
typeof detection === "object" &&
"rawValue" in detection &&
detection.rawValue
) {
rawValue = (detection as unknown).rawValue;
}
if (rawValue) {
console.log('[QRScannerDialog] Fallback: Detected rawValue, treating as scan:', rawValue);
logger.log(
"[QRScannerDialog] Fallback: Detected rawValue, treating as scan:",
rawValue,
);
this.isInitializing = false;
this.initializationStatus = 'QR code captured!';
this.initializationStatus = "QR code captured!";
this.onScan(rawValue);
try {
console.log('[QRScannerDialog] About to call close() after scan');
logger.log("[QRScannerDialog] About to call close() after scan");
this.close();
console.log('[QRScannerDialog] close() called successfully after scan');
logger.log(
"[QRScannerDialog] close() called successfully after scan",
);
} catch (err) {
console.error('[QRScannerDialog] Error calling close():', err);
logger.error("[QRScannerDialog] Error calling close():", err);
}
}
} catch (error) {
@@ -497,8 +539,8 @@ export default class QRScannerDialog extends Vue {
} finally {
this.isScanning = false;
this.cameraStatus = "Active";
console.log('[QRScannerDialog] isScanning set to', this.isScanning);
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
}
};
if (result instanceof Promise) {
@@ -508,8 +550,11 @@ export default class QRScannerDialog extends Vue {
.finally(() => {
this.isScanning = false;
this.cameraStatus = "Active";
console.log('[QRScannerDialog] isScanning set to', this.isScanning);
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] isScanning set to", this.isScanning);
logger.log(
"[QRScannerDialog] cameraStatus set to",
this.cameraStatus,
);
});
} else {
processResult(result);
@@ -517,11 +562,12 @@ export default class QRScannerDialog extends Vue {
}
private handleError(error: unknown): void {
const wrappedError = error instanceof Error ? error : new Error(String(error));
const wrappedError =
error instanceof Error ? error : new Error(String(error));
this.error = wrappedError.message;
this.cameraStatus = "Error";
console.log('[QRScannerDialog] handleError:', wrappedError.message);
console.log('[QRScannerDialog] cameraStatus set to', this.cameraStatus);
logger.log("[QRScannerDialog] handleError:", wrappedError.message);
logger.log("[QRScannerDialog] cameraStatus set to", this.cameraStatus);
if (this.onError) {
this.onError(wrappedError);
}
@@ -529,14 +575,24 @@ export default class QRScannerDialog extends Vue {
onDecode(result: string): void {
const ts = new Date().toISOString();
console.log(`[QRScannerDialog] onDecode called at ${ts} with result:`, result);
logger.log(
`[QRScannerDialog] onDecode called at ${ts} with result:`,
result,
);
try {
this.isInitializing = false;
this.initializationStatus = 'QR code captured!';
console.log('[QRScannerDialog] UI state updated after scan: isInitializing set to', this.isInitializing, ', initializationStatus set to', this.initializationStatus);
this.initializationStatus = "QR code captured!";
logger.log(
"[QRScannerDialog] UI state updated after scan: isInitializing set to",
this.isInitializing,
", initializationStatus set to",
this.initializationStatus,
);
this.onScan(result);
this.close();
console.log(`[QRScannerDialog] onDecode exit at ${new Date().toISOString()}`);
logger.log(
`[QRScannerDialog] onDecode exit at ${new Date().toISOString()}`,
);
} catch (error) {
this.handleError(error);
}
@@ -544,77 +600,95 @@ export default class QRScannerDialog extends Vue {
toggleCamera(): void {
const prevCamera = this.preferredCamera;
this.preferredCamera = this.preferredCamera === "user" ? "environment" : "user";
console.log('[QRScannerDialog] toggleCamera from', prevCamera, 'to', this.preferredCamera);
console.log('[QRScannerDialog] preferredCamera set to', this.preferredCamera);
this.preferredCamera =
this.preferredCamera === "user" ? "environment" : "user";
logger.log(
"[QRScannerDialog] toggleCamera from",
prevCamera,
"to",
this.preferredCamera,
);
logger.log(
"[QRScannerDialog] preferredCamera set to",
this.preferredCamera,
);
}
retryScanning(): void {
console.log('[QRScannerDialog] retryScanning called');
logger.log("[QRScannerDialog] retryScanning called");
this.error = null;
this.isInitializing = true;
console.log('[QRScannerDialog] isInitializing set to', this.isInitializing);
console.log('[QRScannerDialog] Scanning re-initialized');
logger.log("[QRScannerDialog] isInitializing set to", this.isInitializing);
logger.log("[QRScannerDialog] Scanning re-initialized");
}
close = async (): Promise<void> => {
console.log('[QRScannerDialog] close called');
logger.log("[QRScannerDialog] close called");
this.visible = false;
console.log('[QRScannerDialog] visible set to', this.visible);
logger.log("[QRScannerDialog] visible set to", this.visible);
// Notify parent/service
if (typeof this.onClose === 'function') {
console.log('[QRScannerDialog] Calling onClose prop');
if (typeof this.onClose === "function") {
logger.log("[QRScannerDialog] Calling onClose prop");
this.onClose();
}
await this.$nextTick();
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
console.log('[QRScannerDialog] Dialog element removed from DOM');
logger.log("[QRScannerDialog] Dialog element removed from DOM");
} else {
console.log('[QRScannerDialog] Dialog element NOT removed from DOM');
logger.log("[QRScannerDialog] Dialog element NOT removed from DOM");
}
}
};
onScanDetect(promisedResult) {
const ts = new Date().toISOString();
console.log(`[QRScannerDialog] onScanDetect called at ${ts} with`, promisedResult);
logger.log(
`[QRScannerDialog] onScanDetect called at ${ts} with`,
promisedResult,
);
promisedResult
.then((result) => {
console.log(`[QRScannerDialog] onScanDetect exit at ${new Date().toISOString()} with result:`, result);
logger.log(
`[QRScannerDialog] onScanDetect exit at ${new Date().toISOString()} with result:`,
result,
);
this.onScan(result);
})
.catch((error) => {
console.error(`[QRScannerDialog] onScanDetect error at ${new Date().toISOString()}:`, error);
this.errorMessage = error.message || 'Scan error';
logger.error(
`[QRScannerDialog] onScanDetect error at ${new Date().toISOString()}:`,
error,
);
this.errorMessage = error.message || "Scan error";
if (this.onError) this.onError(error);
});
}
onScanError(error) {
const ts = new Date().toISOString();
console.error(`[QRScannerDialog] onScanError called at ${ts}:`, error);
this.errorMessage = error.message || 'Camera error';
logger.error(`[QRScannerDialog] onScanError called at ${ts}:`, error);
this.errorMessage = error.message || "Camera error";
if (this.onError) this.onError(error);
}
async startMobileScan() {
try {
console.log('[QRScannerDialog] startMobileScan called');
logger.log("[QRScannerDialog] startMobileScan called");
const scanner = QRScannerFactory.getInstance();
await scanner.startScan();
} catch (error) {
console.error('[QRScannerDialog] Error starting mobile scan:', error);
logger.error("[QRScannerDialog] Error starting mobile scan:", error);
if (this.onError) this.onError(error);
}
}
async copyLogs() {
console.log('[QRScannerDialog] copyLogs called');
logger.log("[QRScannerDialog] copyLogs called");
try {
await navigator.clipboard.writeText(logCollector.getLogs());
alert('Logs copied to clipboard!');
alert("Logs copied to clipboard!");
} catch (e) {
alert('Failed to copy logs: ' + (e instanceof Error ? e.message : e));
alert("Failed to copy logs: " + (e instanceof Error ? e.message : e));
}
}
}

60
src/services/QRScanner/WebDialogQRScanner.ts
View File

@@ -10,20 +10,20 @@ export class WebDialogQRScanner implements QRScannerService {
private isScanning = false;
private container: HTMLElement | null = null;
private sessionId: number | null = null;
private failsafeTimeout: any = null;
private failsafeTimeout: unknown = null;
constructor(private options?: QRScannerOptions) {}
async checkPermissions(): Promise<boolean> {
try {
console.log("[QRScanner] Checking camera permissions...");
logger.log("[QRScanner] Checking camera permissions...");
const permissions = await navigator.permissions.query({
name: "camera" as PermissionName,
});
console.log("[QRScanner] Permission state:", permissions.state);
logger.log("[QRScanner] Permission state:", permissions.state);
return permissions.state === "granted";
} catch (error) {
console.error("[QRScanner] Error checking camera permissions:", error);
logger.error("[QRScanner] Error checking camera permissions:", error);
return false;
}
}
@@ -129,7 +129,9 @@ export class WebDialogQRScanner implements QRScannerService {
try {
this.isScanning = true;
this.sessionId = Date.now();
console.log(`[WebDialogQRScanner] Opening dialog, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] Opening dialog, session: ${this.sessionId}`,
);
// Create and mount dialog component
this.container = document.createElement("div");
@@ -147,23 +149,31 @@ export class WebDialogQRScanner implements QRScannerService {
}
},
onClose: () => {
console.log(`[WebDialogQRScanner] onClose received from dialog, session: ${this.sessionId}`);
this.stopScan('dialog onClose');
logger.log(
`[WebDialogQRScanner] onClose received from dialog, session: ${this.sessionId}`,
);
this.stopScan("dialog onClose");
},
options: this.options,
sessionId: this.sessionId,
});
this.dialogComponent = this.dialogInstance.mount(this.container) as InstanceType<typeof QRScannerDialog>;
this.dialogComponent = this.dialogInstance.mount(
this.container,
) as InstanceType<typeof QRScannerDialog>;
// Failsafe: force cleanup after 60s if dialog is still open
this.failsafeTimeout = setTimeout(() => {
if (this.isScanning) {
console.warn(`[WebDialogQRScanner] Failsafe triggered, forcing cleanup for session: ${this.sessionId}`);
this.stopScan('failsafe timeout');
logger.warn(
`[WebDialogQRScanner] Failsafe triggered, forcing cleanup for session: ${this.sessionId}`,
);
this.stopScan("failsafe timeout");
}
}, 60000);
console.log(`[WebDialogQRScanner] Failsafe timeout set for session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] Failsafe timeout set for session: ${this.sessionId}`,
);
} catch (error) {
this.isScanning = false;
const wrappedError =
@@ -177,20 +187,26 @@ export class WebDialogQRScanner implements QRScannerService {
}
}
async stopScan(reason: string = 'manual') : Promise<void> {
async stopScan(reason: string = "manual"): Promise<void> {
if (!this.isScanning) {
return;
}
try {
console.log(`[WebDialogQRScanner] stopScan called, reason: ${reason}, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] stopScan called, reason: ${reason}, session: ${this.sessionId}`,
);
if (this.dialogComponent) {
await this.dialogComponent.close();
console.log(`[WebDialogQRScanner] dialogComponent.close() called, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] dialogComponent.close() called, session: ${this.sessionId}`,
);
}
if (this.dialogInstance) {
this.dialogInstance.unmount();
console.log(`[WebDialogQRScanner] dialogInstance.unmount() called, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] dialogInstance.unmount() called, session: ${this.sessionId}`,
);
}
} catch (error) {
const wrappedError =
@@ -202,7 +218,9 @@ export class WebDialogQRScanner implements QRScannerService {
if (this.failsafeTimeout) {
clearTimeout(this.failsafeTimeout);
this.failsafeTimeout = null;
console.log(`[WebDialogQRScanner] Failsafe timeout cleared, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] Failsafe timeout cleared, session: ${this.sessionId}`,
);
}
this.cleanupContainer();
}
@@ -215,16 +233,20 @@ export class WebDialogQRScanner implements QRScannerService {
private cleanupContainer(): void {
if (this.container && this.container.parentNode) {
this.container.parentNode.removeChild(this.container);
console.log(`[WebDialogQRScanner] Dialog container removed from DOM, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] Dialog container removed from DOM, session: ${this.sessionId}`,
);
} else {
console.log(`[WebDialogQRScanner] Dialog container NOT removed from DOM, session: ${this.sessionId}`);
logger.log(
`[WebDialogQRScanner] Dialog container NOT removed from DOM, session: ${this.sessionId}`,
);
}
this.container = null;
}
async cleanup(): Promise<void> {
try {
await this.stopScan('cleanup');
await this.stopScan("cleanup");
} catch (error) {
const wrappedError =
error instanceof Error ? error : new Error(String(error));

8
src/utils/LogCollector.ts
View File

@@ -2,20 +2,22 @@ type LogLevel = "log" | "info" | "warn" | "error";
interface LogEntry {
level: LogLevel;
message: any[];
message: unknown[];
timestamp: string;
}
class LogCollector {
private logs: LogEntry[] = [];
private originalConsole: Partial<
Record<LogLevel, (..._args: any[]) => void>
Record<LogLevel, (..._args: unknown[]) => void>
> = {};
constructor() {
(["log", "info", "warn", "error"] as LogLevel[]).forEach((level) => {
// eslint-disable-next-line no-console
this.originalConsole[level] = console[level];
console[level] = (..._args: any[]) => {
// eslint-disable-next-line no-console
console[level] = (..._args: unknown[]) => {
this.logs.push({
level,
message: _args,