ASP.NET Core Blazor uygulamalarında hataları işleme

içinde Blazor Web App, bileşenindeki deneyimi özelleştirin MainLayout . Ortam Etiketi Yardımcısı (örneğin, <environment include="Production">...</environment>) bileşenlerde Razor desteklenmediğinden, aşağıdaki örnek farklı ortamlar IHostEnvironment için hata iletilerini yapılandırmak üzere ekler.

üst kısmında MainLayout.razor:

@inject IHostEnvironment HostEnvironment

Hata kullanıcı arabirimi işaretlemesini Blazor oluşturun veya değiştirin:

<div id="blazor-error-ui" data-nosnippet>
    @if (HostEnvironment.IsProduction())
    {
        <span>An error has occurred.</span>
    }
    else
    {
        <span>An unhandled exception occurred.</span>
    }
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Bir Blazor Server uygulamada, dosyadaki deneyimi özelleştirin Pages/_Host.cshtml . Aşağıdaki örnek, farklı ortamlar için hata iletilerini yapılandırmak için Ortam Etiketi Yardımcısı'nı kullanır.

Bir Blazor Server uygulamada, dosyadaki deneyimi özelleştirin Pages/_Layout.cshtml . Aşağıdaki örnek, farklı ortamlar için hata iletilerini yapılandırmak için Ortam Etiketi Yardımcısı'nı kullanır.

Bir Blazor Server uygulamada, dosyadaki deneyimi özelleştirin Pages/_Host.cshtml . Aşağıdaki örnek, farklı ortamlar için hata iletilerini yapılandırmak için Ortam Etiketi Yardımcısı'nı kullanır.

Hata kullanıcı arabirimi işaretlemesini Blazor oluşturun veya değiştirin:

<div id="blazor-error-ui" data-nosnippet>
    <environment include="Staging,Production">
        An error has occurred.
    </environment>
    <environment include="Development">
        An unhandled exception occurred.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

blazor-error-ui öğesi, uygulamanın otomatik olarak oluşturulan stil sayfasında CSS sınıfının stilinin blazor-error-ui bulunması display: none nedeniyle normalde gizlenir. Bir hata oluştuğunda, çerçeve öğesine uygulanır display: block .

blazor-error-ui öğesi normalde sitenin klasördeki stil sayfasında CSS sınıfının stilinin blazor-error-ui bulunması display: none nedeniyle gizlenirwwwroot/css. Bir hata oluştuğunda, çerçeve öğesine uygulanır display: block .

Bu bölüm bir Blazor Web Appbağlantı hattı üzerinde çalışan için geçerlidir.

Bu bölüm uygulamalar için Blazor Server geçerlidir.

Bileşen sunucu tarafı işleme için Razor ayrıntılı hatalar

Bu bölüm s için Blazor Web Appgeçerlidir.

RazorComponentsServiceOptions.DetailedErrors Bileşen sunucu tarafı işleme hataları hakkında ayrıntılı bilgi oluşturmayı denetlemek için Razor seçeneğini kullanın. Varsayılan değer şudur: false.

Aşağıdaki örnek ayrıntılı hataları etkinleştirir:

builder.Services.AddRazorComponents(options => 
    options.DetailedErrors = builder.Environment.IsDevelopment());

Genel olarak özel durumları işleme yaklaşımları için aşağıdaki bölümlere bakın:

• Hata sınırları: Tüm Blazor uygulamalar için geçerlidir.
• Alternatif genel özel durum işleme: Genel etkileşimli işleme modunu benimseyen , Blazor WebAssemblyve Blazor Web Apps (8.0 veya üzeri) için Blazor Servergeçerlidir.

Hata sınırları

Hata sınırları , özel durumları işlemek için kullanışlı bir yaklaşım sağlar. Bileşen ErrorBoundary :

• Bir hata oluşmadığında alt içeriğini işler.
• Hata sınırındaki herhangi bir bileşen tarafından işlenmeyen bir özel durum oluştuğunda hata kullanıcı arabirimini işler.

Hata sınırı tanımlamak için, bir veya daha fazla bileşeni sarmak için bileşenini kullanın ErrorBoundary . Hata sınırı, sarmaladığı bileşenler tarafından oluşan işlenmeyen özel durumları yönetir.

<ErrorBoundary>
    ...
</ErrorBoundary>

