feat: debug instrumentation

Author: jaybuidl

web/.gitignore

@@ -22,9 +22,13 @@ parcel-bundle-reports
 .env.development.local
 .env.test.local
 .env.production.local
+
+# generated code
 src/hooks/contracts
 src/graphql
+generatedGitInfo.json
 
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

web/package.json

@@ -27,7 +27,7 @@
     "start": "scripts/runEnv.sh devnet 'yarn generate && parcel'",
     "start-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel'",
     "start-local": "scripts/runEnv.sh local 'yarn generate && parcel'",
-    "build": "yarn generate && parcel build",
+    "build": "node scripts/gitInfo.js && yarn generate && parcel build",
     "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && parcel build'",
     "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && parcel build'",
     "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'",

web/scripts/gitInfo.js

@@ -0,0 +1,40 @@
+/* eslint-disable max-len */
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+const packageJson = require("../package.json");
+
+const execSyncWrapper = (command) => {
+  let stdout = null;
+  try {
+    stdout = execSync(command).toString().trim();
+  } catch (error) {
+    console.error(error);
+  }
+  return stdout;
+};
+
+const main = () => {
+  let version = packageJson.version;
+  let gitCommitHash = execSyncWrapper("git rev-parse HEAD");
+  let gitCommitShortHash = execSyncWrapper("git rev-parse --short=7 HEAD");
+  let gitBranch = execSyncWrapper("git rev-parse --abbrev-ref HEAD");
+  let clean =
+    execSyncWrapper(`[ -z "$(git status --short  | ggrep -v '^??')" ] && echo clean || echo dirty`) === "clean";
+
+  const obj = {
+    version,
+    gitCommitHash,
+    gitCommitShortHash,
+    gitBranch,
+    clean,
+  };
+
+  const filePath = path.resolve("src", "generatedGitInfo.json");
+  const fileContents = JSON.stringify(obj, null, 2);
+
+  fs.writeFileSync(filePath, fileContents);
+  // console.log(`Wrote the following contents to ${filePath}\n${fileContents}`);
+};
+
+main();

web/scripts/runEnv.sh

@@ -17,6 +17,7 @@ if [[ ! " ${valid_deployments[@]} " =~ " ${deployment} " ]]; then
     exit 1
 fi
 
+node $SCRIPT_DIR/gitInfo.js
 . $SCRIPT_DIR/../.env.${deployment}.public
 . $SCRIPT_DIR/../.env.${deployment}
 eval "$commands"

web/src/app.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Routes, Route } from "react-router-dom";
+import { Route } from "react-router-dom";
+import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
 import Web3Provider from "context/Web3Provider";
@@ -19,7 +20,7 @@ const App: React.FC = () => {
       <QueryClientProvider>
         <RefetchOnBlock />
         <Web3Provider>
-          <Routes>
+          <SentryRoutes>
             <Route path="/" element={<Layout />}>
               <Route index element={<Home />} />
               <Route path="cases/*" element={<Cases />} />
@@ -28,7 +29,7 @@ const App: React.FC = () => {
               <Route path="disputeTemplate" element={<DisputeTemplateView />} />
               <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
             </Route>
-          </Routes>
+          </SentryRoutes>
         </Web3Provider>
       </QueryClientProvider>
     </StyledComponentsProvider>

web/src/consts/index.ts

@@ -1,7 +1,15 @@
+import { version, gitCommitHash, gitCommitShortHash, gitBranch, clean } from "../generatedGitInfo.json";
+
 export const ONE_BASIS_POINT = 10000n;
 
 export const KLEROS_CONTRACT_ADDRESS = "ethereum:0x93ed3fbe21207ec2e8f2d3c3de6e058cb73bc04d";
 export const WETH_CONTRACT_ADDRESS = "ethereum:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
 export const PNK_FAUCET_CONTRACT_ADDRESS = "0x05648Ee14941630a649082e0dA5cb80D29cC9002";
 
 export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";
+
+export const GIT_BRANCH = gitBranch;
+export const GIT_HASH = gitCommitShortHash;
+export const GIT_DIRTY = clean ? "" : "-dirty";
+export const GIT_URL = `https://github.com/kleros/kleros-v2/tree/${gitCommitHash}/web`;
+export const RELEASE_VERSION = version;

web/src/hooks/queries/usePhase.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSortitionModule } from "hooks/contracts/generated";
+import { isUndefined } from "utils/index";
+
+export const usePhase = () => {
+  const sortitionModule = getSortitionModule({});
+  const isEnabled = !isUndefined(sortitionModule);
+  return useQuery({
+    queryKey: [`Phase`],
+    enabled: isEnabled,
+    staleTime: 20 * 1000, // 20 seconds
+    queryFn: async () => {
+      if (!sortitionModule) return;
+      return await sortitionModule.read.phase();
+    },
+  });
+};

web/src/index.tsx

@@ -1,29 +1,16 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
 import App from "./app";
 import Modal from "react-modal";
-import { HashRouter as Router } from "react-router-dom";
-
-Sentry.init({
-  dsn: process.env.REACT_APP_SENTRY_ENDPOINT,
-  environment: process.env.REACT_APP_CONTEXT,
-  integrations: [new BrowserTracing()],
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-});
+import { HashRouter } from "react-router-dom";
 
 const container = document.getElementById("app");
 Modal.setAppElement(container!);
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
-    <Router>
+    <HashRouter>
       <App />
-    </Router>
+    </HashRouter>
   </React.StrictMode>
 );

