angular 组件/声明性错误处理(ala React 16 's< ErrorBoundary/>)

7bsow1i6  于 2022-10-29  发布在  Angular
关注(0)|答案(8)|浏览(117)

我正在提交...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

React最近引入了一个称为“错误边界”的概念(https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html)。基本上你用.... Package 你的应用程序的关键区域,其中的任何组件/模板错误都可以在那个级别处理。我遇到过我的Angular 4应用程序的问题,组件中的错误会导致应用程序崩溃...有时应用程序仍然是可导航的,但往往渲染是混乱的,应用程序只需要重新启动。大多数博客文章(和Angular文档)不处理渲染问题,只是记录/处理任何可能发生的异常。在一个Angular应用程序中,优雅地处理“破坏性错误”的策略是什么?像这样的东西对Angular有意义吗?
编辑:在与@robwormald讨论后,似乎当前处理未捕获错误的禁止解决方案是记录它们,然后通过Angular中已有的ErrorHandler机制重新加载整个应用。这仍然不太理想(尽管理想情况下不会有错误:-))。随着应用的增长,以及第三方组件的添加/升级-引入ErrorBoundary的概念将是有用的,主要原因有两个:
1.允许应用程序更温和、更有选择性地降级(如果ErrorBoundary下的子组件失败,则可以重新启动)
1.错误边界将引入“隔板”,确保单个错误不会导致整个系统崩溃(强制应用程序重新加载/重启),这一点在发生错误的可能性越大(应用程序大小、外部组件数量等)时就越重要

esbemjvw

esbemjvw1#

这将是非常有帮助的。事实上,在Angular中,整个应用程序“沉没”在某个组件中的一个错误上,这只是令人尴尬👎

kwvwclae

kwvwclae2#

完全同意!在组件级别上拥有错误处理程序将非常有帮助,允许更细粒度和更灵活的错误管理。
在我们的例子中,我们在UI库中有一个(让我们称之为)“构建块”,它由多个组件、指令和服务组成。我们的想法是在最外层的组件上有一个事件,一旦抛出一个错误,它就会发出--无论它发生在组件层次结构的哪个位置。
作为一种解决方案,我们已经实现了一个服务,至少允许这个功能来处理我们自己引发的错误。尽管如此,如果Angular在某个时候失败了,我们没有能力捕捉它。现在应用程序将负责,它基本上必须重定向到一个错误页面/重新加载应用程序-因为它不能更好地处理这个错误(例如,通过不呈现页面的这一部分)。

hc2pp10m

hc2pp10m3#

有什么进展吗?

y1aodyip

y1aodyip4#

错误边界.组件.ts

import {
  ChangeDetectorRef,
  Component,
  ErrorHandler,
  ContentChild,
  TemplateRef,
} from '@angular/core';

@Component({
  selector: 'error-boundary',
  templateUrl: './error-boundary.component.html',
})
export class ErrorBoundaryComponent {
  constructor(
    private readonly changeDetector: ChangeDetectorRef,
    private readonly errorHandler: ErrorHandler,
  ) {
    this.changeDetector.detach();
  }

  @ContentChild(TemplateRef)
  template: TemplateRef<{}>;

  ngDoCheck() {
    try {
      this.changeDetector.detectChanges();
    } catch (e) {
      this.errorHandler.handleError(e);
    }
  }
}

错误边界.组件.html

<ng-container *ngTemplateOutlet="template"></ng-container>

示例.组件.html

<header>Header<header>
<error-boundary>{{ error() }}</error-boundary>
<footer>Footer</footer>
6yoyoihd

6yoyoihd5#

@pauldraper我尝试用一个库中的子组件来实现这个功能(显然我不能在库中构建错误处理)。你知道我该怎么做吗?

4urapxun

4urapxun6#

@sandrooco显然没有办法,这不是某个组件可以轻易解决的问题,这是Angular框架的一个全球性的严重问题,一直被Angular团队忽略。

ntjbwcob

ntjbwcob7#

有一个npm包可以帮助我们实现组件上的错误处理,就像React一样。
https://www.npmjs.com/package/ngx-error-boundary的最大值
这应该会有帮助

bkhjykvo

bkhjykvo8#

@shivekundefined不,这是完全不同的事情。我检查了代码,这个库基本上只提供了一个服务,带有“handleError”方法+一个组件来处理错误。
@pauldraper上面的回答要简短得多,也很有用。

但是,我们在这里讨论的不是简单的错误处理,而是低级的Angular 功能:能够在呈现组件时忽略错误,并继续优雅地运行应用程序。(请记住,您也有来自其他库的第3方组件)。

这就是为什么它说错误边界:错误只在有限的范围内有效。我们不是说“错误处理”🙂

相关问题