Genel bir şekilde hata sınırı uygulamak için, uygulamanın ana düzeninin gövde içeriğinin çevresine sınırı ekleyin.

MainLayout.razor içinde:

<article class="content px-4">
    <ErrorBoundary>
        @Body
    </ErrorBoundary>
</article>

Hata sınırının yalnızca statik MainLayout bir bileşene uygulandığı s'deBlazor Web App, sınır yalnızca statik sunucu tarafı işleme (statik SSR) sırasında etkindir. Sınır, yalnızca bileşen hiyerarşisinin daha aşağısındaki bir bileşen etkileşimli olduğundan etkinleştirilmez.

Bileşenin MainLayout parametresi rastgele kod olan ve serileştirilemediği bir RenderFragment temsilci olduğundan, bileşene Body etkileşimli işleme modu uygulanamaz. Bileşenin MainLayout ve rest bileşenlerin bileşen hiyerarşisinin daha aşağısında etkileşime olanak tanımak için, uygulamanın genellikle App bileşen olan kök bileşenindeki ve Routes bileşen örneklerine HeadOutlet etkileşimli işleme modunu uygulayarak genel bir etkileşimli işleme modunu benimsemesi gerekir. Aşağıdaki örnek, Etkileşimli Sunucu (InteractiveServer) işleme modunu genel olarak benimser.

Components/App.razor içinde:

<HeadOutlet @rendermode="InteractiveServer" />

...

<Routes @rendermode="InteractiveServer" />

Genel etkileşimi etkinleştirmemek isterseniz hata sınırını bileşen hiyerarşisinin daha aşağısına yerleştirin. Akılda tutulması gereken önemli kavramlar, hata sınırının nereye yerleştirildiğidir:

• Hata sınırının yerleştirildiği bileşen etkileşimli değilse, hata sınırı yalnızca statik SSR sırasında sunucuda etkinleştirilebilme özelliğine sahiptir. Örneğin, bir bileşen yaşam döngüsü yönteminde hata oluştuğunda sınır etkinleştirilebilir, ancak düğme tıklama işleyicisi tarafından atılan bir hata gibi, bileşen içindeki kullanıcı etkileşimi tarafından tetiklenen bir olay için etkinleştirilebilir.
• Hata sınırının yerleştirildiği bileşen etkileşimliyse, hata sınırı kaydırdığı etkileşimli bileşenler için etkinleştirilebilme özelliğine sahiptir.

Ekli sayaç bileşeni tarafından oluşan bir özel durumun, etkileşimli işleme modunu benimseyen bileşendeki Home bir hata sınırı tarafından yakalandığı aşağıdaki örneği göz önünde bulundurun.

EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;

        if (currentCount > 5)
        {
            throw new InvalidOperationException("Current count is too big!");
        }
    }
}

Home.razor:

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<ErrorBoundary>
    <EmbeddedCounter />
</ErrorBoundary>

Katıştırılmış sayaç bileşeni tarafından oluşan bir özel durumun bileşendeki Home bir hata sınırı tarafından yakalandığı aşağıdaki örneği göz önünde bulundurun.

EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;

        if (currentCount > 5)
        {
            throw new InvalidOperationException("Current count is too big!");
        }
    }
}

Home.razor:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Home</h1>

<ErrorBoundary>
    <EmbeddedCounter />
</ErrorBoundary>

İşlenmeyen özel durum beşin üzerinde bir currentCount süre için oluşturulursa:

• Hata normal olarak günlüğe kaydedilir (System.InvalidOperationException: Current count is too big!).
• Özel durum hata sınırı tarafından işlenir.
• Varsayılan hata kullanıcı arabirimi hata sınırı tarafından işlenir.

Bileşen, ErrorBoundary hata içeriği için CSS sınıfını blazor-error-boundary kullanarak boş <div> bir öğeyi işler. Varsayılan kullanıcı arabiriminin renkleri, metni ve simgesi, uygulamanın klasördeki stil sayfasında wwwroot tanımlanır, bu nedenle hata kullanıcı arabirimini özelleştirebilirsiniz.

Varsayılan hata içeriğini değiştirmek için:

• özelliğindeki hata sınırının bileşenlerini sarmalar ChildContent .
• ErrorContent özelliğini hata içeriği olarak ayarlayın.

Aşağıdaki örnek bileşeni sarmalar EmbeddedCounter ve özel hata içeriği sağlar:

