Extension logging

projects/extension/CHANGELOG.md

@@ -1,3 +1,7 @@
 # Changelog
 
 ## [Unreleased]
+
+### Added
+
+- Add a new tab in the options showing the logs of the underlying client (#429](https://github.com/paritytech/substrate-connect/issues/429))

projects/extension/src/background/index.ts

@@ -24,9 +24,69 @@ export interface Background extends Window {
       listener: (state: ExposedChainConnection[]) => void,
     ) => () => void
     disconnectTab: (tabId: number) => void
+    getLogger: () => LogKeeper
   }
 }
 
+interface logStructure {
+  time: string
+  level: number
+  target: string
+  message: string
+}
+
+interface LogKeeper {
+  all: logStructure[]
+  warn: logStructure[]
+  error: logStructure[]
+}
+
+const logKeeper: LogKeeper = {
+  all: [],
+  warn: [],
+  error: [],
+}
+
+const getTime = () => {
+  const date = new Date()
+  return `${date.getHours() < 10 ? "0" : ""}${date.getHours()}:${
+    date.getMinutes() < 10 ? "0" : ""
+  }${date.getMinutes()}:${
+    date.getSeconds() < 10 ? "0" : ""
+  }${date.getSeconds()} ${date.getMilliseconds()}`
+}
+
+const logger = (level: number, target: string, message: string) => {
+  const incLog = {
+    time: getTime(),
+    level,
+    target,
+    message,
+  }
+  const { error, warn, all } = logKeeper
+  if (level !== 4) {
+    // log all non-debug logs to background console
+    switch (level) {
+      case 0:
+      case 1:
+        if (error.length >= 1000) error.shift()
+        error.push(incLog)
+        console.error(message)
+        break
+      case 2:
+        if (warn.length >= 1000) warn.shift()
+        warn.push(incLog)
+        console.warn(message)
+        break
+      case 3:
+        console.info(message)
+        break
+    }
+  }
+  if (all.length >= 1000) all.shift()
+  all.push(incLog)
+}
+
 const listeners: Set<(state: ExposedChainConnection[]) => void> = new Set()
 
 const notifyListener = (
@@ -72,6 +132,7 @@ window.manager = {
       }
     })
   },
