You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 8475045
Browse filesBrowse the repository at this point in the historyBrowse files
IMPORTANT: `@boundary` is in [developer preview](reference/releases#developer-preview).
4
+
5
+
Angular templates support error boundaries to gracefully handle runtime errors that occur during rendering and change detection.
6
+
7
+
Error boundaries prevent a single component's failure from crashing the entire application and provide a way to display fallback UI to the user.
8
+
9
+
## Catching errors with `@boundary` and `@error`
10
+
11
+
The `@boundary` block wraps a section of your template. If any component or directive inside this boundary throws an error during initialization or change detection, the framework catches the error and renders the `@error` block instead.
12
+
13
+
```angular-html
14
+
@boundary {
15
+
<app-risky-component />
16
+
} @error {
17
+
<p>Something went wrong!</p>
18
+
}
19
+
```
20
+
21
+
## Accessing the error object
22
+
23
+
You can access the caught error by accessing the implicit `$error` variable:
24
+
25
+
```angular-html
26
+
@boundary {
27
+
<app-risky-component />
28
+
} @error {
29
+
<p>Error occurred: {{ $error.message }}</p>
30
+
}
31
+
```
32
+
33
+
## Resetting the boundary
34
+
35
+
You can attempt to re-render the content of the `@boundary` by calling the implicit `$reset` function in the `@error` block. When called, it resets the boundary state and tries to render the original content again.
36
+
37
+
```angular-html
38
+
@boundary {
39
+
<app-flaky-component />
40
+
} @error {
41
+
<p>Loading failed.</p>
42
+
<button (click)="$reset()">Try again</button>
43
+
}
44
+
```
45
+
46
+
## Conditional error handling with `when`
47
+
48
+
You can use `when` clauses to conditionally handle specific types of errors, allowing you to provide different fallback UIs. Angular evaluates this condition when it catches an error.
49
+
50
+
```angular-html
51
+
@boundary {
52
+
<app-chart-dashboard />
53
+
} @error (let err; reset = $reset; when isRenderError(err)) {
Order your `@error` blocks from most specific to least specific, as Angular evaluates the `when` clauses in order and uses the first one that evaluates to true. A final `@error` block without a `when` clause acts as a catch-all fallback.
62
+
63
+
## Global error handler integration
64
+
65
+
When a boundary catches an error, Angular can still notify the global `ErrorHandler`. You can implement the optional `onViewError` hook in your custom `ErrorHandler` to log these caught errors to your error tracking service.
console.warn('Caught by boundary:', details.boundary);
77
+
myErrorTrackingService.log(error);
78
+
}
79
+
}
80
+
```
81
+
82
+
IMPORTANT: If an `@error` block itself throws an error, the error propagates to the next outer `@boundary` or Angular treats it as an unhandled application error.
83
+
84
+
## Content projection
85
+
86
+
If your component uses [content projection](guide/components/content-projection), wrapping `<ng-content>` in a `@boundary` does not catch errors from projected content. That content belongs to the view that declares it, not the receiving component's view.
87
+
88
+
For example, a wrapper component with the following template does not catch errors from components projected into it:
89
+
90
+
```angular-html {avoid}
91
+
@boundary {
92
+
<ng-content />
93
+
} @error {
94
+
<p>Something went wrong!</p>
95
+
}
96
+
```
97
+
98
+
To catch those errors, wrap the wrapper component and its projected content in a `@boundary` in the parent template:
99
+
100
+
```angular-html {prefer}
101
+
@boundary {
102
+
<app-wrapper>
103
+
<app-risky-component />
104
+
</app-wrapper>
105
+
} @error {
106
+
<p>Something went wrong!</p>
107
+
}
108
+
```
109
+
110
+
## Dynamic views and programmatic error handling
111
+
112
+
Error handling isn't limited to template syntax. If you are creating components or embedded views dynamically, you can use the `onError` option to handle errors. See the [Handling rendering errors](guide/components/programmatic-rendering#handling-rendering-errors) section in the programmatic rendering guide for more information.
The `@boundary` block wraps a section of your template. If any component or directive inside this boundary throws an error during initialization or change detection, the framework catches the error and renders the `@error` block instead.
@@ -18,9 +18,9 @@ The `@boundary` block wraps a section of your template. If any component or dire
18
18
}
19
19
```
20
20
21
-
## Accessing theerrorobject
21
+
## エラーオブジェクトへのアクセス {#accessing-the-error-object}
22
22
23
-
You can access the caught error by accessing the implicit `$error` variable:
23
+
暗黙の`$error`変数を参照すると、捕捉されたエラーにアクセスできます:
24
24
25
25
```angular-html
26
26
@boundary {
@@ -30,9 +30,9 @@ You can access the caught error by accessing the implicit `$error` variable:
30
30
}
31
31
```
32
32
33
-
## Resetting theboundary
33
+
## バウンダリのリセット {#resetting-the-boundary}
34
34
35
-
You can attempt to re-render the content of the `@boundary` by calling the implicit `$reset` function in the `@error` block. When called, it resets the boundary state and tries to render the original content again.
You can use `when` clauses to conditionally handle specific types of errors, allowing you to provide different fallback UIs. Angular evaluates this condition when it catches an error.
@@ -58,11 +58,11 @@ You can use `when` clauses to conditionally handle specific types of errors, all
58
58
}
59
59
```
60
60
61
-
Order your `@error` blocks from most specific to least specific, as Angular evaluates the `when` clauses in order and uses the first one that evaluates to true. A final `@error` block without a `when` clause acts as a catch-all fallback.
When a boundary catches an error, Angular can still notify the global `ErrorHandler`. You can implement the optional `onViewError` hook in your custom `ErrorHandler` to log these caught errors to your error tracking service.
@@ -79,13 +79,13 @@ export class MyErrorHandler implements ErrorHandler {
79
79
}
80
80
```
81
81
82
-
IMPORTANT: If an `@error` block itself throws an error, the error propagates to the next outer `@boundary` or Angular treats it as an unhandled application error.
If your component uses [content projection](guide/components/content-projection), wrapping `<ng-content>` in a `@boundary` does not catch errors from projected content. That content belongs to the view that declares it, not the receiving component's view.
Error handling isn't limited to template syntax. If you are creating components or embedded views dynamically, you can use the `onError` option to handle errors. See the [Handling rendering errors](guide/components/programmatic-rendering#handling-rendering-errors) section in the programmatic rendering guide for more information.
0 commit comments