Skip to content

Commit c4ada76

Browse files
authored
Error boundary updates 8.0 (#30128)
1 parent 3d61a0c commit c4ada76

File tree

1 file changed

+29
-17
lines changed

1 file changed

+29
-17
lines changed

aspnetcore/blazor/fundamentals/handle-errors.md

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,15 @@ For global exception handling, see the following sections:
341341
* Renders its child content when an error hasn't occurred.
342342
* Renders error UI when an unhandled exception is thrown.
343343

344-
To define an error boundary, use the <xref:Microsoft.AspNetCore.Components.Web.ErrorBoundary> component to wrap existing content. For example, an error boundary can be added around the body content of the app's main layout.
344+
To define an error boundary, use the <xref:Microsoft.AspNetCore.Components.Web.ErrorBoundary> component to wrap existing content. The app continues to function normally, but the error boundary handles unhandled exceptions.
345+
346+
```razor
347+
<ErrorBoundary>
348+
...
349+
</ErrorBoundary>
350+
```
351+
352+
To implement an error boundary in a global fashion, add the boundary around the body content of the app's main layout.
345353

346354
In `MainLayout.razor`:
347355

@@ -353,7 +361,26 @@ In `MainLayout.razor`:
353361
</article>
354362
```
355363

356-
The app continues to function normally, but the error boundary handles unhandled exceptions.
364+
:::moniker-end
365+
366+
:::moniker range=">= aspnetcore-8.0"
367+
368+
<!-- UPDATE 8.0 Cross-link SSR -->
369+
370+
In Blazor Web Apps with the error boundary only applied to a noninteractive `MainLayout` component, the boundary is only active during the server-side static rendering phase. The boundary doesn't activate just because a component further down the component hierarchy is interactive. To enable interactivity broadly for the `MainLayout` component and the rest of the components further down the component hierarchy, enable server-side rendering (SSR) at the top of the `Routes` component (`Components/Routes.razor`):
371+
372+
```razor
373+
@attribute [RenderModeServer]
374+
```
375+
376+
If you prefer not to enable server interactivity across the entire app from the `Routes` component, place the error boundary further down the component hierarchy. For example, place the error boundary around markup in individual components that enable interactivity, not in the app's main layout. The important concepts to keep in mind are that wherever the error boundary is placed:
377+
378+
* If the error boundary isn't interactive, it's only capable of activating on the server during static rendering. For example, the boundary can activate when an error is thrown in a component lifecycle method.
379+
* If the error boundary is interactive, it's capable of activating for both server-side rendering and for interactive components that it wraps.
380+
381+
:::moniker-end
382+
383+
:::moniker range=">= aspnetcore-6.0"
357384

358385
Consider the following example, where the `Counter` component throws an exception if the count increments past five.
359386

@@ -429,24 +456,9 @@ An alternative to using [Error boundaries](#error-boundaries) (<xref:Microsoft.A
429456

430457
The following `Error` component example merely logs errors, but methods of the component can process errors in any way required by the app, including through the use of multiple error processing methods.
431458

432-
:::moniker-end
433-
434-
:::moniker range=">= aspnetcore-8.0"
435-
436-
`Components/Error.razor`:
437-
438-
:::moniker-end
439-
440-
:::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0"
441-
442459
`Error.razor`:
443460

444-
:::moniker-end
445-
446-
:::moniker range=">= aspnetcore-6.0"
447-
448461
```razor
449-
@using Microsoft.Extensions.Logging
450462
@inject ILogger<Error> Logger
451463
452464
<CascadingValue Value="this">

0 commit comments

Comments
 (0)