SignalR Error in Dot Net Core 3.1 (.Net Core 3.1) : "Failed to invoke 'SendMessage' due to an error on the server".

Problems when implementing SignalR in Dot Net Core 3.1 (.Net Core 3.1) Error: Failed to invoke 'HubName' due to an error on the server.

Solution: When this error is emitted, first you will have to prepare an efficient way to debug the issue. SignalR can be hard to debug part of that is, it uses Sockets to Communicate with the Server Side Code, which sometimes the data posted cannot be seen in the logs.

1. In Dot Net Core 3.1 there has been some breaking changes implemented when using SignalR API, see the link at the end of this document.

2. First you will need to install the Client Side libraries using Libman or NPM

 {
            "provider": "unpkg",
            "library": "@microsoft/[email protected]",
            "destination": "wwwroot/lib/microsoft/signalr/",
            "files": [
                "dist/browser/signalr.js",
                "dist/browser/signalr.min.js"
            ]
        },
        {
            "provider": "unpkg",
            "library": "@microsoft/[email protected]",
            "destination": "wwwroot/lib/microsoft/signalr-protocol-msgpack/",
            "files": [
                "dist/browser/signalr-protocol-msgpack.min.js",
                "dist/browser/signalr-protocol-msgpack.js"
            ]
        },
        {
            "provider": "unpkg",
            "library": "[email protected]",
            "destination": "wwwroot/lib/msgpack5/",
            "files": [
                "dist/msgpack5.js",
                "dist/msgpack5.min.js"
            ]
        }

3. After the above three libraries have been installed, you also have to reference them in order from the _LayoutPartial file

  <script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
   <script src="~/lib/msgpack5/dist/msgpack5.min.js"></script>
   <script src="~/lib/microsoft/signalr-protocol-msgpack/dist/browser/signalr-protocol-msgpack.min.js"></script>

4. After Step 3 is complete, you will have to make sure that whatever the errors come out of this are detailed as possible so to resolve the issue.
- Enable Detailed Errors from the Server Side

 services.AddSignalR(options =>
            {
                options.EnableDetailedErrors = true;
                
            }).AddMessagePackProtocol(options =>
            {
                options.FormatterResolvers = new List<MessagePack.IFormatterResolver>()
                    {
                        MessagePack.Resolvers.StandardResolver.Instance
                    };
            }); 

- You will also have to add MessagePack, for details on MessagePack Resolver, visit the link provided below.

5. In Dot Net Core 3.1, you will have to map the SignalR Hub according the new changes. See the code below:

//Keep in mind that the app.UseEndpoints has to come below app.UseRouting(); for the Mapping to Work. 
app.UseEndpoints(endpoint =>
            {
                endpoint.MapRazorPages();
                endpoint.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
               
                endpoint.MapHub<NameOfHub>("/nameOfHubJavaScriptWillCallWhenInvokingConnection");
                 });

6. From the Client Side which is JavaScript, you will have to add "withHubProtocal" see code below:

//When creating your connection the Server Side Socket declare your connection like below:
var connection = new signalR.HubConnectionBuilder().withUrl("/nameOfHubTheServerSideIsExpecting").withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol()).build();

7. Finally, whatever error you get, make sure it is detailed enough to give you clue,  more can be found here.