使用 Asp.net Core 诊断 Angular4 服务器端渲染的问题

Posted 2023-03-27

【中文标题】使用 Asp.net Core 诊断 Angular4 服务器端渲染的问题

【英文标题】：Diagnosing problems on Angular4 server side rendering with Asp.net Core

【发布时间】：2018-01-19 19:32:47

【问题描述】：

我们使用带有服务器端渲染 (javascriptServices) 的 Angular dotnet 模板开始我们的项目。 我们有时会在 Angular4 的服务器端呈现超时，并且没有太多异常可以帮助我们诊断问题，特别是如果在客户端呈现上一切正常。 在服务器端运行时，有没有办法访问 TS/JS 代码的控制台日志？ 或者一种获取错误调用堆栈的方法？因为我们只收到一条消息，而没有任何关于它发生在哪里的信息。

我尝试使用these instructions 附加调试器，但出现错误：

InvalidOperationException：Node.js 进程初始化失败： 警告：这是一项实验性功能，可能随时更改。

【问题讨论】：

寻找 node.js 调试。服务器端渲染使用节点

我在 JavaScriptServices github 上添加了一个类似的问题：github.com/aspnet/JavaScriptServices/issues/1304

@paulaya，我相信这个问题已经为你解决了？还是您还需要帮助？

【参考方案1】：

一方面，您有两篇关于该主题的好文章，您可能已经看过：

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/

另一方面，这个问题可能会给您带来如何解决问题的想法，也许您需要在启动类中配置一些中间件，例如 Webpack 或 NodeServices：

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

我希望这个重点是正确的。

胡安

【讨论】：

感谢您的链接，我确实再次尝试附加调试器但没有成功，但我注意到一个名为 NodeInstanceOutputLogger 的额外选项，这可能会有所帮助

希望如此，请告诉我们。 ;)

【参考方案2】：

您发布的链接是处理诊断的一种方式，我们将JSNLog 用于我们的应用程序。

在您的 Angular 2+ 应用程序中安装 JSNLog

在命令行中，安装 NPM 包：

npm install jsnlog --save

向服务器发送未捕获的 JavaScript 异常

未捕获的异常只是您自己的代码未捕获的异常。您需要将这些记录到服务器。

默认情况下，Angular 通过向控制台发送错误消息来处理未捕获的异常（详情）。要更改这一点，您需要为 ErrorHandler 接口创建一个提供程序（示例）。

在您喜欢的编辑器中打开您的主模块。这是最常见的 称为 app.module.ts。

在模块定义之上，添加一个未捕获的异常处理程序 使用 JSNLog 将 JavaScript 异常记录到服务器：

 export class UncaughtExceptionHandler implements ErrorHandler   handleError(error: any) 
       JL().fatalException('Uncaught Exception', error);
    

 // Existing module definition @NgModule(
   ...

TypeScript 编译器会报错，因为你还没有导入 JSNLog 和 ErrorHandler。现在就这样做：

// ... 其他导入 ...

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 
    ],
    ...
) 

更多信息请参考this

【讨论】：

@downvoter ，我的解释有什么问题，我提供的解决方案是通用解决方案，可以处理所有类型的诊断场景，这是经过验证的版本，我提出了一个可以解决当前问题的解决方案不同的方式。