<ErrorBoundary>
    <ChildContent>
        <EmbeddedCounter />
    </ChildContent>
    <ErrorContent>
        <p class="errorUI">😈 A rotten gremlin got us. Sorry!</p>
    </ErrorContent>
</ErrorBoundary>

Yukarıdaki örnekte, uygulamanın stil sayfası büyük olasılıkla içeriği stillendirmek için bir errorUI CSS sınıfı içerir. Hata içeriği, blok düzeyi öğesi olmadan özelliğinden ErrorContent işlenir. Bölme () veya paragraf<p> (<div>) öğesi gibi blok düzeyinde bir öğe, hata içeriği işaretlemesini sarmalayabilir, ancak gerekli değildir.

İsteğe bağlı olarak, hata verilerini almak için bağlamını ErrorContent (@context) kullanın:

<ErrorContent>
    @context.HelpLink
</ErrorContent>

bağlamı ErrorContent da adlandırabilir. Aşağıdaki örnekte bağlam olarak adlandırılır exception:

<ErrorContent Context="exception">
    @exception.HelpLink
</ErrorContent>

Hata sınırı uygulamanın düzeninde tanımlanmışsa, hata oluştuktan sonra kullanıcının hangi sayfaya gidildiğine bakılmaksızın hata kullanıcı arabirimi görülür. Çoğu senaryoda hata sınırlarının kapsamını daraltmanızı öneririz. Bir hata sınırının kapsamını geniş kapsamlı olarak tanımlarsanız, hata sınırının Recover yöntemini çağırarak sonraki sayfa gezinti olaylarında hata olmayan bir duruma sıfırlayabilirsiniz.

MainLayout.razor içinde:

• öznitelik yönergesi ErrorBoundary ile @ref bir başvuru yakalamak için bir alan ekleyin.
• Yaşam döngüsü yöntemindeOnParameterSet, kullanıcı farklı bir bileşene gittiği zaman hatayı temizlemek için ile Recover hata sınırında bir kurtarma tetikleyebilirsiniz.

...

<ErrorBoundary @ref="errorBoundary">
    @Body
</ErrorBoundary>

...

@code {
    private ErrorBoundary? errorBoundary;

    protected override void OnParametersSet()
    {
        errorBoundary?.Recover();
    }
}

Kurtarma işleminin yalnızca hatayı yeniden oluşturan bir bileşeni yeniden oluşturduğu sonsuz döngüden kaçınmak için işleme mantığını çağırmayın Recover . Yalnızca şu durumlarda arama Recover :

• Kullanıcı, bir yordamı yeniden denemek istediğini veya kullanıcı yeni bir bileşene gittiği zaman düğme seçme gibi bir kullanıcı arabirimi hareketi gerçekleştirir.
• Yürütülen ek mantık da özel durumu temizler. Bileşen yeniden başlatıldığında hata yinelenmez.

Aşağıdaki örnek, kullanıcının bir düğmeyle özel durumdan kurtarmasına izin verir:

<ErrorBoundary @ref="errorBoundary">
    <ChildContent>
        <EmbeddedCounter />
    </ChildContent>
    <ErrorContent>
        <div class="alert alert-danger" role="alert">
            <p class="fs-3 fw-bold">😈 A rotten gremlin got us. Sorry!</p>
            <p>@context.HelpLink</p>
            <button class="btn btn-info" @onclick="_ => errorBoundary?.Recover()">
                Clear
            </button>
        </div>
    </ErrorContent>
</ErrorBoundary>

@code {
    private ErrorBoundary? errorBoundary;
}

Ayrıca geçersiz kılarak OnErrorAsyncözel işleme için alt sınıf ErrorBoundary oluşturabilirsiniz. Aşağıdaki örnek yalnızca hatayı günlüğe kaydeder, ancak istediğiniz hata işleme kodunu uygulayabilirsiniz. Kodunuz zaman uyumsuz bir CompletedTask görev bekliyorsa döndüren satırı kaldırabilirsiniz.

CustomErrorBoundary.razor:

@inherits ErrorBoundary
@inject ILogger<CustomErrorBoundary> Logger

@if (CurrentException is null)
{
    @ChildContent
}
else if (ErrorContent is not null)
{
    @ErrorContent(CurrentException)
}