+  getLogger: () => logKeeper,
 }
 
 const saveChainDbContent = async (
@@ -91,7 +152,10 @@ const saveChainDbContent = async (
 const managerPromise: Promise<ConnectionManager<chrome.runtime.Port>> =
   (async () => {
     const managerInit = new ConnectionManager<chrome.runtime.Port>(
-      smoldotStart(),
+      smoldotStart({
+        maxLogLevel: 4,
+        logCallback: logger,
+      }),
     )
     for (const [key, value] of wellKnownChains.entries()) {
       const dbContent = await new Promise<string | undefined>((res) =>

projects/extension/src/containers/Options.tsx

@@ -1,5 +1,15 @@
 import React, { SetStateAction, useEffect, useState } from "react"
-import { createTheme, ThemeProvider } from "@material-ui/core"
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Badge,
+  createTheme,
+  ThemeProvider,
+  Typography,
+} from "@material-ui/core"
+import { makeStyles } from "@material-ui/core/styles"
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore"
 import Box from "@material-ui/core/Box"
 import Switch from "@material-ui/core/Switch"
 import FormGroup from "@material-ui/core/FormGroup"
@@ -27,12 +37,39 @@ interface StyledTabProps {
   label: string
 }
 
+interface logStructure {
+  time: string
+  level: number
+  target: string
+  message: string
+}
+
 const MenuTabs = withStyles({
   root: {
     minHeight: 34,
   },
 })(Tabs)
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%",
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    flexBasis: "33.33%",
+    flexShrink: 0,
+    fontWeight: "bold",
+  },
+  secondaryHeading: {
+    fontSize: theme.typography.pxToRem(15),
+    color: theme.palette.text.secondary,
+  },
+  logContainer: {
+    maxHeight: "500px",
+    overflow: "auto",
+  },
+}))
+
 const MenuTab = withStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -72,10 +109,27 @@ const TabPanel = (props: TabPanelProps) => {
 }
 
 const Options: React.FunctionComponent = () => {
+  const classes = useStyles()
   const appliedTheme = createTheme(light)
   const [value, setValue] = useState<number>(0)
   const [networks, setNetworks] = useState<NetworkTabProps[]>([])
   const [notifications, setNotifications] = useState<boolean>(false)
+  const [allLogs, setAllLogs] = useState<logStructure[]>([])
+  const [warnLogs, setWarnLogs] = useState<logStructure[]>([])
+  const [errLogs, setErrLogs] = useState<logStructure[]>([])
+  const [expanded, setExpanded] = useState<string | boolean>(false)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      chrome.runtime.getBackgroundPage((bg) => {
+        const logs = (bg as Background).manager.getLogger()
+        setAllLogs(logs.all)
+        setWarnLogs(logs.warn)
+        setErrLogs(logs.error)
+      })
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [])
 
   useEffect(() => {
     chrome.storage.local.get(["notifications"], (res) => {
@@ -118,13 +172,44 @@ const Options: React.FunctionComponent = () => {
     })
   }, [notifications])
 
+  const handleAccordionChange =
+    (panel: string) =>
+    (event: React.ChangeEvent<unknown>, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false)
+    }
+
   const handleChange = (
     event: React.ChangeEvent<unknown>,
     newValue: number,
   ) => {
     setValue(newValue)
   }
 
+  const getLevelInfo = (level: number) => {
+    let color: string = "#999"
+    let desc: string = "Trace"
+    switch (level) {
+      case 0:
+      case 1:
+        color = "#c90a00"
+        desc = "Error"
+        break
+      case 2:
+        color = "#f99602"
+        desc = "Warn"
+        break
+      case 3:
+        color = "#000"
+        desc = "Info"
+        break
+      case 4:
+        color = "#5e5e5e"
+        desc = "Debug"
+        break
+    }
+    return [desc, color]
+  }
+
   return (
     <ThemeProvider theme={appliedTheme}>
       <GlobalFonts />
@@ -142,12 +227,9 @@ const Options: React.FunctionComponent = () => {
       >
         <MenuTab label="Networks"></MenuTab>
         <MenuTab label="Settings"></MenuTab>
+        <MenuTab label="Logs"></MenuTab>
       </MenuTabs>
-
       <TabPanel value={value} index={0}>
-        {/*  Deactivate search for now
-          <ClientSearch />
-        */}
         {networks.length ? (
           networks.map((network: NetworkTabProps, i: number) => {
             const { name, health, apps } = network
@@ -181,6 +263,152 @@ const Options: React.FunctionComponent = () => {
           </FormGroup>
         </FormControl>
       </TabPanel>
+      <TabPanel value={value} index={2}>
+        <Accordion
+          expanded={expanded === "panel1"}
+          onChange={handleAccordionChange("panel1")}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1bh-content"
+            id="panel1bh-header"
+          >
+            <Typography className={classes.heading}>Errors</Typography>
+            <Typography className={classes.secondaryHeading}>
+              <Badge
+                badgeContent={errLogs.length}
+                showZero
+                color="error"
+              ></Badge>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div className={classes.logContainer}>
+              {errLogs.map((res: logStructure) => {
+                return (
+                  <p style={{ lineHeight: "1.2rem" }}>
+                    <span
+                      style={{
+                        fontSize: "0.8rem",
+                        fontWeight: "bold",
+                      }}
+                    >
+                      {res?.time}
+                    </span>
+                    <span
+                      style={{
+                        fontSize: "0.8rem",
+                        fontStyle: "oblique",
+                        margin: "0 0.5rem",
+                      }}
+                    >
+                      {res.target}
+                    </span>
+                    <span>{res.message}</span>
+                  </p>
+                )
+              })}
+            </div>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          expanded={expanded === "panel2"}
+          onChange={handleAccordionChange("panel2")}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel2bh-content"
+            id="panel2bh-header"
+          >
+            <Typography className={classes.heading}>Warnings</Typography>
+            <Typography className={classes.secondaryHeading}>
+              <Badge
+                badgeContent={warnLogs.length}
+                showZero
+                color="primary"
+              ></Badge>
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div className={classes.logContainer}>
+              {warnLogs.map((res: logStructure) => {
+                return (
+                  <p style={{ lineHeight: "1.2rem" }}>
+                    <span
+                      style={{
+                        fontSize: "0.8rem",
+                        fontWeight: "bold",
+                      }}
+                    >
+                      {res?.time}
+                    </span>
+                    <span
+                      style={{
+                        fontSize: "0.8rem",
+                        fontStyle: "oblique",
+                        margin: "0 0.5rem",
+                      }}
+                    >
+                      {res.target}
+                    </span>
+                    <span>{res.message}</span>
+                  </p>
+                )
+              })}
+            </div>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          expanded={expanded === "panel3"}
+          onChange={handleAccordionChange("panel3")}
+        >
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel3bh-content"
+            id="panel3bh-header"
+          >
+            <Typography className={classes.heading}>Logs</Typography>
+            <Typography className={classes.secondaryHeading}></Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <div className={classes.logContainer}>
+              {allLogs.map(({ time, level, target, message }: logStructure) => (
+                <p style={{ lineHeight: "1.2rem" }}>
+                  <span
+                    style={{
+                      color: getLevelInfo(level)[1],
+                      fontSize: "0.8rem",
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {time}
+                  </span>
+                  <span
+                    style={{
+                      color: getLevelInfo(level)[1],
+                      fontSize: "0.8rem",
+                      fontWeight: "bold",
+                      margin: "0 0.5rem",
+                    }}
+                  >
+                    {getLevelInfo(level)[0]}
+                  </span>
+                  <span
+                    style={{
+                      fontSize: "0.8rem",
+                      fontStyle: "oblique",
+                      margin: "0 0.5rem",
+                    }}
+                  >
+                    {target}
+                  </span>
+                  <span>{message}</span>
+                </p>
+              ))}
+            </div>
+          </AccordionDetails>
+        </Accordion>
+      </TabPanel>
     </ThemeProvider>
   )
 }