feat(core): introduce `@boundary` control flow and programmatic error handling by JeanMeche · Pull Request #70463 · angular/angular · GitHub

Introduces a declarative way to catch rendering errors in templates using the new @boundary block, preventing local failures from crashing the entire application hierarchy.

@boundary {
  <complex-chart [data]="data" />
} @error (let err = $error; let r = $retry) {
  <p>Failed to load chart: {{err.message}}</p>
  <button (click)="r()">Retry</button>
}

Additionally, this adds programmatic error handling for dynamically created views by introducing an onError option to ViewContainerRef.createComponent,createEmbeddedView and the standalone alone createComponent function:

viewContainerRef.createComponent(DynamicComponent, {
  onError: (err: Error, details: ErrorDetails) => {
    console.error('Component rendering failed:', err);
    // Render an alternative UI or log metrics
  }
});

Additional changes:

ErrorHandler can now implement onViewError(err, details) to receive rich metadata about caught boundary errors.

Note: most of design & implementation was done by @alxhub.
Note2: Docs on the feature will be addressed in a follow-up PR.

Was @try {} / @catch {} considered? Why was @boundary {} / @error {} preferred?

Error Boundaries are a common concept in frontend frameworks and try/catch felt more "imperative" to us.

It looks like this wasn't resolved?

Note for: we need to settle on either retry or reset for consistency

Is the a precedent anywhere for this? @atscott Didn't you use something similar for reseting/retrying route resources, or was that reloading?

I think maybe you're referring to reload, potentially? There was something in there to trigger reloads on resources in an error state.

Ah okay. Maybe reset is most appropriate then? reload and retry to me imply some kind of network request operation, whereas reset more accurately reflects the fact that we're simply resetting some internal framework state?

Add the runtime primitives `ɵɵboundaryCreate` and `ɵɵboundaryUpdate` to the core instructions, which handle synchronous view destruction and provide the `ON_ERROR` interceptor hooks. Also include the initial compiler AST representations for the new syntax including the Lexer tokenization and HTML Parser integration. This lays the foundational structure for `@boundary` prior to code generation. Co-authored-by: Matthieu Riegler <kyro38@gmail.com>

Add support for `@boundary` blocks in the template type-checking pipeline.

Add support for the new `@boundary` and `@error` control flow blocks in the Angular Language Service. This includes: - Updating outlining spans to handle boundary blocks correctly. - Adding classification visitor methods for semantic tokens. - Adding template target visitor methods for navigation and hover support. - Updating the TextMate grammar to recognize `@boundary` and the `when` clause.

…ation Added some tests to ensure error boundaries work with SSR and hydration.

…ST nodes

This PR was merged into the repository. The changes were merged into the following branches:

main: d470afa

angular#70463) Add the runtime primitives `ɵɵboundaryCreate` and `ɵɵboundaryUpdate` to the core instructions, which handle synchronous view destruction and provide the `ON_ERROR` interceptor hooks. Also include the initial compiler AST representations for the new syntax including the Lexer tokenization and HTML Parser integration. This lays the foundational structure for `@boundary` prior to code generation. Co-authored-by: Matthieu Riegler <kyro38@gmail.com> PR Close angular#70463

…ngular#70463) Add support for `@boundary` blocks in the template type-checking pipeline. PR Close angular#70463

Add support for the new `@boundary` and `@error` control flow blocks in the Angular Language Service. This includes: - Updating outlining spans to handle boundary blocks correctly. - Adding classification visitor methods for semantic tokens. - Adding template target visitor methods for navigation and hover support. - Updating the TextMate grammar to recognize `@boundary` and the `when` clause. PR Close angular#70463

…ation (angular#70463) Added some tests to ensure error boundaries work with SSR and hydration. PR Close angular#70463

This was missing from angular#70463

This was missing from #70463

This was missing from #70463 (cherry picked from commit 8c6e6a5)

) * feat(keys-manager): support @boundary/@error error-boundary block Adds forward-compat support for Angular's upcoming @boundary/@error error-boundary block (angular/angular#70463, targeted for Angular 22.2), mirroring the existing @switch/@if handling. - compiler-compat.ts: guarded TmplAstBoundaryBlock/TmplAstBoundaryErrorBlock structural types + type guards, so it compiles today and picks up the real compiler exports transparently once shipped. - utils.ts: wired the new block into the generic block-walker so both directiveExtractor and structuralDirectiveExtractor traverse into it with no extractor-specific changes. - compiler-compat.spec.ts: guard-rejection unit tests. - verify-keys-manager-compat.mts: added a real @boundary/@error fixture, gated by a new supportsBoundaryBlock(version) check (mirrors the existing supportsGroupedCases gate for Angular 21.1). - ci.yml: new keys-manager-compat matrix entry pinned to '>=22.2.0-next.0 <22.3.0', marked experimental (continue-on-error) since it tracks an unreleased Angular prerelease; verified locally against the real @angular/compiler@22.2.0-next.7. * chore(keys-manager): track stable Angular 22.2 in compat matrix Angular 22.2 is released, so the @boundary/@error support no longer needs prerelease handling. - ci.yml: drop the experimental >=22.2.0-next.0 matrix entry; the floating '22' entry now resolves to 22.2 and gates merges. - verify-keys-manager-compat.mts: revert the '='-safe arg parsing and the --legacy-peer-deps prerelease handling, no longer needed. - Reword comments from future to past tense. * fix(keys-manager): parse compat script args at first = The script advertises --angular=<range>, but split('=') truncated any value containing its own '=', such as '>=22.2.0 <22.3.0'. Split each option at its first '=' only so the full range reaches npm. * test(keys-manager): add @boundary/@error extraction spec

ngbot Bot added this to the Backlog milestone Aug 29, 2026

