It’s not unusual for us to need to output log message to file, console etc. Obviously there’s going to be a different in capabilities for logging from WASM (essentially on the client browser) and on a server.<\/p>\n
Blazor supplies the logging framework<\/strong><\/p>\n Blazor supplies loggin via the ILogger, ILogger Logging capabilities are supplied via the WebAssemblyHostBuilder on WebAssembly and Host on the server (see Program.cs in both project types).<\/p>\n We can therefore use these interfaces\/implementation via injection like this<\/p>\n Alternatively we might use the ILogFactory like this<\/p>\n Logging in WebAssembly<\/strong><\/p>\n With WebAssembly on the client, we’d obviously expect to be logging to the Browser devtools. Whilst we can actually just use<\/p>\n the Logging framework offers some extra functionality, such as categorisation of logs etc. To use the ILogger or ILogger (we have the ability to log debug, warning, info etc.)<\/p>\n Logging to Server<\/strong><\/p>\n For Blazor Server, the output from the logging will be visible in the console window if running as a standalone application or the output window of Visual Studio. <\/p>\n However if you want your Blazor server application to output to the browser, then you need to use the IJSRuntime, which we can inject like this<\/p>\n and then use the runtime like this<\/p>\n as you can see, the runtime allows us access to the JavaScript runtime hosting our pages and we can call the console.log<\/em> JavaScript method, passing the parameters for the method call. In our case it’s just a string “Browser Message”.<\/p>\n Adding custom logger<\/strong><\/p>\n To add a custom logger we can use something like this, where the DebugProvider is our implementation of an ILoggingProvider<\/p>\n Configuration<\/strong><\/p>\n Configuration is placed in the appsettings.json file (remember if you’re using appsettings.json on WebAssembly client then this should be placed in the wwwroot folder otherwise it’s not set to the browser). For server the appsettings.json can be in the project folder.<\/p>\n Here’s the template generated appsettings section for logging<\/p>\n It’s not unusual for us to need to output log message to file, console etc. Obviously there’s going to be a different in capabilities for logging from WASM (essentially on the client browser) and on a server. Blazor supplies the logging framework Blazor supplies loggin via the ILogger, ILogger, ILoggerFactory and ILoggerProvider interfaces. In most […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305],"tags":[],"class_list":["post-8396","post","type-post","status-publish","format-standard","hentry","category-blazor"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8396"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8396\/revisions"}],"predecessor-version":[{"id":8400,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8396\/revisions\/8400"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n@inject ILogger Logger;\r\n\/\/ OR\r\n@inject ILogger<MyPage> Logger;\r\n<\/pre>\n
\r\n@inject ILoggerFactory LoggerFactory\r\n\r\n\/\/ with the following\r\nvar logger = LoggerFactory.CreateLogger<MyPage>();\r\n<\/pre>\n
\r\nConsole.WriteLine("Message 1");\r\nDebug.WriteLine("Message 2");\r\n<\/pre>\n\r\nLogger.LogWarning("Log a warning");\r\n<\/pre>\n\r\n@inject IJSRuntime JsRuntime\r\n<\/pre>\n
\r\nJsRuntime.InvokeAsync<string>("console.log", "Browser Message");\r\n<\/pre>\n\r\nbuilder.Logging.AddProvider(new DebugProvider());\r\n<\/pre>\n
\r\n"Logging": {\r\n "LogLevel": {\r\n "Default": "Trace",\r\n "Microsoft": "Warning",\r\n "Microsoft.Hosting.Lifetime": "Information"\r\n }\r\n},\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"