Why might OnAfterRender not fire? - c#

Similar to this question from two years ago, I have a Blazor server-side app and the OnAfterRender() method isn't firing. If I set a breakpoint at the start of the method, the breakpoint isn't hit.
I created a minimal example page in my project:
#page "/index2"
<h3>Index2</h3>
<p>Message: #msg</p>
#code {
private string msg = "Hello";
private bool flag = false;
protected override void OnAfterRender(bool firstRender)
{
if (!flag)
{
msg += " world";
flag = true;
StateHasChanged();
}
}
}
When I load this page, it displays "Message: Hello", without the "world" part ever appearing.
This is a project I haven't touched since in three months, and it worked perfectly a month ago. The only change I can think of is that I upgrading my OS to Windows 11. I have not tried running my project on Windows 10 yet; that may be my next attempt, but I'm hoping someone here has a more logical explanation. (Without a convincing reason why my OS would have an impact, that feels a bit like "magical thinking").
My _Host.cshtml has this as the final line in its body: <script src="_framework/blazor.server.js"></script>
My Startup.cs file has this as its last command in its Configure() method:
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
My project targets .NET 6.0.
The frustrating thing is that I've spent 19 months on this project and it all worked beautifully. I upgraded from Visual Studio 2019 to Visual Studio 2022 and it still worked. It just suddenly stopped working after I upgraded my operating system to Windows 11.
What I've tried:
I tried the solutions suggested for this question and verified that my _Host.cshtml and Startup.cs had the code suggested there (which both already did).
I tried uninstalling Visual Studio 2022 and reverting to Visual Studio 2019. My project no longer loaded in Visual Studio 2019 because my installed version of MSBuild had changed, and I remembered that I had previously had the project working in Visual Studio 2022, so reverting there was probably a dead end anyway.
I tried creating a completely fresh Blazor project, and in that fresh project the OnAfterRender() method did work as expected! But I'm completely flummoxed as to what could have broken in this preexisting project.
Edit: This seems to be a SignalR issue. In the debug output, I get this error message:
Microsoft.Azure.SignalR.ServiceConnection: Error: Failed to connect to
'(Primary)https://myproject-blazorservice-abc.service.signalr.net',
will retry after the back off period. Error detail: The server returned
status code '502' when status code '101' was expected..
My launchSettings.json file looked like this:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:9385",
"sslPort": 44312
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
}
},
"MyProject": {
"commandName": "Project",
"dotnetRunMessages": "true",
"launchBrowser": true,
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
}
}
}
}
If I comment out the two lines referencing SignalR, that error message goes away and the pages load as expected. (When I created a fresh Blazor project, I noticed that the newly-created launchSettings.json did not have those two lines.)
Now, I don't know much about SignalR. My understanding is that it provides an API for real-time communication between client-side pages and server-side code. So I guess with SignalR not working, that communication broke down, such that the server side never got the message to run OnAfterRender(). Would that make sense?
This question suggests that the '502' status code might suggest an issue with an Azure account, which seems plausible; this app does connect to a SQL Server database on a friend's Azure account.

Take your code, paste it into index in a vanilla Blazor Server or WASM deployed project and it works. The OS version will make no difference. [Polite] There are things that you are telling us!
On OnAfterRender{async} usage, it should (in general) only be used to do JS interop stuff. The component has already rendered, why do something where you need to force it to render again! Anything that manipulates the component instance data and needs to call StateHasChanged to make it appear should be coded into the normal lifecycle events.

Well, I still don't know why this was broken, but I did fix the problem. Maybe this will help someone in the future.
I created a new Blazor project, copied all my files into it (with relevant changes for namespaces etc), and OnAfterRender async seemed to work. Looking at the differences between the two, I noticed that the launchSettings.json files were different, so I copied the code from the newer launchSettings.json and replaced the old code with that (again, with relevant changes for namespaces etc.). Boom, things are working now in my original project.
I'm not happy about this... this is programming by coincidence and magical thinking ... but my project works again.

Related

How do I prevent my localhost port from changing while debugging when launching in IIS Express with SpaServices and Visual Studio?

