ErrorBoundary support for multiple exceptions

[thirstyape]

Am I using this incorrectly? I implemented as per Documentation in MainLayout.razor with the slight change that in my <ErrorContent> section I added a button that triggers errorBoundary?.Recover();.

My test involved throwing a generic exception with a message from a child component in protected override void OnInitialized(). The result was that instead of displaying the content of @Body or the ErrorContent, there was nothing. Upon opening the browser inspector I had an empty <main></main>.

I also tried creating a custom class that implemented ErrorBoundary, but this did not help either.

Originally posted by @thirstyape in #30874 (comment)

[TanayParikh]

Does it work as expected if you throw the exception in OnParametersSet instead of OnInitialized? That's the event used in the docs and occurs after OnInitialized, so I wonder if this is an event ordering issue.

Hi @thirstyape. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[thirstyape]

Yes, it occurred in OnParametersSet as well. That was actually the first time I noticed this. I tested a basic scenario on Index.razor in its OnIntialized event and that worked as expected. Then I changed a different component from using OnIntialized to OnParametersSet which threw an exception (it should have). This caused the issue where there was nothing in the <main>. I then modified the event code to throw a generic exception instead of its normal actions, which caused the issue regardless of which event I used.

For reference, the component that is seeing issue is a Tab within a TabBar. A merge of the component tree has code similar to the following, I can provide more detailed samples if anything could use further investigation:

<MainLayout>
  <ErrorBoundary>
    <ChildContent>
       <UserPage>
          <TabBar>
            <Tab>
            </Tab>
            <Tab>
            </Tab>
          </TabBar>
       </UserPage>
    </ChildContent>
    <ErrorContent>
       <button @onclick="Reset">Reset Error</button>
    </ErrorContent>
  <ErrorBoundary>
</MainLayout>

The TabBar has <CascadingValue Value="this"> that contains the ChildContent for the Tab items. The Tab items add themselves to a collection in the TabBar in the event call.

[TanayParikh]

Could you please provide a minimal (using the base Blazor template with minimal additions) public github repro project to allow us to investigate further?

Hi @thirstyape. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[thirstyape]

Done, here is the repository.

Changes to default template:

• Add TabBar.razor and TabBar.razor.cs
• Add Tab.razor
• Update MainLayout.razor to include ErrorBoundary
• Update Index.razor to include TabBar
• Remove default error notice from index.html

Steps to reproduce:

1. Go into Tab.razor and change the OnInitialized to OnParametersSet
2. Run the app
3. Click the "Click me" text

This will produce some exceptions and the <article> will be empty. Interestingly, navigating to another component will correct the behavior and the Failed message appears.

Unexpected behavior:
I am not sure why, but when I started the app the Tab items did not appear. I needed to add the "Click me" tab directly in TabBar.razor and then click it to get the rest of the tabs to appear. After that they work as expected.

This is making me think the TabBar or Tab components may not be structured correctly.