sts-sponsors team mailing list archive

[Peter Makowski <mp+441092@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:error-handling-MAASENG-1389 into maas-site-manager:main.

Commit message:
add @sentry/browser@5.30.0
- add @sentry/browser to yarn-upgrade-all ignore
- update version number to 0.1.0
- add release information (commit hash)
- log release info in the browser console


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441092

run the site locally
open developer tools
verify that the environment (development), version number and git hash are logged into the console
https://sentry.is.canonical.com/canonical/maas-site-manager/
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:error-handling-MAASENG-1389 into maas-site-manager:main.

diff --git a/.env b/.env
index 797df3b..5407c53 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,3 @@
 VITE_UI_PORT=8405
 VITE_API_URL=http://localhost:8000
+VITE_SENTRY_DSN="https://7236de0eb0354e2099b7efd7d310af1e@xxxxxxxxxxxxxxxxxxxxxxx//60";
diff --git a/frontend/package.json b/frontend/package.json
index 260119f..90fb0e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "maas-site-manager",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@canonical/react-components": "0.40.1",
+    "@sentry/browser": "5.30.0",
     "@tanstack/react-query": "4.29.1",
     "@tanstack/react-table": "8.8.5",
     "axios": "1.3.5",
@@ -88,5 +89,10 @@
       "prefer-alphabetical-dependencies": "error",
       "prefer-alphabetical-devDependencies": "error"
     }
+  },
+  "yarn-upgrade-all": {
+    "ignore": [
+      "@sentry/browser"
+    ]
   }
 }
diff --git a/frontend/src/api/handlers.ts b/frontend/src/api/handlers.ts
index 56dc656..af8f4a5 100644
--- a/frontend/src/api/handlers.ts
+++ b/frontend/src/api/handlers.ts
@@ -1,3 +1,5 @@
+import * as Sentry from "@sentry/browser";
+
 import api from "./api";
 import urls from "./urls";
 
@@ -45,8 +47,7 @@ export const getSites = async (params: GetSitesQueryParams, queryText?: string) 
     });
     return response.data;
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
+    Sentry.captureException(new Error("getSites failed", { cause: error }));
   }
 };
 
@@ -73,8 +74,7 @@ export const getTokens = async (params: GetTokensQueryParams) => {
     const response = await api.get(urls.tokens, { params });
     return response.data;
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
+    Sentry.captureException(new Error("getTokens failed", { cause: error }));
   }
 };
 
@@ -84,8 +84,7 @@ export const getEnrollmentRequests = async (params: GetEnrollmentRequestsQueryPa
     const response = await api.get(urls.enrollmentRequests, { params });
     return response.data;
   } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
+    Sentry.captureException(new Error("getEnrollmentRequests failed", { cause: error }));
   }
 };
 
diff --git a/frontend/src/components/DateTime/DateTime.tsx b/frontend/src/components/DateTime/DateTime.tsx
index 37c7a5a..f163ddf 100644
--- a/frontend/src/components/DateTime/DateTime.tsx
+++ b/frontend/src/components/DateTime/DateTime.tsx
@@ -1,11 +1,14 @@
+import * as Sentry from "@sentry/browser";
 import { withErrorBoundary } from "react-error-boundary";
 
 import { formatUTCDateString } from "@/utils";
-
 const DateTime = ({ value }: { value: string }) => <time dateTime={value}>{formatUTCDateString(value)}</time>;
 
 const DateTimeWithErrorBoundary = withErrorBoundary(DateTime, {
   fallback: <div>Invalid time value</div>,
+  onError(error) {
+    Sentry.captureException(new Error("Invalid time value", { cause: error }));
+  },
 });
 
 export default DateTimeWithErrorBoundary;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 785c02c..d10c7e9 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,7 +1,10 @@
 import * as React from "react";
 
+import * as Sentry from "@sentry/browser";
 import * as ReactDOM from "react-dom/client";
 
+import packageInfo from "../package.json";
+
 import App from "./App";
 import { isDev } from "./constants";
 
@@ -11,6 +14,25 @@ if (isDev) {
   await worker.start();
 }
 
+const environment = process.env.NODE_ENV;
+const version = packageInfo.version;
+const release = import.meta.env.VITE_APP_VERSION;
+// eslint-disable-next-line no-console
+console.log(`%cMAAS Site Manager \n${version} ${release}\n${environment}`, "color: #e95420; font-weight: bold;");
+
+// https://sentry.is.canonical.com/canonical/maas-site-manager/
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  environment,
+  release,
+  beforeSend: (event) => ({
+    ...event,
+    // send just the pathname of the current page excluding the origin
+    // this allows for grouping of errors by route
+    tags: { ...event.tags, url: window.location.pathname, version },
+  }),
+});
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index bfce73c..243c513 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/browser";
 import { parseISO } from "date-fns";
 import { getTimezoneOffset, format, utcToZonedTime } from "date-fns-tz";
 import * as countries from "i18n-iso-countries";
@@ -61,7 +62,6 @@ export const copyToClipboard = (text: string, callback?: (text: string) => void)
       callback && callback(text);
     })
     .catch((error) => {
-      // eslint-disable-next-line no-console
-      console.error("Error copying", error);
+      Sentry.captureException(new Error("copy to clipboard failed", { cause: error }));
     });
 };
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 61bc0d3..c56b42a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -6,8 +6,11 @@ import * as path from "path";
 
 dotenv.config({ path: "../.env" });
 
+const commitHash = require("child_process").execSync("git rev-parse --short HEAD").toString();
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: { "import.meta.env.VITE_APP_VERSION": JSON.stringify(commitHash) },
   plugins: [
     react(),
     AutoImport({
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0c1dc7e..872ed84 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1562,6 +1562,58 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728";
   integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
 
+"@sentry/browser@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.30.0.tgz#c28f49d551db3172080caef9f18791a7fd39e3b3";
+  integrity sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==
+  dependencies:
+    "@sentry/core" "5.30.0"
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/core@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.30.0.tgz#6b203664f69e75106ee8b5a2fe1d717379b331f3";
+  integrity sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==
+  dependencies:
+    "@sentry/hub" "5.30.0"
+    "@sentry/minimal" "5.30.0"
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/hub@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.30.0.tgz#2453be9b9cb903404366e198bd30c7ca74cdc100";
+  integrity sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==
+  dependencies:
+    "@sentry/types" "5.30.0"
+    "@sentry/utils" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/minimal@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.30.0.tgz#ce3d3a6a273428e0084adcb800bc12e72d34637b";
+  integrity sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==
+  dependencies:
+    "@sentry/hub" "5.30.0"
+    "@sentry/types" "5.30.0"
+    tslib "^1.9.3"
+
+"@sentry/types@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.30.0.tgz#19709bbe12a1a0115bc790b8942917da5636f402";
+  integrity sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw==
+
+"@sentry/utils@5.30.0":
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.30.0.tgz#9a5bd7ccff85ccfe7856d493bffa64cabc41e980";
+  integrity sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==
+  dependencies:
+    "@sentry/types" "5.30.0"
+    tslib "^1.9.3"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.22"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.22.tgz#2808d895e9c2722b20a622a9c8cb332f6720eb4a";
@@ -6091,7 +6143,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00";
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==