@code {
    protected override Task OnErrorAsync(Exception ex)
    {
        Logger.LogError(ex, "😈 A rotten gremlin got us. Sorry!");
        return Task.CompletedTask;
    }
}

Yukarıdaki örnek bir sınıf olarak da uygulanabilir.

CustomErrorBoundary.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

namespace BlazorSample;

public class CustomErrorBoundary : ErrorBoundary
{
    [Inject]
    ILogger<CustomErrorBoundary> Logger {  get; set; } = default!;

    protected override Task OnErrorAsync(Exception ex)
    {
        Logger.LogError(ex, "😈 A rotten gremlin got us. Sorry!");
        return Task.CompletedTask;
    }
}

Bir bileşende kullanılan önceki uygulamalardan biri:

<CustomErrorBoundary>
    ...
</CustomErrorBoundary>

Alternatif genel özel durum işleme

Bu bölümde açıklanan yaklaşım, genel etkileşimli işleme modunu (, veya ) benimseyen , Blazor WebAssemblyve Blazor Web Apps için geçerlidirBlazor Server.InteractiveAutoInteractiveWebAssemblyInteractiveServer Yaklaşım, işleme modu sınırları boyunca veya statik SSR'yi benimseyen bileşenlerle çalışmayan bir CascadingValue/CascadingParameteröğesine bağlı olduğundan, yaklaşım sayfa başına/bileşen işleme modlarını veya statik sunucu tarafı işlemeyi (statik SSR) benimseyenlerle çalışmaz.Blazor Web App

Hata sınırlarını (ErrorBoundary) kullanmanın bir alternatifi, özel bir hata bileşenini alt bileşenlere geçirmektir.CascadingValue Eklenen hizmeti veya özel günlükçü uygulamasını kullanmak yerine bir bileşeni kullanmanın avantajlarından biri, basamaklı bir bileşenin bir hata oluştuğunda içeriği işleyip CSS stilleri uygulayabilmesidir.

Aşağıdaki ProcessError bileşen örneği yalnızca hataları günlüğe kaydeder, ancak bileşenin yöntemleri, birden çok hata işleme yönteminin kullanılması da dahil olmak üzere uygulama tarafından gerekli olan herhangi bir şekilde hataları işleyebilir.

ProcessError.razor:

@inject ILogger<ProcessError> Logger

<CascadingValue Value="this">
    @ChildContent
</CascadingValue>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public void LogError(Exception ex)
    {
        Logger.LogError("ProcessError.LogError: {Type} Message: {Message}", 
            ex.GetType(), ex.Message);

        // Call StateHasChanged if LogError directly participates in 
        // rendering. If LogError only logs or records the error,
        // there's no need to call StateHasChanged.
        //StateHasChanged();
    }
}

bu yaklaşımı bir Blazor Web Appiçinde kullanırken, bileşeni açın Routes ve bileşeni (<Router>...</Router>) bileşenle sarmalar Router ProcessError. Bu, bileşenin, bileşenin ProcessError olarak alındığı uygulamanın herhangi bir CascadingParameterbileşenine art arda inmesine ProcessError izin verir.

Routes.razor içinde:

<ProcessError>
    <Router ...>
        ...
    </Router>
</ProcessError>

Bir veya uygulamasında bu yaklaşımı Blazor Server kullanırken, bileşeni açınApp, bileşeni (<Router>...</Router>) bileşenle sarmalar Router ProcessError.Blazor WebAssembly Bu, bileşenin, bileşenin ProcessError olarak alındığı uygulamanın herhangi bir CascadingParameterbileşenine art arda inmesine ProcessError izin verir.

App.razor içinde:

<ProcessError>
    <Router ...>
        ...
    </Router>
</ProcessError>

Bir bileşendeki hataları işlemek için:

• Bileşeni blokta @code olarak CascadingParameter belirleyinProcessError. Proje şablonunu temel alan Blazor bir uygulamadaki örnek Counter bileşene aşağıdaki ProcessError özelliği ekleyin:

  [CascadingParameter]
  public ProcessError? ProcessError { get; set; }
  

