Log JS errors to dotnet (#2003)

Author: myieye

backend/FwLite/FwLiteShared/FwLiteSharedKernel.cs

@@ -36,6 +36,7 @@ public static IServiceCollection AddFwLiteShared(this IServiceCollection service
         services.AddSingleton<ProjectEventBus>();
         services.AddSingleton<MiniLcmApiNotifyWrapperFactory>();
         services.AddScoped<JsEventListener>();
+        services.AddScoped<JsInvokableLogger>();
         //this is scoped so that there will be once instance per blazor circuit, this prevents issues where the same instance is used when reloading the page.
         //it also avoids issues if there's multiple blazor circuits running at the same time
         services.AddScoped<FwLiteProvider>();

backend/FwLite/FwLiteShared/Services/FwLiteProvider.cs

@@ -34,6 +34,7 @@ IServiceProvider services
         DotnetService.TroubleshootingService,
         DotnetService.MultiWindowService,
         DotnetService.JsEventListener,
+        DotnetService.JsInvokableLogger,
     ];
 
     public static Type GetServiceType(DotnetService service) => service switch
@@ -51,6 +52,7 @@ IServiceProvider services
         DotnetService.TestingService => typeof(TestingService),
         DotnetService.MultiWindowService => typeof(IMultiWindowService),
         DotnetService.JsEventListener => typeof(JsEventListener),
+        DotnetService.JsInvokableLogger => typeof(JsInvokableLogger),
         _ => throw new ArgumentOutOfRangeException(nameof(service), service, null)
     };
 
@@ -107,5 +109,6 @@ public enum DotnetService
     TroubleshootingService,
     TestingService,
     MultiWindowService,
-    JsEventListener
+    JsEventListener,
+    JsInvokableLogger,
 }

backend/FwLite/FwLiteShared/Services/JsInvokableLogger.cs

@@ -0,0 +1,14 @@
+using Microsoft.JSInterop;
+using Microsoft.Extensions.Logging;
+
+namespace FwLiteShared.Services;
+
+public class JsInvokableLogger(ILogger<JsInvokableLogger> logger)
+{
+    [JSInvokable]
+    public Task Log(LogLevel level, string message)
+    {
+        logger.Log(level, message);
+        return Task.CompletedTask;
+    }
+}

backend/FwLite/FwLiteShared/TypeGen/ReinforcedFwLiteTypingConfig.cs

@@ -26,6 +26,7 @@
 using FwLiteShared.Sync;
 using MiniLcm.Media;
 using MediaFile = MiniLcm.Media.MediaFile;
+using Microsoft.Extensions.Logging;
 
 namespace FwLiteShared.TypeGen;
 
@@ -172,6 +173,7 @@ private static void ConfigureFwLiteSharedTypes(ConfigurationBuilder builder)
         ], exportBuilder => exportBuilder.WithPublicProperties());
 
         builder.ExportAsEnum<FwEventType>().UseString();
