1. Home
  2. Forum
  3. Blazor
  4. Console error reports when user routes before current page completely rendered

Console error reports when user routes before current page completely rendered

Hi team,

Maybe it's not a problem of Synfusion, but I still hope you can guide me to resolve similar issues. The problem is that, as my project and pages grow, recently I found that routing between my pages would occasionally cause console error (as the video shows). This always happens at the time I route to new page without waiting for the current one being totally rendered. But in real business scenes, it happens. We can't count on users to wait for a complete render after they have changed their mind. One the other hand, I have to admit that Blazor pages render really slow at nowadays stage, compared to javascript SPA. I have one dozen input components on a single page of my project, and I can see them rendering one by one in about two seconds long. This latency lead users behave before renders done.

So I have some expectations. 
1.Could you provide some tips to improve the rendering speed?
2.Could you provide a page-top progress bar, just like the one on your document pages, to show the loading state and keep static until everything is ready to leave?
3.Could you provide a way to make sure switching between half rendered pages make no fatal console errors?

Thank you so much.

You can find the video in attachment. If an user click this way, I would be mad, but I should think out a way to deal with this situation elegantly, shouldn't I?

Attachment: RouteBeforeCompletelyRendered_6f50c2c1.rar

11 Replies 1 reply marked as answer
SU Sridurgha Uthayakumaran Syncfusion Team July 22, 2020 01:37 PM UTC

Hi Brian, 
 
Sorry for the delay in getting back to you. 
 
Query 1: Could you provide some tips to improve the rendering speed? 
 
We would suggest to use gzip compressed css/js files in your application to improve the rendering speed. Please refer the below documentation for further details. 
 
 
Query 2: Could you provide a page-top progress bar, just like the one on your document pages, to show the loading state and keep static until everything is ready to leave? 
 
We have analyzed your query. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below.  
   
   
Screenshot:  
  
 
Query 3: Could you provide a way to make sure switching between half rendered pages make no fatal console errors? 
 
We are checking with component team about the console errors. We will update further details on this in two business days. 
 
Please let us know if you have any concerns. 
 
Regards, 
Sridurgha U 
 
 


BR Brian July 23, 2020 07:16 AM UTC

Thanks, I will wait for the possible solution for Query 3. However, maybe you have misunderstood my Query 2. I need a solution to keep page never jump (due to users click routing) before itself totally rendered, which will cause console error shown in my video. What I need is not to provide a loading mask during page initialization. It's difference scenarios. You can refer to you official Document page, during page switching, there will be a progress bar running at the top of current page, and the page will not turn away until the exchanging page totally loaded. It's a nice user experience and will prevent any routing error.

SU Sridurgha Uthayakumaran Syncfusion Team July 28, 2020 02:23 PM UTC

Hi Brian, 
 
Sorry or the delay in getting back. 
 
Currently, we are validating on your requirement. We will update further details in two business days until then we appreciate your patience. 
 
And we are able to reproduce the errors in the console. We have confirmed and logged a task for the same. The fix for this issue will be available in any of our upcoming release.  
  
Please let us know if you have any concerns. 
  
Regards,   
Sridurgha U 
 


BR Brian July 29, 2020 12:47 AM UTC

Glad to know that, thanks.


SU Sridurgha Uthayakumaran Syncfusion Team August 17, 2020 09:08 AM UTC

Hi Brian, 
 
Sorry for the delay. 
 
We have created a custom sample in which during page switching, we have placed a progress bar running at the top of current page, and the page will not turn away until the exchanging pages are totally loaded as per your requirement and the same can be downloaded from the below link. 
 
 
Also, we have resolved the reported Console error while switching to a new page without waiting for the current one being totally rendered and the fix for the issue is included in the latest patch. 
 
Could you please look into the above provided custom sample and let us know with more details if your requirements are not fulfilled or if you need any further assistance.  
 
Please let us know if you have any concerns. 
 
Regards, 
Sridurgha U  


Marked as answer
BR Brian August 18, 2020 12:56 AM UTC

That's brilliant. I have learned the sample. Thank you so much.

JA Jesus Arockia Sankaran S Syncfusion Team August 18, 2020 05:10 PM UTC

Hi Brain, 
 
We are glad that the given solution is solved your problem.  
 
Please get back to us if you need any further assistance. 
 
Regards, 
Jesus Arockia Sankaran S 


BR Brian August 19, 2020 07:20 AM UTC

I have updated the sample to v18.2.0.54 and built it. the progress bar is fantastic, but unfortunately the console error still exists. I show that in the attached video.

Attachment: RouteConsoleError_d61a407e.rar

SU Sridurgha Uthayakumaran Syncfusion Team August 20, 2020 02:50 PM UTC

Hi Brain, 

Thanks for your update. 

Based on the attached video, we have validated the reported issue with the provided sample after upgraded to v18.2.0.54, and the sample is working fine in our end without any console errors. For your convenience, we have attached the video demonstration for this and the same can be downloaded from the below link. 


Kindly get back to us with the below requested details so that it could be helpful for us to validate and provide the solution at the earliest. 

  • Based on the attachment, we suspect that you have done some modifications while upgrading to the latest version in the sample. Hence, could you please provide the detailed steps to replicate this issue in our end?
  • Please share the browser name and it’s version details.

Please let us know if you have any concerns. 

Regards, 
Sridurgha U 
 


BR Brian August 21, 2020 07:23 AM UTC

I am sure I didn't modify anything except updated nuget package to 18.2.0.54. I compacted the project and send you back, you can check for it. And I'm sure the console error comes because I repeated the experiment more times than necessary. But I still noticed something:

1. the odds for the error to appear indeed lower than before your fix.
2. the console error content focuses on "cannot read property 'xxx' of  null", and xxx could be style or closest. (I attached a clear to read screenshot for your information.)
3. If the solution is cleared and rebuilt, the odds get higher (maybe the bug is hidden due to something been cached?)

This is what I do to reproduce the error:
1. clear the solution and press F5 to rebuild and run it.
2. while the new browser windows opens, press F12 to open the developer tools.
3. wait for the first page to be loaded (the Grid).
4. start clicking different labels from the menu randomly.
5. and the error appears.

I have recorded my steps into a video to show you. What worth mention is that my developing machine is not so powerful, so the loading speed is relatively low. I suspect maybe it's a factor to cause the error because I could reach some (imaginary) "loading gap" more easily than you guys. That is, maybe the loading and switching performance of yours is too good to catch the moment (just guess).

Here is my environment:

Windows 7 Service Pack 1 x64 professional
Visual Studio 2019 preview 16.6.0 Preview 2.1
dotnet core sdk v 3.1.300
Google Chrome 83.0.4103.7 stable



Attachment: ConsoleErrorSteps_86fd0e4f.rar

BS Balasubramanian Sattanathan Syncfusion Team August 27, 2020 04:32 PM UTC

Hi Brain, 
 
Thanks for your valuable patience. 
 
Based on the replication steps, we have tried to reproduce the problem “And I'm sure the console error comes because I repeated the experiment more times than necessary” at our side with a shared project and browser version. But unfortunately, we are unable to reproduce it. We suspect that due to the loading and switching performance of your machine could cause the problem at your end.  
 
Here is a video of your project that works as expected. 
 
Kindly get back to us with the proper replication steps with details to validate and provide the solution at the earliest.  
 
Regards, 
Balasubramanian S 


Loader.
Up arrow icon