• Uygun bir özel durum türüne sahip herhangi bir catch blokta hata işleme yöntemini çağır. Örnek ProcessError bileşen yalnızca tek LogError bir yöntem sunar, ancak hata işleme bileşeni uygulama genelinde alternatif hata işleme gereksinimlerini karşılamak için herhangi bir sayıda hata işleme yöntemi sağlayabilir. Aşağıdaki Counter bileşen @code bloğu örneği basamaklı parametresini ProcessError içerir ve sayı beşten büyük olduğunda günlüğe kaydetme için bir özel durum yakalar:

  @code {
      private int currentCount = 0;
  
      [CascadingParameter]
      public ProcessError? ProcessError { get; set; }
  
      private void IncrementCount()
      {
          try
          {
              currentCount++;
  
              if (currentCount > 5)
              {
                  throw new InvalidOperationException("Current count is over five!");
              }
          }
          catch (Exception ex)
          {
              ProcessError?.LogError(ex);
          }
      }
  }
  

Günlüğe kaydedilen hata:

fail: {COMPONENT NAMESPACE}.ProcessError[0]
ProcessError.LogError: System.InvalidOperationException Message: Current count is over five!

LogError Yöntem, özel bir hata iletisi çubuğu gösterme veya işlenen öğelerin CSS stillerini değiştirme gibi işlemeye doğrudan katılıyorsa, kullanıcı arabirimini yeniden oluşturmak için yöntemin LogError sonunda çağrısı StateHasChanged yapın.

Bu bölümdeki yaklaşımlar bir try-catch deyimle ilgili hataları işlediğinden, bir hata oluştuğunda ve bağlantı hattı canlı kaldığında uygulamanın SignalR istemci ve sunucu arasındaki bağlantısı kopmuyor. İşlenmeyen diğer özel durumlar bir bağlantı hattı için önemli olmaya devam eder. Daha fazla bilgi için, devrenin işlenmeyen özel durumlara nasıl tepki vermesine ilişkin bölüme bakın.

Uygulama, hataları merkezi bir şekilde işlemek için bir hata işleme bileşenini basamaklı değer olarak kullanabilir.

Aşağıdaki ProcessError bileşen kendisini alt bileşenlere geçirir CascadingValue . Aşağıdaki örnek yalnızca hatayı günlüğe kaydeder, ancak bileşenin yöntemleri, birden çok hata işleme yönteminin kullanılması da dahil olmak üzere uygulamanın gerektirdiği herhangi bir şekilde hataları işleyebilir. Eklenen hizmeti veya özel günlükçü uygulamasını kullanmak yerine bir bileşeni kullanmanın avantajlarından biri, basamaklı bir bileşenin bir hata oluştuğunda içeriği işleyip CSS stilleri uygulayabilmesidir.

ProcessError.razor:

@using Microsoft.Extensions.Logging
@inject ILogger<ProcessError> Logger

<CascadingValue Value="this">
    @ChildContent
</CascadingValue>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public void LogError(Exception ex)
    {
        Logger.LogError("ProcessError.LogError: {Type} Message: {Message}", 
            ex.GetType(), ex.Message);
    }
}

BileşendeApp, bileşeni bileşenle birlikte sarmalar ProcessError Router. Bu, bileşenin, bileşenin ProcessError olarak alındığı uygulamanın herhangi bir CascadingParameterbileşenine art arda inmesine ProcessError izin verir.

App.razor:

<ProcessError>
    <Router ...>
        ...
    </Router>
</ProcessError>

Bir bileşendeki hataları işlemek için:

• ProcessError Bileşeni bloğunda @code olarak CascadingParameter belirleyin:

  [CascadingParameter]
  public ProcessError ProcessError { get; set; }
  

• Uygun bir özel durum türüne sahip herhangi bir catch blokta hata işleme yöntemini çağır. Örnek ProcessError bileşen yalnızca tek LogError bir yöntem sunar, ancak hata işleme bileşeni uygulama genelinde alternatif hata işleme gereksinimlerini karşılamak için herhangi bir sayıda hata işleme yöntemi sağlayabilir.

  try
  {
      ...
  }
  catch (Exception ex)
  {
      ProcessError.LogError(ex);
  }
  

Yukarıdaki örnek ProcessError bileşeni ve LogError yöntemi kullanarak tarayıcının geliştirici araçları konsolu kapana kısılmış, günlüğe kaydedilen hatayı gösterir:

fail: {COMPONENT NAMESPACE}.Shared.ProcessError[0]
ProcessError.LogError: System.NullReferenceException Message: Object reference not set to an instance of an object.

