refactor(logging): replace console.error and console.warn with log utility

ffalt · ffalt · commit 9b040e776731 · 2026-04-02T19:11:05.000+02:00
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { Meta } from '@angular/platform-browser';
 import { environment } from '../environments/environment';
 import { AppService } from './service/app.service';
 import { LayoutService } from './service/layout.service';
+import { log } from './model/log';
 import type { LoadLayout, MahFormat } from './model/types';
 import { GameComponent } from './components/game/game-component.component';
 
@@ -35,7 +36,7 @@ export class AppComponent implements OnInit {
 	ngOnInit(): void {
 		this.init()
 			.catch(error => {
-				console.error(error);
+				log.error(error);
 			});
 	}
 
@@ -65,7 +66,7 @@ export class AppComponent implements OnInit {
 					this.editorLoading = false;
 				})
 				.catch(error => {
-					console.error(error);
+					log.error(error);
 					this.editorLoading = false;
 				});
 		}
@@ -109,7 +110,7 @@ export class AppComponent implements OnInit {
 		try {
 			window.history.replaceState(null, '', window.location.pathname);
 		} catch (error) {
-			console.error(error);
+			log.error(error);
 		}
 	}
 
@@ -122,31 +123,31 @@ export class AppComponent implements OnInit {
 			try {
 				decoded = atob(base64jsonString);
 			} catch (error) {
-				console.warn('Import failed: Invalid base64 encoding', error);
+				log.warn('Import failed: Invalid base64 encoding', error);
 				return [];
 			}
 
 			let parsed: unknown;
 			try {
 				parsed = JSON.parse(decoded);
 			} catch (error) {
-				console.warn('Import failed: Invalid JSON format', error);
+				log.warn('Import failed: Invalid JSON format', error);
 				return [];
 			}
 
 			const mah = parsed as MahFormat;
 			if (!mah.mah || mah.mah !== '1.0') {
-				console.warn('Import failed: Invalid or unsupported MAH format version');
+				log.warn('Import failed: Invalid or unsupported MAH format version');
 				return [];
 			}
 
 			if (!Array.isArray(mah.boards)) {
-				console.warn('Import failed: Missing or invalid boards array');
+				log.warn('Import failed: Missing or invalid boards array');
 				return [];
 			}
 
 			if (mah.boards.length === 0) {
-				console.warn('Import failed: No boards found in import data');
+				log.warn('Import failed: No boards found in import data');
 				return [];
 			}
 
@@ -163,7 +164,7 @@ export class AppComponent implements OnInit {
 						imported.push(LayoutService.layout2loadLayout(layout, custom.map));
 					}
 				} catch (error) {
-					console.warn('Failed to import individual board:', error);
+					log.warn('Failed to import individual board:', error);
 				}
 			}
 
@@ -172,12 +173,12 @@ export class AppComponent implements OnInit {
 			}
 
 			if (result.length === 0) {
-				console.warn('Import completed but no valid boards were imported');
+				log.warn('Import completed but no valid boards were imported');
 			}
 
 			return result;
 		} catch (error) {
-			console.error('Unexpected error during import:', error);
+			log.error('Unexpected error during import:', error);
 			return [];
 		}
 	}
diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts
@@ -10,6 +10,7 @@ import { PanZoom } from '../../model/pan-zoom';
 import { PrefixPipe } from '../../pipes/prefix.pipe';
 import { TranslatePipe } from '@ngx-translate/core';
 import { PatternService } from '../../service/pattern.service';
+import { log } from '../../model/log';
 
 const defaultW = 1470;
 const defaultH = 960;