JeanMeche force-pushed the error-boundary branch 3 times, most recently from 2a70304 to c388ce6 Compare August 29, 2026 00:57

JeanMeche marked this pull request as ready for review August 31, 2026 16:59

JeanMeche requested a review from crisbeto August 31, 2026 16:59

pullapprove Bot requested review from atscott and kirjs August 31, 2026 16:59

JeanMeche requested review from leonsenft and removed request for kirjs August 31, 2026 17:00

JeanMeche force-pushed the error-boundary branch 3 times, most recently from cb16745 to dc7ed41 Compare August 31, 2026 17:26

atscott requested changes Sep 1, 2026

View reviewed changes

Comment thread packages/core/src/render3/instructions/change_detection.ts Outdated

Comment thread packages/core/src/error_handler.ts

Comment thread packages/language-service/src/outlining_spans.ts

atscott reviewed Sep 1, 2026

View reviewed changes

Comment thread goldens/public-api/core/index.api.md Outdated

atscott reviewed Sep 2, 2026

View reviewed changes

leonsenft requested changes Sep 2, 2026

View reviewed changes

JeanMeche force-pushed the error-boundary branch 3 times, most recently from 48c436e to c742892 Compare September 2, 2026 23:22

leonsenft requested changes Sep 3, 2026

View reviewed changes

JeanMeche commented Sep 3, 2026

View reviewed changes

JeanMeche mentioned this pull request Sep 3, 2026

docs: Add error boundaries entries #70560

Merged

alxhub and others added 6 commits September 8, 2026 21:50

refactor(compiler): template type-checking support for @boundary

57668e4

Add support for `@boundary` blocks in the template type-checking pipeline.

refactor(platform-server): ensure error boundaries work with ssr/hydr…

2785704

…ation Added some tests to ensure error boundaries work with SSR and hydration.

fixup! refactor(core): implement @boundary runtime primitives and A…

ef53124

…ST nodes

fixup! feat(core): add ErrorBoundary programmatic APIs

9d39794

JeanMeche force-pushed the error-boundary branch from 593dce3 to 9d39794 Compare September 8, 2026 20:31

JeanMeche requested a review from atscott September 8, 2026 20:31

JeanMeche added 2 commits September 8, 2026 22:45

fixup! feat(core): add ErrorBoundary programmatic APIs

23d54b5

fixup! refactor(core): implement @boundary runtime primitives and A…

4a49dad

…ST nodes

atscott approved these changes Sep 9, 2026

View reviewed changes

JeanMeche added action: merge The PR is ready for merge by the caretaker target: minor This PR is targeted for the next minor release labels Sep 9, 2026

crisbeto approved these changes Sep 9, 2026

View reviewed changes

crisbeto closed this in f6afb80 Sep 9, 2026

angular-robot pushed a commit to angular-robot/angular that referenced this pull request Sep 9, 2026

refactor(compiler): template type-checking support for @boundary (a…

f7597cb

…ngular#70463) Add support for `@boundary` blocks in the template type-checking pipeline. PR Close angular#70463

JeanMeche mentioned this pull request Sep 9, 2026

Add support for Angular error boundaries in upcoming 22.2 prettier/prettier#20014

Closed

Yahiro025 mentioned this pull request Sep 10, 2026

Angular: Support @boundary / @error error boundaries Yahiro025/prettier#1

Open

4 of 6 tasks

fisker mentioned this pull request Sep 12, 2026

Angular: Support @boundary / @error error boundaries prettier/prettier#20015

Merged

4 of 6 tasks

medbenmakhlouf mentioned this pull request Sep 13, 2026

feat(keys-manager): support @boundary/@error error-boundary block jsverse/transloco#1016

Merged

4 of 13 tasks

JeanMeche mentioned this pull request Sep 20, 2026

refactor(vscode-extension): add syntax highlighting for @boundary block #70836

Merged

JeanMeche added a commit to JeanMeche/angular that referenced this pull request Sep 20, 2026

refactor(vscode-extension): add syntax highlighting for @boundary block

e81b89b

This was missing from angular#70463

thePunderWoman pushed a commit that referenced this pull request Sep 21, 2026

refactor(vscode-extension): add syntax highlighting for @boundary block

8c6e6a5

This was missing from #70463

thePunderWoman pushed a commit that referenced this pull request Sep 21, 2026

refactor(vscode-extension): add syntax highlighting for @boundary block

ea0da6f

This was missing from #70463 (cherry picked from commit 8c6e6a5)

+              export interface ErrorDetails {
+                  readonly boundary?: {
+                      readonly type: Type<any>;
+                      readonly reset: () => void;

+              import * as t from './r3_ast';
+              /** Pattern used to identify a boundary `let` parameter. */
+              const LET_PATTERN = /^(let\s+)(.*)/;

feat(core): introduce `@boundary` control flow and programmatic error handling by JeanMeche · Pull Request #70463 · angular/angular · GitHub

feat(core): introduce @boundary control flow and programmatic error handling - #70463

feat(core): introduce @boundary control flow and programmatic error handling#70463JeanMeche wants to merge 9 commits intoangular:mainangular/angular:mainfrom JeanMeche:error-boundaryJeanMeche/angular:error-boundaryCopy head branch name to clipboard

Conversation

JeanMeche commented Aug 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

splincode commented Aug 30, 2026

Uh oh!

JeanMeche commented Aug 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

leonsenft Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

JeanMeche Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

leonsenft Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

atscott Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

leonsenft Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

crisbeto commented Sep 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(core): introduce @boundary control flow and programmatic error handling#70463
JeanMeche wants to merge 9 commits into
angular:mainfrom
JeanMeche:error-boundary

JeanMeche commented Aug 29, 2026 •
edited
Loading