Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion adev-ja/src/app/routing/navigation-entries/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
contentPath: 'guide/templates/defer',
},
{
label: 'Error boundaries with @boundary',
label: '@boundaryによるエラーバウンダリ',
path: 'guide/templates/error-boundaries',
contentPath: 'guide/templates/error-boundaries',
status: 'new',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。[Angular Router](/guide/routing)は、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。

HELPFUL: RouterのネイティブView Transitions統合は現在[デベロッパープレビュー](/reference/releases#developer-preview)中です。ネイティブView Transitionsは比較的新しいブラウザ機能であり、すべてのブラウザでのサポートは限られています。
HELPFUL: RouterのネイティブView Transitions統合は現在[開発者プレビュー](/reference/releases#developer-preview)中です。ネイティブView Transitionsは比較的新しいブラウザ機能であり、すべてのブラウザでのサポートは限られています。

## Viewトランジションの仕組み {#how-view-transitions-work}

Expand Down
112 changes: 112 additions & 0 deletions adev-ja/src/content/guide/templates/error-boundaries.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
# Error boundaries with `@boundary`

IMPORTANT: `@boundary` is in [developer preview](reference/releases#developer-preview).

Angular templates support error boundaries to gracefully handle runtime errors that occur during rendering and change detection.

Error boundaries prevent a single component's failure from crashing the entire application and provide a way to display fallback UI to the user.

## Catching errors with `@boundary` and `@error`

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.

```angular-html
@boundary {
<app-risky-component />
} @error {
<p>Something went wrong!</p>
}
```

## Accessing the error object

You can access the caught error by accessing the implicit `$error` variable:

```angular-html
@boundary {
<app-risky-component />
} @error {
<p>Error occurred: {{ $error.message }}</p>
}
```

## Resetting the boundary

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.

```angular-html
@boundary {
<app-flaky-component />
} @error {
<p>Loading failed.</p>
<button (click)="$reset()">Try again</button>
}
```

## Conditional error handling with `when`

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.

```angular-html
@boundary {
<app-chart-dashboard />
} @error (let err; reset = $reset; when isRenderError(err)) {
<p>Network issue. Check your connection.</p>
<button (click)="reset()">Retry</button>
} @error {
<p>An unexpected error occurred: {{ $error.message }}</p>
}
```

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.

## Global error handler integration

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.

```ts
@Injectable()
export class MyErrorHandler implements ErrorHandler {
handleError(error: any): void {
// Handle uncaught errors
}

onViewError(error: Error, details: ErrorDetails): void {
// Handle errors caught by a @boundary
console.warn('Caught by boundary:', details.boundary);
myErrorTrackingService.log(error);
}
}
```

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.

## Content projection

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.

For example, a wrapper component with the following template does not catch errors from components projected into it:

```angular-html {avoid}
@boundary {
<ng-content />
} @error {
<p>Something went wrong!</p>
}
```

To catch those errors, wrap the wrapper component and its projected content in a `@boundary` in the parent template:

```angular-html {prefer}
@boundary {
<app-wrapper>
<app-risky-component />
</app-wrapper>
} @error {
<p>Something went wrong!</p>
}
```

## Dynamic views and programmatic error handling

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.
44 changes: 22 additions & 22 deletions adev-ja/src/content/guide/templates/error-boundaries.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Error boundaries with `@boundary`
# `@boundary`によるエラーバウンダリ

IMPORTANT: `@boundary` is in [developer preview](reference/releases#developer-preview).
IMPORTANT: `@boundary`は[開発者プレビュー](reference/releases#developer-preview)です。

Angular templates support error boundaries to gracefully handle runtime errors that occur during rendering and change detection.
Angularテンプレートは、レンダリングや変更検知中に発生するランタイムエラーを適切に処理するためのエラーバウンダリをサポートしています。

Error boundaries prevent a single component's failure from crashing the entire application and provide a way to display fallback UI to the user.
エラーバウンダリは、単一のコンポーネントの障害によってアプリケーション全体がクラッシュするのを防ぎ、ユーザーにフォールバックUIを表示する方法を提供します。

## Catching errors with `@boundary` and `@error`
## `@boundary`と`@error`によるエラーの捕捉 {#catching-errors-with-boundary-and-error}

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.
`@boundary`ブロックはテンプレートの一部をラップします。このバウンダリ内のコンポーネントやディレクティブが初期化または変更検知中にエラーをスローした場合、フレームワークはそのエラーを捕捉し、代わりに`@error`ブロックをレンダリングします。

```angular-html
@boundary {
Expand All @@ -18,9 +18,9 @@ The `@boundary` block wraps a section of your template. If any component or dire
}
```

## Accessing the error object
## エラーオブジェクトへのアクセス {#accessing-the-error-object}

You can access the caught error by accessing the implicit `$error` variable:
暗黙の`$error`変数を参照すると、捕捉されたエラーにアクセスできます:

```angular-html
@boundary {
Expand All @@ -30,9 +30,9 @@ You can access the caught error by accessing the implicit `$error` variable:
}
```

## Resetting the boundary
## バウンダリのリセット {#resetting-the-boundary}

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.
`@error`ブロック内で暗黙の`$reset`関数を呼び出すことで、`@boundary`のコンテンツの再レンダリングを試みることができます。呼び出されると、バウンダリの状態をリセットし、元のコンテンツのレンダリングを再試行します。

```angular-html
@boundary {
Expand All @@ -43,9 +43,9 @@ You can attempt to re-render the content of the `@boundary` by calling the impli
}
```

## Conditional error handling with `when`
## `when`による条件付きエラーハンドリング {#conditional-error-handling-with-when}

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.
`when`句を使用すると、特定の種類のエラーを条件付きで処理し、異なるフォールバックUIを提供できます。Angularはエラーを捕捉したときにこの条件を評価します。

```angular-html
@boundary {
Expand All @@ -58,11 +58,11 @@ You can use `when` clauses to conditionally handle specific types of errors, all
}
```

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.
Angularは`when`句を順番に評価し、最初にtrueと評価されたものを使用するため、`@error`ブロックは条件が具体的なものから一般的なものの順に配置してください。`when`句のない最後の`@error`ブロックは、すべてのエラーを捕捉するフォールバックとして機能します。

## Global error handler integration
## グローバルエラーハンドラーの統合 {#global-error-handler-integration}

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.
バウンダリがエラーを捕捉した場合でも、Angularはグローバルな`ErrorHandler`に通知できます。カスタム`ErrorHandler`にオプションの`onViewError`フックを実装することで、捕捉されたこれらのエラーをエラー追跡サービスに記録できます。

```ts
@Injectable()
Expand All @@ -79,13 +79,13 @@ export class MyErrorHandler implements ErrorHandler {
}
```

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.
IMPORTANT: `@error`ブロック自体がエラーをスローした場合、そのエラーは1つ外側の`@boundary`に伝播します。外側に`@boundary`がなければ、Angularはそれを未処理のアプリケーションエラーとして扱います。

## Content projection
## コンテンツプロジェクション {#content-projection}

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.
コンポーネントが[コンテンツプロジェクション](guide/components/content-projection)を使用している場合、`<ng-content>`を`@boundary`でラップしても、投影されたコンテンツのエラーは捕捉されません。投影されたコンテンツが属するのは、受け取る側のコンポーネントのビューではなく、コンテンツを宣言した側のビューです。

For example, a wrapper component with the following template does not catch errors from components projected into it:
例えば、以下のテンプレートを持つラッパーコンポーネントは、そこに投影されたコンポーネントのエラーを捕捉しません。

```angular-html {avoid}
@boundary {
Expand All @@ -95,7 +95,7 @@ For example, a wrapper component with the following template does not catch erro
}
```

To catch those errors, wrap the wrapper component and its projected content in a `@boundary` in the parent template:
これらのエラーを捕捉するには、親テンプレートの`@boundary`でラッパーコンポーネントとその投影されたコンテンツをラップします。

```angular-html {prefer}
@boundary {
Expand All @@ -107,6 +107,6 @@ To catch those errors, wrap the wrapper component and its projected content in a
}
```

## Dynamic views and programmatic error handling
## 動的ビューとプログラムによるエラー処理 {#dynamic-views-and-programmatic-error-handling}

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.
エラー処理はテンプレート構文に限定されません。コンポーネントや埋め込みビューを動的に作成している場合は、`onError`オプションを使用してエラーを処理できます。詳細については、プログラムによるレンダリングガイドの[レンダリングエラーの処理](guide/components/programmatic-rendering#handling-rendering-errors)セクションを参照してください。
6 changes: 6 additions & 0 deletions prh.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ rules:
- expected: 双方向
pattern: 二方向

- expected: 開発者プレビュー
pattern: デベロッパープレビュー

- expected: 変更検知
pattern: 変更検出

Expand Down Expand Up @@ -110,6 +113,9 @@ rules:
- expected: ブラウザ
pattern: /ブラウザー/

- expected: バウンダリ
pattern: /バウンダリー/

- expected: サブスクライバー
pattern: /サブスクライバ(?!ー)/

Expand Down
Loading