web/src/layout/Footer/index.tsx

@@ -36,12 +36,7 @@ const Container = styled.div`
 `;
 
 const SecuredByKleros: React.FC = () => (
-  <a
-    className="secured-by-kleros"
-    href="https://kleros.io"
-    target="_blank"
-    rel="noreferrer"
-  >
+  <a className="secured-by-kleros" href="https://kleros.io" target="_blank" rel="noreferrer">
     <SecuredByKlerosLogo />
   </a>
 );

web/src/layout/Header/navbar/Debug.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_URL, RELEASE_VERSION } from "../../../consts";
+import { usePhase } from "~src/hooks/queries/usePhase";
+
+const Container = styled.div`
+  label,
+  a {
+    font-family: "Roboto Mono", monospace;
+    line-height: 10px;
+    font-size: 10px;
+    color: ${({ theme }) => theme.stroke};
+  }
+`;
+
+const Version = () => (
+  <label>
+    v{RELEASE_VERSION}{" "}
+    <a href={GIT_URL} target="_blank" rel="noreferrer">
+      #{GIT_HASH}
+    </a>{" "}
+    {GIT_BRANCH}
+    {GIT_DIRTY && " dirty"}
+  </label>
+);
+
+const Phase = () => {
+  const { data: phase } = usePhase();
+  return <label>phase: {phase}</label>;
+};
+
+const Debug: React.FC = () => {
+  return (
+    <Container>
+      <Version />
+      <label>{", "}</label>
+      <Phase />
+    </Container>
+  );
+};
+
+export default Debug;

web/src/layout/Header/navbar/index.tsx

@@ -8,6 +8,7 @@ import { useOpenContext } from "../index";
 import DappList from "./DappList";
 import Explore from "./Explore";
 import Menu from "./Menu";
+import Debug from "./Debug";
 
 const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
@@ -54,6 +55,8 @@ const NavBar: React.FC = () => {
       <ConnectWallet />
       <hr />
       <Menu />
+      <br />
+      <Debug />
     </Container>
   );
 };

web/src/utils/sentry.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import * as Sentry from "@sentry/react";
+import { Routes, createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom";
+import { GIT_DIRTY, GIT_HASH, RELEASE_VERSION } from "../consts";
+
+Sentry.init({
+  dsn: process.env.REACT_APP_SENTRY_ENDPOINT,
+  environment: process.env.REACT_APP_CONTEXT,
+  release: `court-v2@${RELEASE_VERSION}-${GIT_HASH}${GIT_DIRTY}`,
+  integrations: [
+    new Sentry.BrowserProfilingIntegration(),
+    new Sentry.BrowserTracing({
+      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+        React.useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes
+      ),
+    }),
+  ],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost", /^https:\/\/.*--kleros-v2\.netlify\.app/],
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // results in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+});
+
+export const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);