LogError Yöntem, özel bir hata iletisi çubuğu gösterme veya işlenen öğelerin CSS stillerini değiştirme gibi işlemeye doğrudan katılıyorsa, kullanıcı arabirimini yeniden oluşturmak için yöntemin LogError sonunda çağrısı StateHasChanged yapın.

Bu bölümdeki yaklaşımlar bir try-catch deyimle ilgili hataları işlediğinden, bir Blazor hata oluştuğunda ve bağlantı hattı canlı kaldığında uygulamanın SignalR istemci ile sunucu arasındaki bağlantısı kopmuyor. İşlenmeyen özel durumlar bir bağlantı hattı için önemlidir. Daha fazla bilgi için, devrenin işlenmeyen özel durumlara nasıl tepki vermesine ilişkin bölüme bakın.

İşlenmeyen bir özel durum oluşursa, özel durum hizmet kapsayıcısında yapılandırılan örneklere ILogger kaydedilir. Blazor uygulamalar, Konsol Günlüğü Sağlayıcısı ile konsol çıkışını günlüğe kaydeder. Günlük boyutunu ve günlük döndürmeyi yöneten bir sağlayıcıyla sunucudaki bir konuma (veya istemci tarafı uygulamalar için arka uç web API'sine) günlük kaydı yapmayı göz önünde bulundurun. Alternatif olarak, uygulama Azure Uygulaması lication Insights (Azure İzleyici) gibi bir Uygulama Performansı Yönetimi (APM) hizmeti kullanabilir.

Bir bağlantı hattı üzerinden çalışan bir Blazor uygulamada geliştirme sırasında uygulama genellikle hata ayıklamaya yardımcı olmak için özel durumların tüm ayrıntılarını tarayıcının konsoluna gönderir. Üretimde, ayrıntılı hatalar istemcilere gönderilmez, ancak özel durumun tüm ayrıntıları sunucuda günlüğe kaydedilir.

Hangi olayların günlüğe kaydedileceğine ve günlüğe kaydedilen olayların önem düzeyine karar vermeniz gerekir. Saldırgan kullanıcılar hataları kasıtlı olarak tetikleyebilir. Örneğin, ürün ayrıntılarını görüntüleyen bir bileşenin URL'sinde bilinmeyen ProductId bir hatanın bulunduğu bir hatayı günlüğe kaydetmeyin. Tüm hatalar günlüğe kaydetme olayı olarak değerlendirilmemelidir.

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

• ASP.NET Core Blazor günlüğü
• ASP.NET Core'daki hataları işleme‡
• ASP.NET Core ile web API'leri oluşturma

‡için web API arka uç uygulamaları olan sunucu tarafı Blazor uygulamalar ve diğer sunucu tarafı ASP.NET Core uygulamaları için Blazorgeçerlidir. İstemci tarafı uygulamaları, istemcideki hata bilgilerini yakalayıp bir web API'sine gönderebilir ve bu da hata bilgilerini kalıcı bir günlük sağlayıcısına günlüğe kaydeder.

İşlenmeyen bir özel durum oluşursa, özel durum hizmet kapsayıcısında yapılandırılan örneklere ILogger kaydedilir. Blazor uygulamalar, Konsol Günlüğü Sağlayıcısı ile konsol çıkışını günlüğe kaydeder. Günlük boyutu yönetimi ve günlük döndürmesi olan bir günlük sağlayıcısı kullanan bir arka uç web API'sine hata bilgileri göndererek sunucuda daha kalıcı bir konuma oturum açmayı göz önünde bulundurun. Alternatif olarak, arka uç web API'si uygulaması istemcilerden aldığı hata bilgilerini kaydetmek için Azure Uygulaması lication Insights (Azure İzleyici)† gibi bir Uygulama Performansı Yönetimi (APM) hizmetini kullanabilir.

Hangi olayların günlüğe kaydedileceğine ve günlüğe kaydedilen olayların önem düzeyine karar vermeniz gerekir. Saldırgan kullanıcılar hataları kasıtlı olarak tetikleyebilir. Örneğin, ürün ayrıntılarını görüntüleyen bir bileşenin URL'sinde bilinmeyen ProductId bir hatanın bulunduğu bir hatayı günlüğe kaydetmeyin. Tüm hatalar günlüğe kaydetme olayı olarak değerlendirilmemelidir.

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

• ASP.NET Core Blazor günlüğü
• ASP.NET Core'daki hataları işleme‡
• ASP.NET Core ile web API'leri oluşturma

†İstek tarafı uygulamaları ve Google Analytics için yerel Blazor çerçeve desteğini desteklemek için †Native Application Insights özellikleri, bu teknolojilerin gelecek sürümlerinde kullanılabilir hale gelebilir. Daha fazla bilgi için bkz . WASM İstemci Tarafında App Insights Blazor Desteği (microsoft/ApplicationInsights-dotnet #2143) ve Web analizi ve tanılama (topluluk uygulamalarına bağlantılar içerir) (dotnet/aspnetcore #5461). Bu arada, istemci tarafı bir uygulama, hataları doğrudan istemci tarafı uygulamasından Application Insights'a günlüğe kaydetmek için birlikte çalışma ile JS Application Insights JavaScript SDK'sını kullanabilir.

‡Uygulamalar için web API arka uç uygulamaları olan sunucu tarafı ASP.NET Core uygulamaları için Blazor geçerlidir. İstemci tarafı uygulamalar yakalanıp hata bilgilerini bir web API'sine gönderir ve hata bilgilerini kalıcı bir günlük sağlayıcısına kaydeder.

• Bileşen örneği oluşturma
• Yaşam döngüsü yöntemleri
• İşleme mantığı
• Olay işleyicileri
• Bileşen elden çıkarma
• JavaScript birlikte çalışma
• Ön Kayıt

• Bileşen örneği oluşturma
• Yaşam döngüsü yöntemleri
• İşleme mantığı
• Olay işleyicileri
• Bileşen elden çıkarma
• JavaScript birlikte çalışma
• Ön Kayıt

@page "/product-details/{ProductId:int?}"
@inject ILogger<ProductDetails> Logger
@inject IProductRepository Product

<PageTitle>Product Details</PageTitle>

<h1>Product Details Example</h1>

@if (details != null)
{
    <h2>@details.ProductName</h2>
    <p>
        @details.Description
        <a href="@details.Url">Company Link</a>
    </p>
    
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail? details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await Product.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string? ProductName { get; set; }
        public string? Description { get; set; }
        public string? Url { get; set; }
    }

    /*
    * Register the service in Program.cs:
    * using static BlazorSample.Components.Pages.ProductDetails;
    * builder.Services.AddScoped<IProductRepository, ProductRepository>();
    */

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }

    public class ProductRepository : IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id)
        {
            return Task.FromResult(
                new ProductDetail()
                {
                    ProductName = "Flowbee ",
                    Description = "The Revolutionary Haircutting System You've Come to Love!",
                    Url = "https://flowbee.com/"
                });
        }
    }
}

