使用 Angular 的控制台中未显示属性未定义错误答案

【问题标题】：Property undefined errors are not shown in console using Angular使用 Angular 的控制台中未显示属性未定义错误
【发布时间】：2022-11-11 10:33:40
【问题描述】：

我正在做一个我最初并没有开始自己的项目。由于某种原因，未定义的错误未记录在控制台中。

例如，如果我在 Stackblitz (https://angular-ivy-zgxetk.stackblitz.io) 上启动一个新项目并定义一个对象，然后尝试访问未定义对象上的属性，它会在控制台中报告该对象的错误，例如：

错误错误：无法读取未定义的属性（读取“myProperty”）

这清楚地说明了在哪里修复它，但在我当前的项目中，它部分呈现 UI，然后由于未定义的错误而没有任何反应。该错误在控制台日志记录中不可见，但有时需要大量时间才能找出问题的实际原因。

我尝试从 Stackblitz 项目中复制 tsconfig，但没有解决这个问题。任何想法为什么我在控制台中看不到未定义的错误？

当前的 tsconfig 如下所示：
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strictPropertyInitialization": false,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "strictNullChecks": false,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "ES2020",
      "dom",
      "ESNext"
    ],
    "skipLibCheck": true,
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

【问题讨论】：

您是否在控制台中有过滤器，或者您是否从打印中删除了错误？ i.stack.imgur.com/6Hhfh.png
你有在 app 模块中定义的 ErrorHandler 吗？
@Mr.Stash 感谢您的评论，我找到了答案！

标签： angular typescript

【解决方案1】：

感谢@Mr.的评论。 Stash 我发现问题是一个ErrorHandler。我在应用程序模块中使用 ApplicationinsightsAngularpluginErrorService 。

    {
        provide: ErrorHandler,
        useClass: ApplicationinsightsAngularpluginErrorService
    },

事实证明，由于这个原因，带有 null 错误或未定义的消息不再记录到控制台（在此 article 中找到）。

解决方案原来是在 extensionConfig 中添加新的 ErrorHandler

    private appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: this.appConfig.insights.instrumentationKey,
        extensions: [this.angularPlugin],
        extensionConfig: {
            [this.angularPlugin.identifier]: {
                router: this.router,
                errorServices: [new ErrorHandler()],
            },
        },
    },
});

【讨论】：