Re-wrote all the requests to use a custom, reusable hook

src/components/Form/Card.tsx

@@ -1,31 +1,31 @@
 import styled from 'styled-components';
 
-// import Heading from 'components/Form/Heading';
+import ErrorBoundary from 'components/misc/ErrorBoundary';
+import Heading from 'components/Form/Heading';
 import colors from 'styles/colors';
 
-export const Card = styled.section`
+export const StyledCard = styled.section`
   background: ${colors.backgroundLighter};
   box-shadow: 4px 4px 0px ${colors.bgShadowColor};
   border-radius: 8px;
   padding: 1rem;
 `;
 
-// interface CardProps {
-//   children: React.ReactNode;
-//   heading?: string,
-// };
+interface CardProps {
+  children: React.ReactNode;
+  heading?: string,
+};
 
-// const Card = (props: CardProps): JSX.Element => {
-//   const { children, heading } = props;
-//   return (
-//     <StyledCard>
-//       { heading &&
-//         <Heading as="h3" size="small" align="left" color={colors.primary}>{heading}</Heading>
-//       }
-//       {children}
-//     </StyledCard>
-//   );
-// }
-
-export default Card;
+export const Card = (props: CardProps): JSX.Element => {
+  const { children, heading } = props;
+  return (
+    <ErrorBoundary title={heading}>
+      <StyledCard>
+        { heading && <Heading as="h3" align="left" color={colors.primary}>{heading}</Heading> }
+        {children}
+      </StyledCard>
+    </ErrorBoundary>
+  );
+}
 
+export default StyledCard;

src/components/Form/Row.tsx

@@ -6,7 +6,7 @@ import Heading from 'components/Form/Heading';
 export interface RowProps {
   lbl: string,
   val: string,
-  key?: string,
+  // key?: string,
   children?: ReactNode,
   rowList?: RowProps[],
   title?: string,
@@ -77,10 +77,10 @@ const copyToClipboard = (text: string) => {
 }
 
 export const ExpandableRow = (props: RowProps) => {
-  const { lbl, val, key, title, rowList } = props;
+  const { lbl, val, title, rowList } = props;
   return (
     <Details>
-      <StyledExpandableRow key={key}>
+      <StyledExpandableRow key={`${lbl}-${val}`}>
         <span className="lbl" title={title}>{lbl}</span>
         <span className="val" title={val}>{val}</span>
       </StyledExpandableRow>
@@ -88,7 +88,7 @@ export const ExpandableRow = (props: RowProps) => {
         <SubRowList>
           { rowList?.map((row: RowProps, index: number) => {
             return (
-              <SubRow key={row.key || `${row.lbl}-${index}`}>
+              <SubRow key={`${row.lbl}-${index}`}>
                 <span className="lbl" title={row.title}>{row.lbl}</span>
                 <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
@@ -109,7 +109,7 @@ export const ListRow = (props: { list: string[], title: string }) => {
     <Heading as="h4" size="small" align="left" color={colors.primary}>{title}</Heading>
     { list.map((entry: string, index: number) => {
       return (
-      <Row lbl="" val="" key={`${title.toLocaleLowerCase()}-${index}`}>
+      <Row lbl="" val="" key={`${entry}-${title.toLocaleLowerCase()}-${index}`}>
         <span>{ entry }</span>
       </Row>
       )}
@@ -119,10 +119,10 @@ export const ListRow = (props: { list: string[], title: string }) => {
 }
 
 const Row = (props: RowProps) => {
-  const { lbl, val, key, title, children } = props;
-  if (children) return <StyledRow key={key}>{children}</StyledRow>;
+  const { lbl, val, title, children } = props;
+  if (children) return <StyledRow key={`${lbl}-${val}`}>{children}</StyledRow>;
   return (
-  <StyledRow key={key}>
+  <StyledRow key={`${lbl}-${val}`}>
     { lbl && <span className="lbl" title={title}>{lbl}</span> }
     <span className="val" title={val} onClick={() => copyToClipboard(val)}>
       {formatValue(val)}

src/components/Results/RobotsTxt.tsx

@@ -23,7 +23,7 @@ const RobotsTxtCard = (props: { robotTxt: RowProps[] }): JSX.Element => {
       {
         props.robotTxt.map((row: RowProps, index: number) => {
           return (
-            <Row key={row.key || `${row.lbl}-${index}`} lbl={row.lbl} val={row.val} />
+            <Row key={`${row.lbl}-${index}`} lbl={row.lbl} val={row.val} />
           )
         })
       }

src/components/misc/FancyBackground.tsx

@@ -125,14 +125,17 @@ const FancyBackground = (): JSX.Element => {
     var time2 = performance.now();
   
     // Update UI
-    document.getElementsByClassName('dead')[0].textContent = this.deathCount;
-    document.getElementsByClassName('alive')[0].textContent =
-      this.particles.length;
-    document.getElementsByClassName('fps')[0].textContent = Math.floor(
-      1000 / (time2 - time1)
-    ).toString();
-    document.getElementsByClassName('drawn')[0].textContent =
-      this.drawnInLastFrame;
+    const elemDead = document.getElementsByClassName('dead');
+    if (elemDead && elemDead.length > 0) elemDead[0].textContent = this.deathCount;
+
+    const elemAlive = document.getElementsByClassName('alive');
+    if (elemAlive && elemAlive.length > 0) elemAlive[0].textContent = this.particles.length;
+    
+    const elemFPS = document.getElementsByClassName('fps');
+    if (elemFPS && elemFPS.length > 0) elemFPS[0].textContent = Math.round(1000 / (time2 - time1)).toString();
+    
+    const elemDrawn = document.getElementsByClassName('drawn');
+    if (elemDrawn && elemDrawn.length > 0) elemDrawn[0].textContent = this.drawnInLastFrame;
   };
   App.birth = function () {
     var x, y;

src/components/misc/ProgressBar.tsx

@@ -140,6 +140,7 @@ const jobNames = [
   'headers',
   'lighthouse',
   'location',
+  'shodan',
   // 'server-info',
   'whois',
 ] as const;
@@ -307,6 +308,7 @@ const ProgressLoader = (props: { loadStatus: LoadingJob[] }): JSX.Element => {
           color2={barColors[state][1]} 
           title={`${state} (${Math.round(percentages[state])}%)`}
           width={percentages[state]}
+          key={`progress-bar-${state}`}
         />
       )}
     </ProgressBarContainer>