@page "/product-details/{ProductId:int?}"
@inject ILogger<ProductDetails> Logger
@inject IProductRepository Product

<PageTitle>Product Details</PageTitle>

<h1>Product Details Example</h1>

@if (details != null)
{
    <h2>@details.ProductName</h2>
    <p>
        @details.Description
        <a href="@details.Url">Company Link</a>
    </p>
    
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail? details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await Product.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string? ProductName { get; set; }
        public string? Description { get; set; }
        public string? Url { get; set; }
    }

    /*
    * Register the service in Program.cs:
    * using static BlazorSample.Components.Pages.ProductDetails;
    * builder.Services.AddScoped<IProductRepository, ProductRepository>();
    */

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }

    public class ProductRepository : IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id)
        {
            return Task.FromResult(
                new ProductDetail()
                {
                    ProductName = "Flowbee ",
                    Description = "The Revolutionary Haircutting System You've Come to Love!",
                    Url = "https://flowbee.com/"
                });
        }
    }
}

@page "/product-details/{ProductId:int}"
@using Microsoft.Extensions.Logging
@inject ILogger<ProductDetails> Logger
@inject IProductRepository ProductRepository

@if (details != null)
{
    <h1>@details.ProductName</h1>
    <p>@details.Description</p>
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail? details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await ProductRepository.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string? ProductName { get; set; }
        public string? Description { get; set; }
    }

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }
}

@page "/product-details/{ProductId:int}"
@using Microsoft.Extensions.Logging
@inject ILogger<ProductDetails> Logger
@inject IProductRepository ProductRepository