I have a visual studio solution for an ASP.NET Core application. This ASP.NET Core application also uses Microsoft.AspNetCore.SpaServices to render a React SPA. On some PCs, it runs as expected: when launching it in debug mode through visual studio, it loads up on the configured address and port (localhost:3000).
I recently upgraded to Windows 11. Ever since after that, when I try to run the project, visual studio will fire up a web browser, load the app on the configured port (localhost:3000), then switch to a random port! (in the 50000+ range). Note that the same project, on the same version in git, launches as expected (loads and stays on localhost:3000) on other PCs running Windows 10.
Additionally, I can run other applications, like a react frontend on port 3000 at a separate time with no incident.
launchsettings.json looks like this:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:3000",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
}
}
}
I saw a similar question here, but this was for docker only. I'm not using docker for this test, just IIS Express.
IIS Express's tray icon even shows it running on port 3000:
When I turn on tracing, I can see that Microsoft.AspNetCore.SpaServices reports a new, random port number as the port to serve the application from:
2022-12-23 10:19:32.1515|INFO|Microsoft.AspNetCore.SpaServices|You can now view myapp.name in the browser.
2022-12-23 10:19:32.1515|INFO|Microsoft.AspNetCore.SpaServices| Local: http://localhost:52371
2022-12-23 10:19:32.1515|INFO|Microsoft.AspNetCore.SpaServices| On Your Network: http://10.11.12.13:52371
(names and IP addresses anonymized.)
Why visual studio / IIS express changing this port number on load, and how can I make it stop?
The solution for me ended up being related to zscalar's proxy behind the corporate firewall. I needed to ensure that localhost and 127.0.0.1 were added to the NO_PROXY environment variable.
The string "_sm_au_" being appended to the URL (like localhost:56912/?_sm_au_=123vAB12AB842t12" ) was a sign that zscalar was involved, as I found originally here: https://stackoverflow.com/a/72735926/18097

NET Core+React template - After replacing ReactJS UI project with a Typescript project, the backend and the UI open in separate tabs. How to fix this?

Tools: Visual Studio 2022, NET6 (and VSCode editor for client app)
I created a NET Core + ReactJS project from the available templates in Visual Studio 2022 (without HTTPS). I wanted to switch to Typescript, so I created a new Create React App Typescript project and replaced the template's ReactJS ClientApp with it. I run the app by just clicking the Run button in Visual Studio.
I noticed that:
In the original ReactJS case, the server would redirect from the "Launching the SPA proxy..." page (see screenshot below) to the template's default UI page automatically within one tab.
With the new React Typescript project, the I see two tabs (see screenshot below): One "Launching the SPA proxy..." page, and one Create React App default page (in localhost:3000). Also, it seems that the server keep trying to spin up new instances of the Client App.
How can I fix these issues?
The launchSettings.json:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:44863",
"sslPort": 0
}
},
"profiles": {
"MyProject": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "http://localhost:5203",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
}
}
}
I tried changing the port numbers here, but that did not help.
And what is the 44863 port for? I don't see any browser tabs with that port. Backend server opens in 5203, and the ReactJS one in 44467 (see screenshot in the description).
EDIT:
I changed the React app's port number in the .csproj from 44467 to 3000 <SpaProxyServerUrl>http://localhost:3000</SpaProxyServerUrl>
Now the "Launching the SPA proxy..." correctly redirects to the React app URL, and the server stopped trying to spin up new instances of the React app. However, the second tab is still there; it opens up alongside (and at the same time as) the "Launching the SPA proxy..." tab in the browser. I am guessing that is because the server and UI projects are launched separately. How to make them launch as one app? (Screenshot below)
(Screenshot) Still launching two tabs and two terminals
In the ClientApp directory created from the template, there is a .env file containing a single line:
BROWSER=none
Adding this file to the React Typescript app directory stops the second browser tab from being opened.

The listener for function '' was unable to start. Azure durable function VS 2022