@@ -270,7 +271,7 @@ export class BoardComponent implements OnInit, OnChanges {
 		this.patternService
 			.svgDataUrl(pattern, this.cssBarColors())
 			.then(dataUrl => this.backgroundUrl = dataUrl)
-			.catch(console.error);
+			.catch(error => log.error(error));
 	}
 
 	private updateBackground(background: string): void {
diff --git a/src/app/components/game/game-component.component.ts b/src/app/components/game/game-component.component.ts
@@ -3,6 +3,7 @@ import type { Game } from '../../model/game';
 import type { Stone } from '../../model/stone';
 import type { Layout, Place } from '../../model/types';
 import { AppService } from '../../service/app.service';
+import { log } from '../../model/log';
 import type { BUILD_MODE_ID } from '../../model/builder';
 import type { GAME_MODE_ID } from '../../model/consts';
 import { environment } from '../../../environments/environment';
@@ -112,7 +113,7 @@ export class GameComponent {
 				break;
 			}
 			case 'g': {
-				this.debugSolve().catch(console.error);
+				this.debugSolve().catch(error => log.error(error));
 				break;
 			}
 			case 'u': {
@@ -224,19 +225,19 @@ export class GameComponent {
 		if (doc.exitFullscreen) {
 			doc.exitFullscreen()
 				.catch(error => {
-					console.warn('Failed to exit fullscreen:', error);
+					log.warn('Failed to exit fullscreen:', error);
 				});
 		} else if (doc.webkitExitFullscreen) {
 			try {
 				doc.webkitExitFullscreen();
 			} catch (error) {
-				console.warn('Failed to exit fullscreen (webkit):', error);
+				log.warn('Failed to exit fullscreen (webkit):', error);
 			}
 		} else if (doc.mozCancelFullScreen) {
 			try {
 				doc.mozCancelFullScreen();
 			} catch (error) {
-				console.warn('Failed to exit fullscreen (moz):', error);
+				log.warn('Failed to exit fullscreen (moz):', error);
 			}
 		}
 	}
@@ -246,19 +247,19 @@ export class GameComponent {
 		if (element.requestFullscreen) {
 			element.requestFullscreen()
 				.catch(error => {
-					console.warn('Failed to enter fullscreen:', error);
+					log.warn('Failed to enter fullscreen:', error);
 				});
 		} else if (element.webkitRequestFullscreen) {
 			try {
 				element.webkitRequestFullscreen();
 			} catch (error) {
-				console.warn('Failed to enter fullscreen (webkit):', error);
+				log.warn('Failed to enter fullscreen (webkit):', error);
 			}
 		} else if (element.mozRequestFullScreen) {
 			try {
 				element.mozRequestFullScreen();
 			} catch (error) {
-				console.warn('Failed to enter fullscreen (moz):', error);
+				log.warn('Failed to enter fullscreen (moz):', error);
 			}
 		}
 	}
diff --git a/src/app/components/help/help.component.ts b/src/app/components/help/help.component.ts
@@ -4,6 +4,7 @@ import { clickExternalHref } from '../../model/external-links';
 import { DurationPipe } from '../../pipes/duration.pipe';
 import { LayoutService } from '../../service/layout.service';
 import { LocalstorageService } from '../../service/localstorage.service';
+import { log } from '../../model/log';
 
 interface StatEntry {
 	name: string;
@@ -93,7 +94,7 @@ export class HelpComponent implements OnInit {
 						loseCount: 0
 					};
 				})
-				.catch(error => console.error(error));
+				.catch(error => log.error(error));
 		}
 	}
 
diff --git a/src/app/components/image-set-loader/image-set-loader.component.spec.ts b/src/app/components/image-set-loader/image-set-loader.component.spec.ts
@@ -3,6 +3,7 @@ import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { SvgdefService } from '../../service/svgdef.service';
 import { ImageSetLoaderComponent } from './image-set-loader.component';
 import type { ElementRef } from '@angular/core';
