feat: add error diagnostics

Author: debater-coder

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "1.7.1-beta",
+  "version": "1.7.2-beta",
   "scripts": {
     "dev": "npm-run-all --parallel dev:*",
     "dev:run": "FORCE_COLOR=1 vite",
@@ -26,6 +26,7 @@
     "@emotion/styled": "^11.8.1",
     "@fontsource/poppins": "^4.5.8",
     "@formspree/react": "^2.4.1",
+    "@highlight-run/react": "^3.2.1",
     "@nikolovlazar/chakra-ui-prose": "^1.2.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@tanstack/query-sync-storage-persister": "^4.0.10",
@@ -37,6 +38,7 @@
     "dayzed": "^3.2.3",
     "dompurify": "^2.4.0",
     "framer-motion": "^10.12.18",
+    "highlight.run": "^7.4.0",
     "immer": "^9.0.19",
     "jsbarcode": "^3.11.5",
     "linkify-html": "^4.0.2",

apps/client/src/main.tsx

@@ -15,12 +15,22 @@ import { createRouter } from "./createRouter";
 import { persister, queryClient } from "./createQueryClient";
 import { authActions, useAuthStore } from "./stores/auth";
 import { useSettingsStore } from "./stores/settings";
+import { H } from "highlight.run";
+import { version } from "../package.json";
 
 // Redirect to new domain if using old domain
 if (window.location.host === "timetabl.vercel.app") {
   window.location.href = "https://www.timetabl.app";
 }
 
+// Initialise analytics if consented
+if (localStorage.getItem("consentedToWelcomeMessage")) {
+  H.init("zg092lg9", {
+    enableStrictPrivacy: true,
+    version,
+  });
+}
+
 // ===========
 // RENDER ROOT
 // ===========

apps/client/src/routes/Main/Main.tsx

@@ -1,6 +1,19 @@
 import { useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { Flex, useBreakpointValue } from "@chakra-ui/react";
+import {
+  Flex,
+  useBreakpointValue,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Heading,
+} from "@chakra-ui/react";
 import Sidebar from "../../components/Sidebar";
 import { BottomNav } from "../../components/BottomNav";
 import { useIsLoggedIn } from "../../stores/auth";
@@ -9,34 +22,75 @@ export default function Main() {
   const navigate = useNavigate();
   const loggedIn = useIsLoggedIn();
   const isLargerThanMd = useBreakpointValue({ base: false, md: true });
+  const { isOpen, onOpen } = useDisclosure();
 
   useEffect(() => {
     if (!loggedIn) {
       navigate("/");
     }
   }, [loggedIn, navigate]);
 
+  useEffect(() => {
+    if (!localStorage.getItem("consentedToWelcomeMessage")) {
+      onOpen();
+    }
+  });
+
+  const consent = () => {
+    localStorage.setItem("consentedToWelcomeMessage", "true");
+    window.location.reload(); // We reload instead of just closing the dialog so that the analytics can be initialised
+  };
+
   return (
-    <Flex
-      align={"center"}
-      width={"full"}
-      height={"full"}
-      direction={{ base: "column-reverse", md: "row" }}
-    >
-      {isLargerThanMd ? <Sidebar /> : <BottomNav />}
+    <>
       <Flex
-        direction={"column"}
         align={"center"}
         width={"full"}
         height={"full"}
-        maxH={{ base: "calc(100% - 64px)", md: "100%" }}
-        mb={{ base: "64px", md: 0 }}
-        maxW={{ base: "100%", md: "calc(100% - 100px)" }}
-        ml={{ base: 0, md: "100px" }}
-        overflowY={"auto"}
+        direction={{ base: "column-reverse", md: "row" }}
       >
-        <Outlet />
+        {isLargerThanMd ? <Sidebar /> : <BottomNav />}
+        <Flex
+          direction={"column"}
+          align={"center"}
+          width={"full"}
+          height={"full"}
+          maxH={{ base: "calc(100% - 64px)", md: "100%" }}
+          mb={{ base: "64px", md: 0 }}
+          maxW={{ base: "100%", md: "calc(100% - 100px)" }}
+          ml={{ base: 0, md: "100px" }}
+          overflowY={"auto"}
+        >
+          <Outlet />
+        </Flex>
+        <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={consent}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader fontFamily="Poppins, sans-serif">
+              Welcome to Timetabl!
+            </ModalHeader>
+            <ModalCloseButton />
+            <ModalBody pb={6}>
+              <Heading size="xs" pb={4} fontWeight="regular">
+                By continuing, you consent to Timetabl sending anonymous error
+                diagnostics and usage metrics.
+              </Heading>
+              Timetabl is a blazing fast, offline-enabled, installable timetable
+              app for Sydney Boys High School, made by Hamzah Ahmed. It is
+              currently in beta, meaning that some features may not work as
+              expected and there may be bugs. It is in active development, with
+              new features being added and bugs being fixed regularly. If there
+              is a feature you&apos;d like to see, or a bug that needs to be
+              fixed, send feedback by clicking on Feedback in the left panel on
+              desktop or by clicking on More {">"} Feedback on mobile.
+            </ModalBody>
+
+            <ModalFooter>
+              <Button onClick={consent}>Continue</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
       </Flex>
-    </Flex>
+    </>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timetabl",
-  "version": "1.7.1-beta",
+  "version": "1.7.2-beta",
   "author": "Hamzah Ahmed",
   "license": "MIT",
   "bugs": {