I am working in durable functions in Vs2022. it was all working fine till this noon. Suddenly it starts saying
The listener for function 'Orchestration' was unable to start.
DurableTask.AzureStorage: The response ended prematurely, with at
least 91 additional bytes expected. Microsoft.WindowsAzure.Storage:
The response ended prematurely, with at least 91 additional bytes
expected. System.Net.Http: The response ended prematurely, with at
least 91 additional bytes expected.
I really got confused what really happened to it which was working fine for more than couple of months.
Here is my local.settings.json
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "UseDevelopmentStorage=true",
"FUNCTIONS_WORKER_RUNTIME": "dotnet",
"AzureWebJobsSecretStorageType": "files",
"environment": "Development",
}
}
My VS2022 version is 17.2.6
Kindly note, I am working in a company VM where I dont have any admin rights.
Your app running on Azurite and its not run on Older Azure Storage Emulator. its running newer version of Functions runtime. these effect your environment to seeing problems.
and you can try with older Azure Storage Emulator.
You have Storage Emulator on your machine checking on this location on your machine ProgramFile(x86)\Microsoft SDKs\Azure\Storage Emulator\AzureStorageEmulator.exe and try to run this emulator and run before staring debugging and see the issue it solved or not. if emulator already running then azurite won't be started.
Thank #cgillum for providing on solution on this issue.
More information about this issue please visit on these web page VS 2022 Local Debug Durable Functions Issues "Error in LeaseManagerStarter task. Exception: Microsoft.WindowsAzure.Storage.StorageException

Attach to debugger for Azure Functions from Rider on Mac

Just wondering if anyone has managed to attach and debug an Azure Functions app using JetBrains Rider?
There only seems to be 2 debug options for Azure Functions
--debug VS
--debug VsCode
Not sure if Rider can attach to these, I can't find much on this. So if anyone else has succeeded please let me know how/if it can be done.
Thanks.
No, this is not possible to date (4. Oct. 2018):
According to the Rider online bug report (This is not implemented yet, please feel free to vote for https://youtrack.jetbrains.com/issue/RIDER-1256) this is not solved, yet.
The above issue has now been resolved, however it still does not support Azure Functions.
However I did find this, please note this appears to be windows only, not Mac.
https://github.com/JetBrains/azure-tools-for-intellij/issues/78#issuecomment-439313762
Install the Azure functions command line tools using NPM (https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local)
Add a file Properties/launchSettings.json, with the following contents (tailored to your project):
{
"profiles": {
"functions": {
"commandName": "Executable",
"executablePath": "dotnet",
"commandLineArgs": "%APPDATA%\\npm\\node_modules\\azure-functions-core-tools\\bin\\func.dll host start --port 7071 --pause-on-error",
"environmentVariables": {
"AZURE_FUNCTIONS_ENVIRONMENT": "Development",
"AzureWebJobsStorage": "UseDevelopmentStorage=true"
}
}
}
}
Run the launch profile, and wait for the functions host to say it is running
In Rider, attach to the process using Run | Attach to Process.... Find the process that is running dotnet ... func.dll:

Can't build solution due to TypeScript errors, but noEmitOnError is false

I'm working on a ASP.NET 5 MVC 6 web application with React and TypeScript in Visual Studio 2015 with ReSharper 2016.2. I'm using a tsconfig.json that looks like this:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": false,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"jsx": "react"
},
"exclude": [
"node_modules",
"wwwroot",
"typings/index.d.ts",
"typings/index",
"jspm_packages"
],
"compileOnSave": true
}
As you can see, noEmitOnError is false. However, after installing Update 3, Visual Studio no longer lets me build the solution if there are any typing errors. Every TS error is reported twice in the error list:
And the first error, without the error code, stops the solution from building.
I've tried:
Reinstalling/Uninstalling TypeScript tools for VS (doesn't change anything)
Recreating the tsconfig.json file.
Switching to the mode without tsconfig.json and making sure emit on error is enabled.
Disabling/enabling ReSharper
Uninstalling various other extensions
Creating a new project and solution. The error occurs in all projects.
The only solution I've found to the issue is removing the following line from the .csproj file:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
After I do this, the TypeScript tooling still works fine (there are a few minor issues) and the error that begins with Build: disappears.
The problem is that after some operations on .ts files Visual Studio raises the following helpful message:
And helpfully adds that line to the .csproj file again. At first everything is okay, but the Build: error comes back after I restart Visual Studio.
Edit: Better Workaround
Okay, a better workaround is to replace the bad line with the following:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="False And Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
This 'tricks' VS into believing that the line already exists so it won't add it again. However, there are still issues, such as errors only appearing if you open the file containing the error, rather than on build.

Categories