CODEWITHSUNDEEP
node.jsangular
kris_IV
kris_IV

Reputation: 2444

Universal Apps return errors without any explanation

I have problem with Angular 6 Universal App. On the first look everything looks OK, but when I look into logs on server side I see a lot of: 

ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]
ERROR [Error]

It's any way to start apps with more details when error is display?

I start apps from script "dev" in package.json:

 "scripts": {
    "ng": "ng",
    "prestart": "npm run build:prod",
    "start": "node $npm_package_main",
    "build": "ng run ng-universal:udk",
    "build:prod": "ng run ng-universal:udk:production",
    "dev": "ng-udkc",
    "dev:spa": "ng serve --hmr",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "now-build": "ng run ng-universal:udk:production && gulp build-zip",
    "gulp": "gulp build-zip",
    "now-start": "node $npm_package_main"
  },

Upvotes: 0

Views: 40

Answers (1)

DaniS
DaniS

Reputation: 3489

I had the same issue some days ago. Those errors are HTTP-Requests which returned a non 200 status code.

It's any way to start apps with more details when error is display?

From a NodeJs perspective I don't think there is. Altough Universal tries to run the angular application like it would be executed in a browser. So you could add an HTTP-Interceptor and add some console log's within the interceptor to figure out which URL is not responding.

Here a little example:

export class HeadersInterceptor implements HttpInterceptor {
  //private translateService: TranslateService;

  constructor(@Inject(WINDOW) private window: Window, @Inject(LOCAL_STORAGE) private localStorage: any, private translateService: TranslateService, @Inject(PLATFORM_ID) private platform) {
    /*this.translateService = this.injector.get(TranslateService);*/
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(req);
    console.log(req.url);
    return next.handle(req);
  }

Don't forget to add it to a module.

Example in core.module.ts: 

providers: [
 {
      provide: HTTP_INTERCEPTORS,
      useClass: HeadersInterceptor,
      multi: true,
    },
]

I hope this helps.

EDIT:

My Solution won't provide you detailed information why there is an error. I thought about it and you surely can do something like:

RxJS < 6: 

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(request).do((event: HttpEvent<any>) => {}, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        // do error handling here
      }
    });
  }

RxJS >= 6

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 return next.handle(request).pipe(tap((success) => {

      }, (err) => {
        if (err instanceof HttpErrorResponse) {
          console.log(err.status);
        }
      }
    ));
 }

Then you should get access to the error. Besides this code is copied from hackernoon: https://hackernoon.com/global-http-error-catching-in-angular-4-3-9e15cc1e0a6b

Upvotes: 1

Related Questions