Open Closed

Disable UI during Javascript processing #867


User avatar
0
ihugo created

ABP Framework version: v4.0.2 **UI type: **MVC **DB provider: **EF Core Tiered (MVC) or Identity Server Seperated (Angular): yes

I have a dashboard in my solution which has a number of sections which all load asynchronously. Some of the processes load slower than others. My UI has a bunch of buttons across the top which control the bottom half of the screen. I would like to disable all actions on the screen until all the various asynchronous processes complete. At the moment, when clicking around quickly and not waiting until all sections have completed their load, we receive a javascript error.


6 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Can you check the error requests in the browser and backend error logs?

    I guess it might be an error that the request was aborted.

  • User Avatar
    0
    ihugo created

    It is indeed.

    I have each of the layers running in their own docker container (linux). The exception stack trace is below. Is there a way I can do an abp.ui.setBusy and then clearBusy when the final async call returns?

    {
      "Depth": 0,
      "ClassName": "System.Threading.Tasks.TaskCanceledException",
      "Message": "A task was canceled.",
      "Source": "System.Private.CoreLib",
      "StackTraceString": "   at Microsoft.EntityFrameworkCore.Storage.RelationalConnection.OpenInternalAsync(Boolean errorsExpected, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.Storage.RelationalConnection.OpenInternalAsync(Boolean errorsExpected, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.Storage.RelationalConnection.OpenAsync(CancellationToken cancellationToken, Boolean errorsExpected)\n   at Microsoft.EntityFrameworkCore.Storage.RelationalCommand.ExecuteReaderAsync(RelationalCommandParameterObject parameterObject, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.Query.Internal.SplitQueryingEnumerable`1.AsyncEnumerator.InitializeReaderAsync(DbContext _, Boolean result, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.SqlServer.Storage.Internal.SqlServerExecutionStrategy.ExecuteAsync[TState,TResult](TState state, Func`4 operation, Func`4 verifySucceeded, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.Query.Internal.SplitQueryingEnumerable`1.AsyncEnumerator.MoveNextAsync()\n   at Microsoft.EntityFrameworkCore.Query.ShapedQueryCompilingExpressionVisitor.SingleOrDefaultAsync[TSource](IAsyncEnumerable`1 asyncEnumerable, CancellationToken cancellationToken)\n   at Microsoft.EntityFrameworkCore.Query.ShapedQueryCompilingExpressionVisitor.SingleOrDefaultAsync[TSource](IAsyncEnumerable`1 asyncEnumerable, CancellationToken cancellationToken)\n   at Volo.Abp.Domain.Repositories.EntityFrameworkCore.EfCoreRepository`3.FindAsync(TKey id, Boolean includeDetails, CancellationToken cancellationToken)\n   at Castle.DynamicProxy.AsyncInterceptorBase.ProceedAsynchronous[TResult](IInvocation invocation, IInvocationProceedInfo proceedInfo)\n   at Volo.Abp.Castle.DynamicProxy.CastleAbpMethodInvocationAdapterWithReturnValue`1.ProceedAsync()\n   at Volo.Abp.Uow.UnitOfWorkInterceptor.InterceptAsync(IAbpMethodInvocation invocation)\n   at Volo.Abp.Castle.DynamicProxy.CastleAsyncAbpInterceptorAdapter`1.InterceptAsync[TResult](IInvocation invocation, IInvocationProceedInfo proceedInfo, Func`3 proceed)\n   at Volo.Saas.Tenants.TenantStore.FindAsync(Guid id)\n   at Volo.Abp.MultiTenancy.TenantConfigurationProvider.FindTenantAsync(String tenantIdOrName)\n   at Volo.Abp.MultiTenancy.TenantConfigurationProvider.GetAsync(Boolean saveResolveResult)\n   at Volo.Abp.AspNetCore.MultiTenancy.MultiTenancyMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)\n   at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()\n--- End of stack trace from previous location ---\n   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)\n   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.<Invoke>g__Awaited|6_0(ExceptionHandlerMiddleware middleware, HttpContext context, Task task)\n   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.HandleException(HttpContext context, ExceptionDispatchInfo edi)\n   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.<Invoke>g__Awaited|6_0(ExceptionHandlerMiddleware middleware, HttpContext context, Task task)\n   at Microsoft.AspNetCore.Diagnostics.StatusCodePagesMiddleware.Invoke(HttpContext context)\n   at Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)\n   at Microsoft.AspNetCore.RequestLocalization.AbpRequestLocalizationMiddleware.InvokeAsync(HttpContext context, RequestDelegate next)\n   at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()\n--- End of stack trace from previous location ---\n   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)",
      "RemoteStackTraceString": null,
      "RemoteStackIndex": 0,
      "HResult": -2146233029,
      "HelpURL": null
    }
    
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    This is expected. Because we used HttpContext.RequestAborted.

    This exception will appear on the backend after the front-end application cancels the request.

    https://andrewlock.net/using-cancellationtokens-in-asp-net-core-mvc-controllers/

    eg:

  • User Avatar
    0
    ihugo created

    Ok, understood...but is it possible to have the UI blocked until all async ajax requests complete?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    I don't know your specific code, maybe you can trigger an event after each component is loaded, and unblock the UI when all events are triggered.

  • User Avatar
    0
    ServiceBot created
    Support Team Automatic process manager

    This question has been automatically marked as stale because it has not had recent activity.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11