CEC-279 Add logger (#62)

* CEC-279 Add logger

* Error log 500 status requests

src/components/CarUpdates/Deploy/index.jsx

@@ -12,6 +12,7 @@ import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Cars/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { packageid } = useParams();
@@ -41,6 +42,7 @@ const MainForm = () => {
   };
 
   const handleSelect = (event, key) => {
+    try {
       let newSelected;
       if (event.target.checked) {
         newSelected = [...selected];
@@ -49,6 +51,9 @@ const MainForm = () => {
         newSelected = selected.filter((vin) => vin !== key);
       }
       setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
   };
 
   const onSubmit = async (event) => {
@@ -65,13 +70,16 @@ const MainForm = () => {
       setRedirect(`/carupdate-status/${packageid}`);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
+
   const getData = async () => {
     try {
       getPackages({ id: parseInt(packageid) }, token);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
 
@@ -82,7 +90,7 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle(`Deploy ${packageName} ${version}`);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [packageName, version]);
 
   useEffect(() => {

src/components/CarUpdates/Status/index.jsx

@@ -20,6 +20,7 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { packageid } = useParams();
@@ -43,25 +44,28 @@ const MainForm = () => {
   } = useUserContext();
 
   useEffect(() => {
+    (async () => {
       try {
-      getPackages({ id: packageid }, token);
+        await getPackages({ id: packageid }, token);
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
-    // eslint-disable-next-line
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
   useEffect(() => {
     if (!packages || packages.length === 0) return;
     setTitle(`Package ${packages[0].package_name} ${packages[0].version}`);
-
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [packages]);
 
   useEffect(() => {
+    (async () => {
       try {
         stopMonitor();
-      getCarUpdates(
+        await getCarUpdates(
           {
             packageid,
             limit: pageSize,
@@ -71,8 +75,10 @@ const MainForm = () => {
         );
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
-    // eslint-disable-next-line
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token]);
 
   useEffect(() => {
@@ -81,11 +87,12 @@ const MainForm = () => {
       startMonitor(token);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
     return () => {
       stopMonitor();
     };
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [carUpdates]);
 
   const handleChangePageIndex = (event, newIndex) => {

src/components/Cars/Add/index.jsx

@@ -8,6 +8,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { Button, TextField } from "@material-ui/core";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { addVehicle, busy } = useVehicleContext();
@@ -25,7 +26,7 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Add Vehicle");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const onSubmit = async (event) => {
     try {
@@ -44,6 +45,7 @@ const MainForm = () => {
       vinEl.current.value = "";
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
 

src/components/Cars/CarSelection/index.jsx

@@ -40,7 +40,7 @@ const Control = (props) => {
         await getYears(token);
       } catch (e) {}
     })();
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
   useEffect(() => {
@@ -56,14 +56,14 @@ const Control = (props) => {
   useEffect(() => {
     if (model === null || year === -1) return;
     getVehicles({ model, year, trim }, token);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model, year, trim]);
 
   useEffect(() => {
     if (!props.onSelection) return;
     const vins = vehicles.map((item) => item.vin);
     props.onSelection(vins);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vehicles]);
 
   return (

src/components/Cars/CarSelectionTable/index.jsx

@@ -16,6 +16,7 @@ import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -100,12 +101,15 @@ const CarSelectionTable = (props) => {
       offset: pageSize * pageIndex,
       order: `${orderBy} ${order}`,
     };
+    (async () => {
       try {
-      getVehicles(Object.assign(options, search), token);
+        await getVehicles(Object.assign(options, search), token);
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
-    // eslint-disable-next-line
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, orderBy, order, search, token]);
 
   return (

src/components/Cars/List/index.jsx

@@ -20,6 +20,7 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -78,12 +79,13 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Vehicles");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
+    (async () => {
       try {
-      getVehicles(
+        await getVehicles(
           {
             limit: pageSize,
             offset: pageSize * pageIndex,
@@ -94,8 +96,10 @@ const MainForm = () => {
         );
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
-    // eslint-disable-next-line
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {

src/components/Cars/SendCommand/index.jsx

@@ -8,6 +8,7 @@ import commands from "../../../services/commands";
 import useStyles from "../../useStyles";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import { logger } from "../../../services/monitoring";
 
 const SendCommand = ({ vins }) => {
   const classes = useStyles();
@@ -50,6 +51,7 @@ const SendCommand = ({ vins }) => {
       }
     } catch (e) {
       setMessage(e.message);
+      logger.error(e.stack);
     }
   };
 
@@ -69,7 +71,7 @@ const SendCommand = ({ vins }) => {
   useEffect(() => {
     if (!commands || commands.length === 0) return;
     selectCommand(commands[0].value);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Cars/SendCommandBulk/index.jsx

@@ -8,6 +8,7 @@ import useStyles from "../../useStyles";
 import SendCommand from "../SendCommand";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../CarSelectionTable";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -30,6 +31,7 @@ const MainForm = () => {
   };
 
   const handleSelect = (event, key) => {
+    try {
       let newSelected;
       if (event.target.checked) {
         newSelected = [...selected];
@@ -38,11 +40,14 @@ const MainForm = () => {
         newSelected = selected.filter((vin) => vin !== key);
       }
       setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
   };
 
   useEffect(() => {
     setTitle("Send Command");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Cars/Status/index.jsx

@@ -19,6 +19,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -60,11 +61,13 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle(`Vehicle ${vin} Details`);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin]);
+
   useEffect(() => {
+    (async () => {
       try {
-      getCarUpdates(
+        await getCarUpdates(
           {
             vin,
             limit: pageSize,
@@ -75,8 +78,10 @@ const MainForm = () => {
         );
       } catch (e) {
         setMessage(e.message);
+        logger.warn(e.stack);
       }
-    // eslint-disable-next-line
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token, orderBy, order]);
 
   const handleChangePageIndex = (event, newIndex) => {
@@ -89,6 +94,7 @@ const MainForm = () => {
   };
 
   const handleSort = (event, property) => {
+    try {
       if (property === orderBy) {
         if (order === "asc") {
           setOrder("desc");
@@ -99,6 +105,9 @@ const MainForm = () => {
         setOrderBy(property);
         setOrder("asc");
       }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
   };
 
   return (

src/components/Cars/StatusModal/index.jsx

@@ -41,7 +41,7 @@ export default function CarStatusModal(props) {
         setMessage(e.message);
       }
     })();
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.vin]);
   return (
     <div>

src/components/Dashboard/index.jsx

@@ -12,7 +12,7 @@ const Dashboard = () => {
 
   useEffect(() => {
     setTitle("Dashboard");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/Home/index.jsx

@@ -27,7 +27,7 @@ const Home = () => {
 
   useEffect(() => {
     setTitle("");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/UpdatePackages/Create/index.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
+import { Redirect } from "react-router";
 import { Button, TextField } from "@material-ui/core";
 import { DropzoneArea } from "material-ui-dropzone";
+
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import {
@@ -9,7 +11,7 @@ import {
 } from "../../Contexts/FileUploadContext";
 import ModalProgressBar from "../../ModalProgressBar";
 import useStyles from "../../useStyles";
-import { Redirect } from "react-router";
+import { logger } from "../../../services/monitoring";
 
 const FileUploadZone = ({ classes, token }) => {
   const { setFiles } = useFileUploadContext();
@@ -52,7 +54,7 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Create Update Package");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onSubmit = async (event) => {
@@ -76,6 +78,7 @@ const MainForm = () => {
       setRedirect(`/carupdate-deploy/${result.id}`);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
 

src/components/UpdatePackages/Edit/index.jsx

@@ -10,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
+import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { id } = useParams();
@@ -42,6 +43,7 @@ const MainForm = () => {
       setMessage(`Updated ${packageName} ${version}`);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
   const getData = async () => {
@@ -49,6 +51,7 @@ const MainForm = () => {
       getPackages({ id: parseInt(id) }, token);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
   const handleChange = (event) => {
@@ -70,7 +73,7 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle(`Edit Update Package ${id}`);
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

src/components/UpdatePackages/List/index.jsx

@@ -24,6 +24,7 @@ import { LocalDateTimeString } from "../../../utils/dates";
 import { Roles, hasRole } from "../../../utils/roles";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SearchField from "../../Controls/SearchField";
+import { logger } from "../../../services/monitoring";
 
 const tableColumns = [
   {
@@ -67,7 +68,7 @@ const UpdatePackagesList = () => {
 
   useEffect(() => {
     setTitle("Deploy Packages");
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -80,7 +81,7 @@ const UpdatePackagesList = () => {
       },
       token
     );
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
@@ -114,6 +115,7 @@ const UpdatePackagesList = () => {
       await deletePackage(parseInt(package_id), token);
     } catch (e) {
       setMessage(e.message);
+      logger.warn(e.stack);
     }
   };
 

src/services/monitoring.js

@@ -4,12 +4,13 @@ import { datadogLogs } from "@datadog/browser-logs";
 const applicationId = '8ecd160c-ad5c-4e06-8d88-3a6b89833246';
 const clientToken = 'pubeb25449bb91773fc993855c7378e375a';
 const site = 'datadoghq.com';
+const service = 'ota-portal';
 
 datadogRum.init({
     applicationId,
     clientToken,
     site,
-    service:'ota-portal',
+    service,
     // Specify a version number to identify the deployed version of your application in Datadog 
     // version: '1.0.0',
     sampleRate: 100,
@@ -19,6 +20,7 @@ datadogRum.init({
 datadogLogs.init({
     clientToken,
     site,
+    service,
     forwardErrorsToLogs: true,
     sampleRate: 100,
 });

src/utils/http.js

@@ -1,3 +1,5 @@
+import { logger } from "../services/monitoring";
+
 export const getAuthHeaderOptions = (token) => ({
     "Authorization": `Bearer ${token}`,
   });
@@ -6,11 +8,17 @@ export const fetchRespHandler = (response) => {
   if (response.ok) return response.json();
 
   return response.text()
-    .then((text) => JSON.parse(text))
-    .catch((e) => ({
+    .then((text) => {
+      if (response.status >= 500) logger.error(text);
+      return JSON.parse(text);
+    })
+    .catch((e) => {
+      logger.error(e.stack);
+      return {
         error: response.statusText,
         message: `${response.status} ${response.statusText}`,
-    }))
+      };
+    })
 }
 
 export const addQueryParams = (url, params) => {