@if (details != null)
{
    <h1>@details.ProductName</h1>
    <p>@details.Description</p>
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail? details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await ProductRepository.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string? ProductName { get; set; }
        public string? Description { get; set; }
    }

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }
}

@page "/product-details/{ProductId:int}"
@using Microsoft.Extensions.Logging
@inject ILogger<ProductDetails> Logger
@inject IProductRepository ProductRepository

@if (details != null)
{
    <h1>@details.ProductName</h1>
    <p>@details.Description</p>
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await ProductRepository.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string ProductName { get; set; }
        public string Description { get; set; }
    }

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }
}

@page "/product-details/{ProductId:int}"
@using Microsoft.Extensions.Logging
@inject ILogger<ProductDetails> Logger
@inject IProductRepository ProductRepository

@if (details != null)
{
    <h1>@details.ProductName</h1>
    <p>@details.Description</p>
}
else if (loadFailed)
{
    <h1>Sorry, we could not load this product due to an error.</h1>
}
else
{
    <h1>Loading...</h1>
}

@code {
    private ProductDetail details;
    private bool loadFailed;

    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        try
        {
            loadFailed = false;

            // Reset details to null to display the loading indicator
            details = null;

            details = await ProductRepository.GetProductByIdAsync(ProductId);
        }
        catch (Exception ex)
        {
            loadFailed = true;
            Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
        }
    }

    public class ProductDetail
    {
        public string ProductName { get; set; }
        public string Description { get; set; }
    }

    public interface IProductRepository
    {
        public Task<ProductDetail> GetProductByIdAsync(int id);
    }
}

Ön Kayıt

Razor bileşenleri varsayılan olarak önceden oluşturulur, böylece işlenen HTML işaretlemeleri kullanıcının ilk HTTP isteğinin bir parçası olarak döndürülür.

Devre üzerinden çalışan bir Blazor uygulamada, ön kayıt şu şekilde çalışır:

• Aynı sayfanın parçası olan önceden oluşturulmuş tüm bileşenler için yeni bir bağlantı hattı oluşturma.
• İlk HTML oluşturuluyor.
• Kullanıcının tarayıcısı aynı sunucuya yeniden bağlantı kurana SignalR kadar bağlantı hattını olarak disconnected ele alır. Bağlantı kurulduğunda, bağlantı hattındaki etkileşim sürdürülür ve bileşenlerin HTML işaretlemesi güncelleştirilir.

Önceden oluşturulmuş istemci tarafı bileşenleri için, ön kayıt şu şekilde çalışır:

• Aynı sayfanın parçası olan önceden oluşturulmuş tüm bileşenler için sunucuda ilk HTML oluşturuluyor.
• Tarayıcı, uygulamanın derlenmiş kodunu ve .NET çalışma zamanını (henüz yüklenmemişse) arka plana yükledikten sonra bileşeni istemcide etkileşimli hale getirme.

Bir bileşen, örneğin bir yaşam döngüsü yöntemi veya işleme mantığı sırasında ön kayıt sırasında işlenmeyen bir özel durum oluşturursa:

• Bir bağlantı hattı üzerinde çalışan bir Blazor uygulamada, özel durum devre için önemlidir. Önceden oluşturulmuş istemci tarafı bileşenleri için özel durum, bileşenin işlenmesini engeller.
• Özel durum çağrısı yığınından ComponentTagHelperoluşturulur.

Prerendering başarısız olduğunda normal koşullarda, çalışan bir bileşen işlenemediğinden bileşeni derlemeye ve işlemeye devam etmek mantıklı değildir.

Ön kayıt sırasında oluşabilecek hataları tolere etmek için hata işleme mantığı özel durumlar oluşturabilecek bir bileşenin içine yerleştirilmelidir. Hata işleme ve günlüğe kaydetme ile deyimleri kullanın try-catch . deyimini ComponentTagHelper sarmalamak try-catch yerine hata işleme mantığını tarafından işlenen bileşene ComponentTagHelperyerleştirin.

• Bir bileşenin Razor yaşam döngüsü dışında yakalanan özel durumları işleme
• ASP.NET Core Blazor günlüğü
• ASP.NET Core'daki hataları işleme†
• ASP.NET Core ile web API'leri oluşturma
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)

• ASP.NET Core Blazor günlüğü
• ASP.NET Core'daki hataları işleme†
• ASP.NET Core ile web API'leri oluşturma
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)