Diagnosing Angular4 Server-Side Rendering Issues Using Asp.net Core

Question

We started our project with a dotnet template for Angular with server-side rendering (JavaScriptServices).
Sometimes we get timeouts on the server side of Angular4, and there is not much in this exception to help us diagnose the problem, especially if everything works well on the client side. Is there a way to access console logs for TS / JS code while working on the server side?
Or a way to get the error call stack? Because we get a message without any information about where this is happening.

I tried connecting the debugger using these instructions , but I get an error message:

InvalidOperationException: The Node.js process could not be initialized: Warning: This is an experimental function and may change at any time.

Answer 1

On the one hand, here you have two good articles on the topic that you probably already saw:

• https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#debugging-your-javascripttypescript-code-when-it-runs-on-the-server

• https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

And on the other hand, this question can give you ideas on how to approach the problem, maybe you need to configure some middleware in your starting class, for example Webpack or NodeServices:

• https://github.com/aspnet/JavaScriptServices/issues/144

I hope this focus is in the right direction.

Juan

Answer 2

From the link you posted is one way to process diagnostic data. We use JSNLog for our applications.

Install JSNLog in Angular 2+ app

At the command prompt, install the NPM package:

 npm install jsnlog --save 

Send excluded JavaScript exceptions to the server

An uncaught exception is simply an exception that does not fall into your own code. You will need to register them on the server.

By default, Angular handles uncaught exceptions by sending error messages to the console (details). To change this, you create a provider for the ErrorHandler interface (example).

• Open the main module in your favorite editor. This is most often called app.module.ts.

• Above the module definition, add an opaque exception handler that uses JSNLog to register a JavaScript exception on the server:

    export class UncaughtExceptionHandler implements ErrorHandler { handleError(error: any) { JL().fatalException('Uncaught Exception', error); } } // Existing module definition @NgModule({ ... 

• The TypeScript compiler will complain because you did not import JSNLog and ErrorHandler. Do it now:

  // ... other imports ...

   import { JL } from 'jsnlog'; import { ErrorHandler } from '@angular/core'; Finally add your uncaught exception handler to the providers list, as a provider for the ErrorHandler interface: @NgModule({ ... providers: [ ... { provide: ErrorHandler, useClass: UncaughtExceptionHandler } ], ... }) 

For more information see this