From 8bb245a417d9c19bbe883ede9bf2f761f25f58ee Mon Sep 17 00:00:00 2001 From: John Wu <76966357+jwu-fisker@users.noreply.github.com> Date: Thu, 24 Jun 2021 10:17:34 -0700 Subject: [PATCH] CEC-279 Add logger (#62) * CEC-279 Add logger * Error log 500 status requests --- src/components/CarUpdates/Deploy/index.jsx | 24 ++++++--- src/components/CarUpdates/Status/index.jsx | 53 +++++++++++-------- src/components/Cars/Add/index.jsx | 4 +- src/components/Cars/CarSelection/index.jsx | 6 +-- .../Cars/CarSelectionTable/index.jsx | 16 +++--- src/components/Cars/List/index.jsx | 34 ++++++------ src/components/Cars/SendCommand/index.jsx | 4 +- src/components/Cars/SendCommandBulk/index.jsx | 21 +++++--- src/components/Cars/Status/index.jsx | 51 ++++++++++-------- src/components/Cars/StatusModal/index.jsx | 2 +- src/components/Dashboard/index.jsx | 2 +- src/components/Home/index.jsx | 2 +- .../UpdatePackages/Create/index.jsx | 7 ++- src/components/UpdatePackages/Edit/index.jsx | 5 +- src/components/UpdatePackages/List/index.jsx | 6 ++- src/services/monitoring.js | 4 +- src/utils/http.js | 18 +++++-- 17 files changed, 159 insertions(+), 100 deletions(-) diff --git a/src/components/CarUpdates/Deploy/index.jsx b/src/components/CarUpdates/Deploy/index.jsx index f9a7100..2ee06fd 100644 --- a/src/components/CarUpdates/Deploy/index.jsx +++ b/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,14 +42,18 @@ const MainForm = () => { }; const handleSelect = (event, key) => { - let newSelected; - if (event.target.checked) { - newSelected = [...selected]; - newSelected.push(key); - } else { - newSelected = selected.filter((vin) => vin !== key); + try { + let newSelected; + if (event.target.checked) { + newSelected = [...selected]; + newSelected.push(key); + } else { + newSelected = selected.filter((vin) => vin !== key); + } + setSelected(newSelected); + } catch (e) { + logger.warn(e.stack); } - setSelected(newSelected); }; 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(() => { diff --git a/src/components/CarUpdates/Status/index.jsx b/src/components/CarUpdates/Status/index.jsx index 5ca0779..b38e816 100644 --- a/src/components/CarUpdates/Status/index.jsx +++ b/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,36 +44,41 @@ const MainForm = () => { } = useUserContext(); useEffect(() => { - try { - getPackages({ id: packageid }, token); - } catch (e) { - setMessage(e.message); - } - // eslint-disable-next-line + (async () => { + try { + await getPackages({ id: packageid }, token); + } catch (e) { + setMessage(e.message); + logger.warn(e.stack); + } + })(); + // 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(() => { - try { - stopMonitor(); - getCarUpdates( - { - packageid, - limit: pageSize, - offset: pageSize * pageIndex, - }, - token - ); - } catch (e) { - setMessage(e.message); - } - // eslint-disable-next-line + (async () => { + try { + stopMonitor(); + await getCarUpdates( + { + packageid, + limit: pageSize, + offset: pageSize * pageIndex, + }, + token + ); + } catch (e) { + setMessage(e.message); + logger.warn(e.stack); + } + })(); + // 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) => { diff --git a/src/components/Cars/Add/index.jsx b/src/components/Cars/Add/index.jsx index 0b7c8b6..ddf8dbd 100644 --- a/src/components/Cars/Add/index.jsx +++ b/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); } }; diff --git a/src/components/Cars/CarSelection/index.jsx b/src/components/Cars/CarSelection/index.jsx index 4fffdc7..baaa909 100644 --- a/src/components/Cars/CarSelection/index.jsx +++ b/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 ( diff --git a/src/components/Cars/CarSelectionTable/index.jsx b/src/components/Cars/CarSelectionTable/index.jsx index 392d840..2550b8e 100644 --- a/src/components/Cars/CarSelectionTable/index.jsx +++ b/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}`, }; - try { - getVehicles(Object.assign(options, search), token); - } catch (e) { - setMessage(e.message); - } - // eslint-disable-next-line + (async () => { + try { + await getVehicles(Object.assign(options, search), token); + } catch (e) { + setMessage(e.message); + logger.warn(e.stack); + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [pageIndex, pageSize, orderBy, order, search, token]); return ( diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx index c2f00ae..0eaec4e 100644 --- a/src/components/Cars/List/index.jsx +++ b/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,24 +79,27 @@ const MainForm = () => { useEffect(() => { setTitle("Vehicles"); - // eslint-disable-next-line + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - try { - getVehicles( - { - limit: pageSize, - offset: pageSize * pageIndex, - order: `${orderBy} ${order}`, - search, - }, - token - ); - } catch (e) { - setMessage(e.message); - } - // eslint-disable-next-line + (async () => { + try { + await getVehicles( + { + limit: pageSize, + offset: pageSize * pageIndex, + order: `${orderBy} ${order}`, + search, + }, + token + ); + } catch (e) { + setMessage(e.message); + logger.warn(e.stack); + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [pageIndex, pageSize, token, orderBy, order, search]); const handleChangePageIndex = (event, newIndex) => { diff --git a/src/components/Cars/SendCommand/index.jsx b/src/components/Cars/SendCommand/index.jsx index eee3b42..a3d67f1 100644 --- a/src/components/Cars/SendCommand/index.jsx +++ b/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 ( diff --git a/src/components/Cars/SendCommandBulk/index.jsx b/src/components/Cars/SendCommandBulk/index.jsx index 181b545..6206b9f 100644 --- a/src/components/Cars/SendCommandBulk/index.jsx +++ b/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,19 +31,23 @@ const MainForm = () => { }; const handleSelect = (event, key) => { - let newSelected; - if (event.target.checked) { - newSelected = [...selected]; - newSelected.push(key); - } else { - newSelected = selected.filter((vin) => vin !== key); + try { + let newSelected; + if (event.target.checked) { + newSelected = [...selected]; + newSelected.push(key); + } else { + newSelected = selected.filter((vin) => vin !== key); + } + setSelected(newSelected); + } catch (e) { + logger.warn(e.stack); } - setSelected(newSelected); }; useEffect(() => { setTitle("Send Command"); - // eslint-disable-next-line + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx index 706d9b3..a4709c3 100644 --- a/src/components/Cars/Status/index.jsx +++ b/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,23 +61,27 @@ const MainForm = () => { useEffect(() => { setTitle(`Vehicle ${vin} Details`); - // eslint-disable-next-line + // eslint-disable-next-line react-hooks/exhaustive-deps }, [vin]); + useEffect(() => { - try { - getCarUpdates( - { - vin, - limit: pageSize, - offset: pageSize * pageIndex, - order: `${orderBy} ${order}`, - }, - token - ); - } catch (e) { - setMessage(e.message); - } - // eslint-disable-next-line + (async () => { + try { + await getCarUpdates( + { + vin, + limit: pageSize, + offset: pageSize * pageIndex, + order: `${orderBy} ${order}`, + }, + token + ); + } catch (e) { + setMessage(e.message); + logger.warn(e.stack); + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [pageIndex, pageSize, token, orderBy, order]); const handleChangePageIndex = (event, newIndex) => { @@ -89,15 +94,19 @@ const MainForm = () => { }; const handleSort = (event, property) => { - if (property === orderBy) { - if (order === "asc") { - setOrder("desc"); + try { + if (property === orderBy) { + if (order === "asc") { + setOrder("desc"); + } else { + setOrder("asc"); + } } else { + setOrderBy(property); setOrder("asc"); } - } else { - setOrderBy(property); - setOrder("asc"); + } catch (e) { + logger.warn(e.stack); } }; diff --git a/src/components/Cars/StatusModal/index.jsx b/src/components/Cars/StatusModal/index.jsx index fc12d97..43b315f 100644 --- a/src/components/Cars/StatusModal/index.jsx +++ b/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 (
diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx index 371ec6c..816dcdf 100644 --- a/src/components/Dashboard/index.jsx +++ b/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 ( diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index d97e939..57eb9e7 100644 --- a/src/components/Home/index.jsx +++ b/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 ( diff --git a/src/components/UpdatePackages/Create/index.jsx b/src/components/UpdatePackages/Create/index.jsx index 8aaedc0..2272d2e 100644 --- a/src/components/UpdatePackages/Create/index.jsx +++ b/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); } }; diff --git a/src/components/UpdatePackages/Edit/index.jsx b/src/components/UpdatePackages/Edit/index.jsx index 56f2eda..e86283f 100644 --- a/src/components/UpdatePackages/Edit/index.jsx +++ b/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(() => { diff --git a/src/components/UpdatePackages/List/index.jsx b/src/components/UpdatePackages/List/index.jsx index 560eb55..4b46b3a 100644 --- a/src/components/UpdatePackages/List/index.jsx +++ b/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); } }; diff --git a/src/services/monitoring.js b/src/services/monitoring.js index 4d30de2..6cf5297 100644 --- a/src/services/monitoring.js +++ b/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, }); diff --git a/src/utils/http.js b/src/utils/http.js index 8ff605e..e3f176c 100644 --- a/src/utils/http.js +++ b/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) => ({ - error: response.statusText, - message: `${response.status} ${response.statusText}`, - })) + .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) => {