+        builder.ExportAsEnum<LogLevel>().UseString(false);
         var eventJsAttrs = typeof(IFwEvent).GetCustomAttributes<JsonDerivedTypeAttribute>();
         builder.ExportAsInterfaces(
             typeof(IFwEvent).Assembly.GetTypes()

frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/DotnetService.ts

@@ -16,6 +16,7 @@ export enum DotnetService {
 	TroubleshootingService = "TroubleshootingService",
 	TestingService = "TestingService",
 	MultiWindowService = "MultiWindowService",
-	JsEventListener = "JsEventListener"
+	JsEventListener = "JsEventListener",
+	JsInvokableLogger = "JsInvokableLogger"
 }
 /* eslint-enable */

frontend/viewer/src/lib/dotnet-types/generated-types/FwLiteShared/Services/IJsInvokableLogger.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+//     This code was generated by a Reinforced.Typings tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+
+import type {LogLevel} from '../../Microsoft/Extensions/Logging/LogLevel';
+
+export interface IJsInvokableLogger
+{
+	log(level: LogLevel, message: string) : Promise<void>;
+}
+/* eslint-enable */

frontend/viewer/src/lib/dotnet-types/generated-types/Microsoft/Extensions/Logging/LogLevel.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+//     This code was generated by a Reinforced.Typings tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+
+export enum LogLevel {
+	Trace = 0,
+	Debug = 1,
+	Information = 2,
+	Warning = 3,
+	Error = 4,
+	Critical = 5,
+	None = 6
+}
+/* eslint-enable */

frontend/viewer/src/lib/errors/global-errors.ts

@@ -1,12 +1,24 @@
 import {AppNotification} from '$lib/notifications/notifications';
+import type {IJsInvokableLogger} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IJsInvokableLogger';
+import {LogLevel} from '$lib/dotnet-types/generated-types/Microsoft/Extensions/Logging/LogLevel';
+import {delay} from '$lib/utils/time';
+import {useJsInvokableLogger} from '$lib/services/js-invokable-logger';
 
-function getPromiseRejectionMessage(event: PromiseRejectionEvent): string {
-  if (event.reason instanceof Error) {
-    return event.reason.message;
+type UnifiedErrorEvent = {
+  message: string;
+  error: unknown;
+  at?: string;
+}
+
+function unifyErrorEvent(event: ErrorEvent | PromiseRejectionEvent): UnifiedErrorEvent {
+  if ('message' in event) {
+    return { message: event.message, error: event.error, at: `${event.filename}:${event.lineno}:${event.colno}` };
   } else if (typeof event.reason === 'string') {
-    return event.reason;
+    return { message: event.reason, error: null };
+  } else if (event.reason instanceof Error) {
+    return { message: event.reason.message, error: event.reason };
   } else {
-    return 'Unknown error';
+    return { message: 'Unknown error', error: event.reason };
   }
 }
 
@@ -24,30 +36,73 @@ System.InvalidOperationException: Everything is broken. Here's some ice cream.
  */
 const dotnetErrorRegex = /^([\s\S]+?) {3}at /m;
 
-function processErrorIntoDetails(message: string): {message: string, detail?: string} {
+function processErrorIntoDetails(event: UnifiedErrorEvent): {message: string, detail?: string} {
+  const message = event.message;
   const match = dotnetErrorRegex.exec(message);
-  if (!match) return {message};
-  return {message: match[1].trim(), detail: message.substring(match[1].length).trim()};
+  if (match) return {message: match[1].trim(), detail: message.substring(match[1].length).trim()};
+  else if (event.error instanceof Error) return {message: message, detail: event.error.stack};
+  else return {message};
 }
 
 let setup = false;
 export function setupGlobalErrorHandlers() {
   if (setup) return;
   setup = true;
-  window.addEventListener('error', (event: ErrorEvent) => {
-    console.error('Global error', event);
-
-    if (suppressErrorNotification(event.message)) return;
-    const {message: simpleMessage, detail} = processErrorIntoDetails(event.message);
-    AppNotification.error(simpleMessage, detail, event.message);
-  });
-
-  window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
-    const message = getPromiseRejectionMessage(event);
-    //no need to log these because they already get logged by blazor.web.js
-
-    if (suppressErrorNotification(message)) return;
-    const {message: simpleMessage, detail} = processErrorIntoDetails(message);
-    AppNotification.error(simpleMessage, detail, message);
-  });
+  window.addEventListener('error', onErrorEvent);
+  window.addEventListener('unhandledrejection', onErrorEvent);
+}
+
+function onErrorEvent(event: ErrorEvent | PromiseRejectionEvent) {
+  const errorEvent = unifyErrorEvent(event);
+  void tryLogErrorToDotNet(errorEvent);
+  if (suppressErrorNotification(errorEvent.message)) return;
+  const {message: simpleMessage, detail} = processErrorIntoDetails(errorEvent);
+  AppNotification.error(simpleMessage, detail);
+}
+
+async function tryLogErrorToDotNet(error: UnifiedErrorEvent) {
+  try {
+    const details = getErrorString(error);
+    if (details.includes('JsInvokableLogger')) return; // avoid potential infinite loop
+    const logger = await tryGetLogger();
+    if (logger) await logger.log(LogLevel.Error, details);
+    else console.warn('No DotNet logger available to log error', error);
+  } catch (err) {
+    console.error('Failed to log error to DotNet', err);
+  }
+}
+
+// some very cheap durability.
+// As it is today, the logger service is available before our error handlers are registered
+async function tryGetLogger(): Promise<IJsInvokableLogger | undefined> {
+  let logger = useJsInvokableLogger();
+  if (logger) return logger;
+  await delay(1);
+  logger = useJsInvokableLogger();
+  if (logger) return logger;
+  await delay(1000);
+  logger = useJsInvokableLogger();
+  return logger;
+}
+
+function getErrorString(event: UnifiedErrorEvent) {
+  const details = [`Message: ${event.message}`];
+  if (event.at) details.push(`at ${event.at}`);
+  if (event.error instanceof Error) {
+    const error: Error = event.error;
+    if (error.stack) details.push(`Stack: ${error.stack}`);
+    if (error.cause) details.push(`Cause: ${tryStringify(error.cause)}`);
+  } else if (event.error) {
+    details.push(`Error: ${tryStringify(event.error)}`);
+  }
+
+  return details.join('\n');
+}
+
+function tryStringify(value: unknown): string | undefined {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '(failed-to-stringify)';
+  }
 }

frontend/viewer/src/lib/services/js-invokable-logger.ts

@@ -0,0 +1,6 @@
+import {DotnetService} from '$lib/dotnet-types';
+import type {IJsInvokableLogger} from '$lib/dotnet-types/generated-types/FwLiteShared/Services/IJsInvokableLogger';
+
+export function useJsInvokableLogger(): IJsInvokableLogger | undefined {
+  return window.lexbox.ServiceProvider.tryGetService(DotnetService.JsInvokableLogger);
+}

frontend/viewer/src/lib/services/service-provider-dotnet.ts

@@ -59,6 +59,8 @@ export function wrapInProxy<K extends ServiceKey>(dotnetObject: DotNet.DotNetObj
       if (typeof prop !== 'string') return undefined;
       //runed resource calls stringify on values to check equality, so we don't want to pass the toJSON call through to the backend
       if (prop === 'toJSON') return undefined;
+      //called to check if it's a promise or not
+      if (prop === 'then') return undefined;
       const dotnetMethodName = uppercaseFirstLetter(prop);
       return async function proxyHandler(...args: unknown[]) {
         console.debug(`[Dotnet Proxy] Calling ${serviceName} method ${dotnetMethodName}`, args);