[backend/frontend] PoC Frontend Error Log Collector Implementation (#1964)

openbas-api/src/main/java/io/openbas/rest/log/LogApi.java

@@ -0,0 +1,49 @@
+package io.openbas.rest.log;
+
+import io.openbas.rest.helper.RestBehavior;
+import io.openbas.rest.log.form.LogDetailsInput;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+public class LogApi extends RestBehavior {
+
+  public static final Logger logger = LoggerFactory.getLogger(LogApi.class);
+
+  @PostMapping("/api/logs")
+  public void logDetails(@RequestBody LogDetailsInput logDetailsInput) {
+    switch (logDetailsInput.getLevel()) {
+      case "WARN":
+        logger.warn(
+            "Message warn received: "
+                + logDetailsInput.getMessage()
+                + " stacktrace: "
+                + logDetailsInput.getStack());
+        break;
+      case "INFO":
+        logger.info(
+            "Message info received: "
+                + logDetailsInput.getMessage()
+                + " stacktrace: "
+                + logDetailsInput.getStack());
+        break;
+      case "DEBUG":
+        logger.debug(
+            "Message debug received: "
+                + logDetailsInput.getMessage()
+                + " stacktrace: "
+                + logDetailsInput.getStack());
+        break;
+      default:
+        logger.error(
+            "Message error received: "
+                + logDetailsInput.getMessage()
+                + " stacktrace: "
+                + logDetailsInput.getStack());
+        break;
+    }
+  }
+}

openbas-api/src/main/java/io/openbas/rest/log/form/LogDetailsInput.java

@@ -0,0 +1,13 @@
+package io.openbas.rest.log.form;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class LogDetailsInput {
+
+  private String message;
+  private String stack;
+  private String level;
+}

openbas-front/src/components/Error.js

@@ -2,6 +2,7 @@ import { Alert, AlertTitle } from '@mui/material';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
+import { sendErrorToBackend } from '../utils/Action.ts';
 import { useFormatter } from './i18n';
 
 class ErrorBoundaryComponent extends React.Component {
@@ -12,6 +13,8 @@ class ErrorBoundaryComponent extends React.Component {
 
   componentDidCatch(error, stack) {
     this.setState({ error, stack });
+    // Send the error to the backend
+    sendErrorToBackend(error, stack);
   }
 
   render() {

openbas-front/src/utils/Action.ts

@@ -2,6 +2,7 @@ import { AxiosError } from 'axios';
 import { FORM_ERROR } from 'final-form';
 import type { Schema } from 'normalizr';
 import * as R from 'ramda';
+import { ErrorInfo } from 'react';
 import { createIntl, createIntlCache } from 'react-intl';
 import { Dispatch } from 'redux';
 import Immutable from 'seamless-immutable';
@@ -214,3 +215,13 @@ export const bulkDeleteReferential = (uri: string, type: string, data: unknown)
       throw error;
     });
 };
+
+export const sendErrorToBackend = async (error: Error, stack: ErrorInfo) => {
+  const errorDetails = {
+    message: error.message,
+    stack: stack.componentStack,
+    timestamp: new Date().toISOString(),
+    level: 'ERROR',
+  };
+  simplePostCall('/api/logs', errorDetails);
+};