+import { log } from '../../model/log';
 
 interface HackImageSetLoaderComponent {
 	elementRef: ElementRef;
@@ -138,23 +139,19 @@ describe('ImageSetLoaderComponent', () => {
 
 		it('should call setError when svgDef.get fails', async () => {
 			const testImageSet = 'test-image-set';
-			const originalConsoleError = console.error;
-			console.error = jest.fn();
 
 			fixture.componentRef.setInput('imageSet', testImageSet);
 			fixture.detectChanges();
 
 			SvgdefServiceSpy.get.mockRejectedValue('Error loading SVG');
 			jest.spyOn(component as unknown as HackImageSetLoaderComponent, 'setError');
-			jest.spyOn(console, 'error');
+			jest.spyOn(log, 'error').mockImplementation(jest.fn());
 
 			(component as unknown as HackImageSetLoaderComponent).loadImageSet();
 
 			// Wait for the promise to reject
 			await fixture.whenStable();
 			expect((component as unknown as HackImageSetLoaderComponent).setError).toHaveBeenCalled();
-			expect(console.error).toHaveBeenCalled();
-			console.error = originalConsoleError;
 		});
 	});
 
diff --git a/src/app/components/image-set-loader/image-set-loader.component.ts b/src/app/components/image-set-loader/image-set-loader.component.ts
@@ -1,5 +1,6 @@
 import { Component, ElementRef, type OnChanges, type SimpleChanges, inject, input } from '@angular/core';
 import { SvgdefService } from '../../service/svgdef.service';
+import { log } from '../../model/log';
 import { TILES } from '../../model/consts';
 import { svg_error_icon, svgSpinnerIcon } from './svg';
 
@@ -66,7 +67,7 @@ export class ImageSetLoaderComponent implements OnChanges {
 			})
 			.catch(error => {
 				this.setError();
-				console.error(error);
+				log.error(error);
 			});
 	}
 
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
@@ -26,7 +26,7 @@ const SETTINGS_TABS = [
 	}
 })
 export class SettingsComponent implements AfterViewInit {
-	readonly kyodaiInput = viewChild.required<ElementRef<HTMLInputElement | HTMLTextAreaElement>>('kyodaiInput');
+	readonly kyodaiInput = viewChild<ElementRef<HTMLInputElement | HTMLTextAreaElement>>('kyodaiInput');
 	readonly canKyodai = environment.kyodai;
 	readonly kyodaiTileSets = KyodaiTileSets;
 	readonly sets = ImageSets;
@@ -65,7 +65,7 @@ export class SettingsComponent implements AfterViewInit {
 
 	setKyodaiUrl(event: Event): void {
 		const kyodaiInput = this.kyodaiInput();
-		if (kyodaiInput.nativeElement) {
+		if (kyodaiInput?.nativeElement) {
 			event.preventDefault();
 			event.stopPropagation();
 			kyodaiInput.nativeElement.value = (event.target as HTMLSelectElement).value;
@@ -74,7 +74,7 @@ export class SettingsComponent implements AfterViewInit {
 
 	applyKyodaiUrl(): void {
 		const kyodaiInput = this.kyodaiInput();
-		if (kyodaiInput.nativeElement) {
+		if (kyodaiInput?.nativeElement) {
 			this.app.settings.kyodaiUrl = kyodaiInput.nativeElement.value;
 			this.app.settings.save();
 		}
diff --git a/src/app/model/log.ts b/src/app/model/log.ts
@@ -0,0 +1,16 @@
+import { environment } from '../../environments/environment';
+
+const enabled = environment.logging;
+
+export const log = {
+	error(...parameters: Array<unknown>): void {
+		if (enabled) {
+			console.error(...parameters);
+		}
+	},
+	warn(...parameters: Array<unknown>): void {
+		if (enabled) {
+			console.warn(...parameters);
+		}
+	}
+};
diff --git a/src/app/modules/editor/components/import/import.component.ts b/src/app/modules/editor/components/import/import.component.ts
@@ -1,6 +1,7 @@
 import { Component, inject, output } from '@angular/core';
 import type { Layout, LoadLayout } from '../../../../model/types';
 import { LayoutService } from '../../../../service/layout.service';
+import { log } from '../../../../model/log';
 import { importLayouts } from '../../model/import';
 import { TranslatePipe } from '@ngx-translate/core';
 import { DropZoneDirective } from '../../directives/drop-zone.directive';
@@ -39,12 +40,12 @@ export class ImportComponent {
 						imported.push(LayoutService.layout2loadLayout(layout, loadLayout.map));
 						this.logs.push({ msg: `Imported: "${file.name}"`, id: layout.id });
 					} else {
-						console.error(`Similar layout to "${layout.name}" already available. Import rejected`);
+						log.error(`Similar layout to "${layout.name}" already available. Import rejected`);
 						this.logs.push({ msg: `Similar layout to "${layout.name}" already available. Import rejected.`, isError: true });
 					}
 				}
 			} catch (error) {
-				console.error('Error importing', file, error);
+				log.error('Error importing', file, error);
 				this.logs.push({ msg: `ERROR importing "${file.name}". Invalid file.`, isError: true });
 			}
 		}
@@ -63,7 +64,7 @@ export class ImportComponent {
 	importFiles(files: Array<File>): void {
 		this.importLayouts(files)
 			.catch(error => {
-				console.error(error);
+				log.error(error);
 			});
 	}
 
diff --git a/src/app/service/layout.service.ts b/src/app/service/layout.service.ts
@@ -6,6 +6,7 @@ import { expandMapping, mappingToID } from '../model/mapping';
 import { generateBase64SVG } from '../model/layout-svg';
 import type { CompactMapping, Layout, Layouts, LoadLayout, Mapping, SafeUrlSVG } from '../model/types';
 import { LocalstorageService } from './localstorage.service';
+import { log } from '../model/log';
 
 @Injectable({ providedIn: 'root' })
 export class LayoutService {
@@ -93,13 +94,13 @@ export class LayoutService {
 			return await firstValueFrom(
 				this.http.get<Array<LoadLayout>>('assets/data/boards.json').pipe(
 					catchError((error: unknown) => {
-						console.error('Failed to load boards.json:', error);
+						log.error('Failed to load boards.json:', error);
 						return of([]);
 					})
 				)
 			);
 		} catch (error) {
-			console.error('Critical error loading boards:', error);
+			log.error('Critical error loading boards:', error);
 			return [];
 		}
 	}
diff --git a/src/app/service/localstorage.service.spec.ts b/src/app/service/localstorage.service.spec.ts
diff --git a/src/app/service/localstorage.service.ts b/src/app/service/localstorage.service.ts
diff --git a/src/environments/environment.apps.ts b/src/environments/environment.apps.ts
diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts
diff --git a/src/environments/environment.ts b/src/environments/environment.ts

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import { Meta } from '@angular/platform-browser';`
`3`	`3`	`import { environment } from '../environments/environment';`
`4`	`4`	`import { AppService } from './service/app.service';`
`5`	`5`	`import { LayoutService } from './service/layout.service';`
	`6`	`+import { log } from './model/log';`
`6`	`7`	`import type { LoadLayout, MahFormat } from './model/types';`
`7`	`8`	`import { GameComponent } from './components/game/game-component.component';`
`8`	`9`
`@@ -35,7 +36,7 @@ export class AppComponent implements OnInit {`
`35`	`36`	`ngOnInit(): void {`
`36`	`37`	`this.init()`
`37`	`38`	`.catch(error => {`
`38`		`- console.error(error);`
	`39`	`+ log.error(error);`
`39`	`40`	`});`
`40`	`41`	`}`
`41`	`42`
`@@ -65,7 +66,7 @@ export class AppComponent implements OnInit {`
`65`	`66`	`this.editorLoading = false;`
`66`	`67`	`})`
`67`	`68`	`.catch(error => {`
`68`		`- console.error(error);`
	`69`	`+ log.error(error);`
`69`	`70`	`this.editorLoading = false;`
`70`	`71`	`});`
`71`	`72`	`}`
`@@ -109,7 +110,7 @@ export class AppComponent implements OnInit {`
`109`	`110`	`try {`
`110`	`111`	`window.history.replaceState(null, '', window.location.pathname);`
`111`	`112`	`} catch (error) {`
`112`		`- console.error(error);`
	`113`	`+ log.error(error);`
`113`	`114`	`}`
`114`	`115`	`}`
`115`	`116`
`@@ -122,31 +123,31 @@ export class AppComponent implements OnInit {`
`122`	`123`	`try {`
`123`	`124`	`decoded = atob(base64jsonString);`
`124`	`125`	`} catch (error) {`
`125`		`- console.warn('Import failed: Invalid base64 encoding', error);`
	`126`	`+ log.warn('Import failed: Invalid base64 encoding', error);`
`126`	`127`	`return [];`
`127`	`128`	`}`
`128`	`129`
`129`	`130`	`let parsed: unknown;`
`130`	`131`	`try {`
`131`	`132`	`parsed = JSON.parse(decoded);`
`132`	`133`	`} catch (error) {`
`133`		`- console.warn('Import failed: Invalid JSON format', error);`
	`134`	`+ log.warn('Import failed: Invalid JSON format', error);`
`134`	`135`	`return [];`
`135`	`136`	`}`
`136`	`137`
`137`	`138`	`const mah = parsed as MahFormat;`
`138`	`139`	`if (!mah.mah \|\| mah.mah !== '1.0') {`
`139`		`- console.warn('Import failed: Invalid or unsupported MAH format version');`
	`140`	`+ log.warn('Import failed: Invalid or unsupported MAH format version');`
`140`	`141`	`return [];`
`141`	`142`	`}`
`142`	`143`
`143`	`144`	`if (!Array.isArray(mah.boards)) {`
`144`		`- console.warn('Import failed: Missing or invalid boards array');`
	`145`	`+ log.warn('Import failed: Missing or invalid boards array');`
`145`	`146`	`return [];`
`146`	`147`	`}`
`147`	`148`
`148`	`149`	`if (mah.boards.length === 0) {`
`149`		`- console.warn('Import failed: No boards found in import data');`
	`150`	`+ log.warn('Import failed: No boards found in import data');`
`150`	`151`	`return [];`
`151`	`152`	`}`
`152`	`153`
`@@ -163,7 +164,7 @@ export class AppComponent implements OnInit {`
`163`	`164`	`imported.push(LayoutService.layout2loadLayout(layout, custom.map));`
`164`	`165`	`}`
`165`	`166`	`} catch (error) {`
`166`		`- console.warn('Failed to import individual board:', error);`
	`167`	`+ log.warn('Failed to import individual board:', error);`
`167`	`168`	`}`
`168`	`169`	`}`
`169`	`170`
`@@ -172,12 +173,12 @@ export class AppComponent implements OnInit {`
`172`	`173`	`}`
`173`	`174`
`174`	`175`	`if (result.length === 0) {`
`175`		`- console.warn('Import completed but no valid boards were imported');`
	`176`	`+ log.warn('Import completed but no valid boards were imported');`
`176`	`177`	`}`
`177`	`178`
`178`	`179`	`return result;`
`179`	`180`	`} catch (error) {`
`180`		`- console.error('Unexpected error during import:', error);`
	`181`	`+ log.error('Unexpected error during import:', error);`
`181`	`182`	`return [];`
`182`	`183`	`}`
`183`	`184`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ import { clickExternalHref } from '../../model/external-links';`
`4`	`4`	`import { DurationPipe } from '../../pipes/duration.pipe';`
`5`	`5`	`import { LayoutService } from '../../service/layout.service';`
`6`	`6`	`import { LocalstorageService } from '../../service/localstorage.service';`
	`7`	`+import { log } from '../../model/log';`
`7`	`8`
`8`	`9`	`interface StatEntry {`
`9`	`10`	`name: string;`
`@@ -93,7 +94,7 @@ export class HelpComponent implements OnInit {`
`93`	`94`	`loseCount: 0`
`94`	`95`	`};`
`95`	`96`	`})`
`96`		`- .catch(error => console.error(error));`
	`97`	`+ .catch(error => log.error(error));`
`97`	`98`	`}`
`98`	`99`	`}`
`99`	`100`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { Component, inject, output } from '@angular/core';`
`2`	`2`	`import type { Layout, LoadLayout } from '../../../../model/types';`
`3`	`3`	`import { LayoutService } from '../../../../service/layout.service';`
	`4`	`+import { log } from '../../../../model/log';`
`4`	`5`	`import { importLayouts } from '../../model/import';`
`5`	`6`	`import { TranslatePipe } from '@ngx-translate/core';`
`6`	`7`	`import { DropZoneDirective } from '../../directives/drop-zone.directive';`
`@@ -39,12 +40,12 @@ export class ImportComponent {`
`39`	`40`	`imported.push(LayoutService.layout2loadLayout(layout, loadLayout.map));`
`40`	`41`	this.logs.push({ msg: `Imported: "${file.name}"`, id: layout.id });
`41`	`42`	`} else {`
`42`		- console.error(`Similar layout to "${layout.name}" already available. Import rejected`);
	`43`	+ log.error(`Similar layout to "${layout.name}" already available. Import rejected`);
`43`	`44`	this.logs.push({ msg: `Similar layout to "${layout.name}" already available. Import rejected.`, isError: true });
`44`	`45`	`}`
`45`	`46`	`}`
`46`	`47`	`} catch (error) {`
`47`		`- console.error('Error importing', file, error);`
	`48`	`+ log.error('Error importing', file, error);`
`48`	`49`	this.logs.push({ msg: `ERROR importing "${file.name}". Invalid file.`, isError: true });
`49`	`50`	`}`
`50`	`51`	`}`
`@@ -63,7 +64,7 @@ export class ImportComponent {`
`63`	`64`	`importFiles(files: Array<File>): void {`
`64`	`65`	`this.importLayouts(files)`
`65`	`66`	`.catch(error => {`
`66`		`- console.error(error);`
	`67`	`+ log.error(error);`
`67`	`68`	`});`
`68`	`69`	`}`
`69`	`70`