Uncaught (in promise) Error: Found malformed component comment at Blazor:

[ColtonHoksbergen]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I know that other people have run into this, but it has been continually plaguing me. Due to the inconsistent nature of the bug, I thought that it had disappeared for a while, or that it only happened on debug, but it is now showing up in my deployed staging environment. It seems to show up only on pages that have a lengthier HTML section, but even then, it's not a lot of HTML, just more than my other pages.

It also seems to happen only on a refresh, and only about half of the time on the refresh as well. I am working with Blazor Server. The bug is reproducible in all browsers I have tried (Firefox, Edge, Chrome), and is happening in staging and when I run it locally to debug.

Visually, it appears as if the bottom 50 pixels of the screen are not rendered. It feels to me that Blazor has moved on to another stage of rendering before the first step of the render is complete for some reason, but I have no way to confirm that.

Expected Behavior

I expect the page to render perfectly as it does about half of the time.

Steps To Reproduce

Unfortunately at this point the codebase is fairly complex, but I would be happy to work with anyone and show the code, as well as reproduce the error for you.

Exceptions (if any)

Uncaught (in promise) Error: Found malformed component comment at Blazor:{"sequence":0,"type":"server","prerenderId":"bceaf8afb0e54fda953590cf007d2f64","descriptor":"CfDJ8LGuF6p4LvxNnuR9y21FTj/uXe98BYZh6ni1vrStU1/Mn2XZz2TA471XdS8t3eIHP00YRy94xB/c/gTlAD9yFD\u002BlKnkhE1WrX\u002B0xP3sgdlzNV6SzUM6ECTIABm1EfdGOkHWxq2Z5ovKeS6wFdabfo/hYZ4b8kL\u002Bkwf0jh/vX71EO0NKMDRdcxT0L8E9xx4vMtOhVrwTpB4l3XYgQtXTEV3TD7mNbseqyMGyH\u002BgYjA6OI0PKbv/S8fwywB99lm9srjq6UmTObkBlgEDDATjeAS0w7x45Y8CG1Yd2m9WBOjTBKyusoEqPMxPsJBVS9iPwocV0oxa5OljR3in3prGLDD5LHwCQFi2IwdVgwRq88w85L"}
at zn (blazor.server.js:1:125395)
at jn (blazor.server.js:1:123618)
at jn (blazor.server.js:1:123654)
at jn (blazor.server.js:1:123654)
at jn (blazor.server.js:1:123654)
at blazor.server.js:1:128188
at blazor.server.js:1:128360
at Zn (blazor.server.js:1:128364)
zn @ blazor.server.js:1
jn @ bl

.NET Version

Version 7.0.203

Anything else?

No response

[javiercn]

@ColtonHoksbergen Thanks for contacting us.

Unfortunately, it's impossible for us to take action here without a minimal repro. There are many things that might be going on in your app that might cause this type of error that we can't foresee, like a component emitting the wrong markup or JS in the app interacting with the dom in unsupported ways.

We would recommend that, as a way to start narrowing this down, you create a separate branch of your project and start removing elements from the app until it stops reproducing the issue. That would give you a good clue of what is happening (if its something in your app) or point to a significant difference that will help pinpoint this within the framework.

[ghost]

Hi @ColtonHoksbergen. 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.

[ColtonHoksbergen]

@javiercn Thank you for your response.

I spent some time and was able to reduce the app down to the minimal components to reproduce the error. The repository can be found here, https://github.com/ColtonHoksbergen/QCSPortalMinimal.

In my investigations, I have found that the error has SOMETHING to do with displaying photos based on their Base64 data. The actual displaying of the photos is fine, but something goes wrong after that, which causes the error. The page always loads correctly the first time, but at some point between 1 and 10 refreshes, will reproduce the error.

Interestingly, when starting with a new project, I was not able to easily reproduce the error by simply displaying Base64 data in an tag, which leads me to believe that the issue is in conjunction with another feature. I will continue to investigate to see if I can isolate anything else that could be contributing. Another interesting item of note is that it seems to me that as the project shrunk, on average it took a few more refreshes to find the problem. At the beginning it was happening probably half of the time, and by the time I finally put this smaller version together, it probably requires 4-6 refreshes on average to replicate the behavior, although it will happen earlier from time to time.

Thank you for your consideration,
Colton

[javiercn]

@ColtonHoksbergen thanks for the additional details.

In my investigations, I have found that the error has SOMETHING to do with displaying photos based on their Base64 data.

This is highly discouraged, and likely the culprit of what is happening in your app. The reason is that you are creating large strings of text in memory that need to live for the lifetime of the session.

The recommended approach is described here

[ghost]

Hi @ColtonHoksbergen. 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.

[javiercn]

If you turn on server logging and look at the logs in the console and the browser console, there's likely a concrete bit of info that shows up

[ColtonHoksbergen]

@javiercn Almost forgot to update, you were exactly correct. I changed the references to use stream data instead and we're good to go. I appreciate the insight.