Adds a fancy warning to the console and logs js errors

.gitlab-ci.yml

@@ -37,7 +37,6 @@ build:
   stage: build
   only:
     - master
-    - pipeline-caching
   tags:
     - nodejs
   script:

package.json

@@ -8,22 +8,22 @@
   },
   "description": "Version 2 of arsnova.click (Frontend WebApp)",
   "scripts": {
-    "ng": "./node_modules/.bin/ng",
+    "ng": "ng",
     "start:SSR": "cd dist && node server",
-    "start:DEV": "npm run ng serve --host 0.0.0.0 --port 4200 --disable-host-check --aot",
-    "build:DEV": "npm run ng serve --host 0.0.0.0 --port 4200 --disable-host-check --aot --prod",
+    "start:DEV": "ng serve --host 0.0.0.0 --port 4200 --disable-host-check --aot",
+    "build:DEV": "ng serve --host 0.0.0.0 --port 4200 --disable-host-check --aot --prod",
     "build:SSR": "npm run build:PROD && npm run purify && npm run build:SERVER && npm run webpack:SERVER",
-    "build:SERVER": "npm run ng run frontend:server",
-    "build:PROD": "npm run ng build --prod",
-    "build:PROD-STATS": "npm run ng build --prod --stats-json",
+    "build:SERVER": "ng run frontend:server",
+    "build:PROD": "ng build --prod",
+    "build:PROD-STATS": "ng build --prod --stats-json",
     "bundle-report": "webpack-bundle-analyzer dist/browser/stats.json",
     "webpack:SERVER": "webpack --config webpack.server.config.js --progress --colors",
-    "test": "npm run ng test --browsers=ChromeHeadless --watch=false --source-map=false",
-    "test:DEV": "npm run ng test --browsers=Chrome --karma-config=src/karma.conf.dev.js --source-map=false",
-    "test:DEV:HEADLESS": "npm run ng test --browsers=ChromeHeadless --karma-config=src/karma.conf.dev.js --source-map=false",
-    "lint": "npm run ng lint",
+    "test": "ng test --browsers=ChromeHeadless --watch=false --source-map=false",
+    "test:DEV": "ng test --browsers=Chrome --karma-config=src/karma.conf.dev.js --source-map=false",
+    "test:DEV:HEADLESS": "ng test --browsers=ChromeHeadless --karma-config=src/karma.conf.dev.js --source-map=false",
+    "lint": "ng lint",
     "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "npm run ng e2e --no-webdriver-update",
+    "e2e": "ng e2e --no-webdriver-update",
     "purify": "node purifycss.js",
     "compress": "gzip dist/browser/** -r",
     "http-startup": "http-server dist/browser/ -p 4711 --gzip",

src/app/modals/available-quizzes/available-quizzes.component.html

@@ -11,7 +11,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <div class="d-flex flex-wrap flex-column flex-sm-row justify-content-between">
+    <div class="d-flex flex-wrap flex-column flex-sm-row justify-content-between justify-content-sm-start">
       <span *ngFor="let elem of sessions"
             class="text-light text-nowrap d-inline mr-sm-2 my-1 px-4 py-2 rounded pointer available-quiz"
             [class.bg-success]="elem.isValid()"

src/app/root.module.ts

 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { ErrorHandler, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
@@ -34,6 +34,7 @@ import { SharedService } from './service/shared/shared.service';
 import { TrackingService } from './service/tracking/tracking.service';
 import { UserService } from './service/user/user.service';
 import { WebsocketService } from './service/websocket/websocket.service';
+import { GlobalErrorHandler } from './shared/error-handler';
 import { SharedModule } from './shared/shared.module';
 import { ArsnovaClickAngulartics2Piwik } from './shared/tracking/ArsnovaClickAngulartics2Piwik';
 import { ThemesModule } from './themes/themes.module';
@@ -131,6 +132,10 @@ export const appRoutes: Routes = [
     Angulartics2Module.forRoot([ArsnovaClickAngulartics2Piwik]),
   ],
   providers: [
+    {
+      provide: ErrorHandler,
+      useClass: GlobalErrorHandler,
+    },
     RoutePreloader,
     I18nService,
     FooterBarService,

src/app/root/root/root.component.ts

@@ -51,6 +51,7 @@ export class RootComponent implements AfterViewInit {
     (async () => {
       this.themesService.updateCurrentlyUsedTheme();
     })();
+
   }
 
   public getFooterBarElements(): Array<IFooterBarElement> {

src/app/service/i18n/i18n.service.ts

@@ -3,33 +3,19 @@ import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 export enum Languages {
-  DE = <any>'DE',
-  EN = <any>'EN',
-  FR = <any>'FR',
-  IT = <any>'IT',
-  ES = <any>'ES'
+  DE = <any>'DE', EN = <any>'EN', FR = <any>'FR', IT = <any>'IT', ES = <any>'ES'
 }
 
 export enum LanguageTranslations {
-  DE = <any>'Deutsch',
-  EN = <any>'English',
-  FR = <any>'Français',
-  IT = <any>'Italiano',
-  ES = <any>'Español'
+  DE = <any>'Deutsch', EN = <any>'English', FR = <any>'Français', IT = <any>'Italiano', ES = <any>'Español'
 }
 
 export enum NumberTypes {
-  decimal = <any>'decimal',
-  currency = <any>'currency',
-  percent = <any>'percent'
+  decimal = <any>'decimal', currency = <any>'currency', percent = <any>'percent'
 }
 
 export enum CurrencyTypes {
-  DE = <any>'EUR',
-  EN = <any>'EUR',
-  FR = <any>'EUR',
-  IT = <any>'EUR',
-  ES = <any>'EUR'
+  DE = <any>'EUR', EN = <any>'EUR', FR = <any>'EUR', IT = <any>'EUR', ES = <any>'EUR'
 }
 
 @Injectable()
@@ -46,32 +32,45 @@ export class I18nService {
     }
 
     // the lang to use, if the lang isn't available, it will use the current loader to get them
-    this.translate.use(value.toString().toLowerCase());
+    this.translateService.use(value.toString().toLowerCase());
 
     this._currentLanguage = value;
   }
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private translate: TranslateService,
-  ) {
+  constructor(@Inject(PLATFORM_ID) private platformId: Object, private translateService: TranslateService) {
     this.initLanguage();
   }
 
   public formatNumber(number: number, type: NumberTypes = NumberTypes.decimal, locale?: string): string {
     return number.toLocaleString(locale, {
-      style: type.toString(),
-      currency: CurrencyTypes[this.currentLanguage.toString()],
+      style: type.toString(), currency: CurrencyTypes[this.currentLanguage.toString()],
     });
   }
 
   public setLanguage(language: Languages): void {
     this.currentLanguage = language;
-    this.translate.use(language.toString().toLowerCase());
+    this.translateService.use(language.toString().toLowerCase());
     if (isPlatformBrowser(this.platformId)) {
       const typ = document.createAttribute('lang');
       typ.value = language.toString().toLowerCase();
       document.getElementsByTagName('html').item(0).attributes.setNamedItem(typ);
+
+      const consoleLogStyle = [
+        'background: linear-gradient(#D33106, #571402)',
+        'border: 1px solid #3E0E02',
+        'color: white',
+        'display: block',
+        'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)',
+        'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset',
+        'line-height: 20px',
+        'text-align: center',
+        'padding: 20px',
+        'font-weight: bold',
+      ].join(';');
+      this.translateService.get('global.console-log-warning').subscribe(value => {
+        console.clear();
+        console.log(`%c${value}`, consoleLogStyle);
+      });
     }
   }
 
@@ -79,8 +78,8 @@ export class I18nService {
     let selectedLanguage: Languages;
     if (isPlatformBrowser(this.platformId) && Languages[window.localStorage.getItem('config.language')]) {
       selectedLanguage = Languages[window.localStorage.getItem('config.language')];
-    } else if (isPlatformBrowser(this.platformId) && Languages[this.translate.getBrowserLang().toUpperCase()]) {
-      selectedLanguage = Languages[this.translate.getBrowserLang().toUpperCase()];
+    } else if (isPlatformBrowser(this.platformId) && Languages[this.translateService.getBrowserLang().toUpperCase()]) {
+      selectedLanguage = Languages[this.translateService.getBrowserLang().toUpperCase()];
     } else {
       selectedLanguage = Languages.EN;
     }

src/app/shared/error-handler.ts

+import { LocationStrategy, PathLocationStrategy } from '@angular/common';
+import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable()
+export class GlobalErrorHandler implements ErrorHandler {
+  private _errorMap = [];
+
+  constructor(private injector: Injector, private zone: NgZone, private translateService: TranslateService) {
+    window.addEventListener('error', this.handleError, { passive: true });
+    window.onerror = this.handleError;
+  }
+
+  public handleError(evt: any): void {
+    const location = this.injector.get(LocationStrategy);
+
+    this._errorMap.push({
+      msg: evt.message,
+      line: evt.lineno,
+      file: evt.filename,
+      type: evt.type,
+      elem: (
+        evt.srcElement || evt.target
+      ),
+      url: location instanceof PathLocationStrategy ? location.path() : '',
+    });
+  }
+
+  public onZoneError(error): void {
+    this.handleError(error);
+  }
+
+}
+
+/*
+
+ window.addEventListener('error', (event: ErrorEvent) => {
+ console.log('error triggered');
+ const string = event.message.toLowerCase();
+ const substring = 'script error';
+ if (string.indexOf(substring) > -1) {
+ console.log('Script Error: See Browser Console for Detail');
+ } else {
+ const msg = [
+ 'Message: ' + event.message,
+ 'URL: ' + event.filename,
+ 'Line: ' + event.lineno,
+ 'Column: ' + event.colno,
+ 'Error object: ' + JSON.stringify(event.error),
+ ].join(' - ');
+
+ console.log(msg);
+ }
+
+ return false;
+ });
+
+ window.onerror = () => {
+ console.log('error');
+ };
+ */