Angular Universal (Server Side Rendering/SSR) Application doesn't load

[vbpradeep]

1. I have tried to use Exception-less in Angular universal project after included entire application not loaded in serer side. if i comment and build means app running.

can you please its supports in Angular 8 with CLI, universal project? .

[niemyjski]

Are there any errors? What's the best way to reproduce? We are working on our angular 8 aot app here (https://github.com/exceptionless/Exceptionless.UI/tree/feature/vnext) and haven't noticed any issues. Is there any chance you can take a look at our vnext app and let us know if there is any differences between the two apps? We also have a universal app here (https://github.com/exceptionless/Exceptionless.javascript) and that's working as well.

[vbpradeep]

Hi @niemyjski ,

just follow the angular CLI with server-side-rendering.

https://angular.io/guide/universal

Just make service in angular and include like below

`export class ErrorHandlingService {

private client = ExceptionlessClient.default;
constructor( private http: HttpClient ) {
  this.client.config.apiKey =<apikey>;
  this.client.config.serverUrl =<server_url>;
  this.client.config.setUserIdentity({ name: "test", data: "test-data", identity: 'user' })
 }

postErrors (ex: Error) {
   this.client.submitException(ex);
}

}`

then build with below commands

npm run build:ssr npm run serve:ssr

then open the browser with localhost:4000

app won't run, if comment the exception-less code alone it will load in server side.

if normally run angular means its works like ng serve command. but if we run in universal server-side means it's won't work

please check and do the needful

[niemyjski]

Thanks, I'll try that. We are doing that today (https://github.com/exceptionless/Exceptionless.UI/blob/feature/vnext/src/app/exceptionless-client.ts, please also see our error handler :)) and working on the aot builds now.

[niemyjski]

Would you mind sharing your npm tasks for the two commands above.

[vbpradeep]

if you create project means all commands are available in package.json

npm run build:ssr

npm run serve:ssr

[vbpradeep]

Hi @niemyjski ,

Any Update on this?

[niemyjski]

I haven't had time to look into this very much, if you can create a sample app and link me to the GitHub repo that would be greatly appreciated. I created a new app using the Angular CLI and it has no tasks in there for server side rendering and I've never used angular that way. If you could create a new sample app and reference Exceptionless and put it on GitHub I could clone it and debug it. Otherwise, I'll need to set aside a chunk of time to figure out what's all needed to get ssr enabled on a new angular app before I can dive in. Can you do this? It would be a huge help.

example/angular-ssr/angular-ssr on  master [✘!+?] is 📦 v0.0.0 via ⬢ v12.4.0 took 6s 
➜ npm run build:ssr npm run serve:ssr
npm ERR! missing script: build:ssr
npm ERR! 
npm ERR! Did you mean this?
npm ERR!     build

[vbpradeep]

HI @niemyjski ,

please follow the commands.

ng new sample-Project
cd sample-Project

ng add @nguniversal/express-engine

npm run build:ssr && npm run serve:ssr

[niemyjski]

I was finally able to get it installed by running ng add @nguniversal/express-engine --clientProject angular-ssr.

When I first ran exceptionless I got the following error:

> node dist/server

[error] Exceptionless: Error running plugin 'ModuleInfoPlugin': The "path" argument must be of type string. Received type undefined. Discarding Event.
[info] Exceptionless: Checking for updated settings from: v0.
[info] Exceptionless: Updated settings: v19

There definitely is an error but the code is running, and I think the error is originating from here: https://github.com/exceptionless/Exceptionless.JavaScript/blob/master/src/services/NodeModuleCollector.ts#L6-L20

The reason for this is due to how web pack polyfills node.

I've been playing around with the Webpack settings (Webpack.server.config) and not having much luck, here's where I'm currently at (note, my original 1.x Webpack config wouldn't work either on this new app... I cross referenced https://github.com/webpack/node-libs-browser#readme for the settings below and it should work):

// don't polyfill or mock node requires (causes exceptionless universial to fail on browser)
  // http://webpack.github.io/docs/configuration.html#node
  node: {
    // webpack defaults
    console: false,
    global: true,
    process: true,
    __filename: 'mock',
    __dirname: 'mock',
    Buffer: true,
    setImmediate: true,

    // Exceptionless specific
    child_process: false,
    fs: false,
    http: true,
    https: true,
    os: true,
    path: true,
    process: true,
    clearImmediate: true,
    url: true
  }

Here is the exact changes I needed to make a while ago to a react universal app (erikras/react-redux-universal-hot-example@master...niemyjski:master) using Webpack 1.x

If you could help try playing around with these settings with me perhaps we can find a solution quicker, it comes down to a Webpack issue.

[niemyjski]

I think I just fixed the issue :)

[niemyjski]

Can you please use the node config above and then install v1.6.2 which I just published to npm. I was able to get everything running and submit events.