Added Sentry

README.md

@@ -85,6 +85,7 @@ docker run -p 80:8080 beacon
 | `VITE_HCAPTCHA_SITE_KEY`                      | `CADDY_HCAPTCHA_SITE_KEY`                | The hCaptcha site key          | Required ( :warning: **Must be manually set** :warning:; see [hCaptcha dashboard](https://dashboard.hcaptcha.com/sites)) |
 | `VITE_SUPABASE_URL`                           | `CADDY_SUPABASE_URL`                     | The absolute Supabase API URL  | Required (Automatically set by the setup script)                                                                         |
 | `VITE_SUPABASE_ANON_KEY`                      | `CADDY_SUPABASE_ANON_KEY`                | The Supabase API anonymous key | Required (Automatically set by the setup script)                                                                         |
+| `VITE_SENTRY_DSN`                             | `CADDY_SENTRY_DSN`                       | The Sentry DSN                 | Optional (Automatically set by the setup script)                                                                         |
 
 ### Technologies
 

capacitor.config.ts

@@ -7,7 +7,7 @@ import {CapacitorConfig} from "@capacitor/cli";
 
 const config: CapacitorConfig = {
   appId: "io.ionic.starter",
-  appName: "beacon",
+  appName: "Beacon",
   webDir: "dist",
   server: {
     androidScheme: "https",

index.html

@@ -30,6 +30,8 @@
       content="black-translucent"
     />
 
+    <meta name="mobile-web-app-capable" content="yes" />
+
     <% if (!isDev) { %>
     <script type="module" crossorigin src="/runtime-vars.js"></script>
     <% } %>

ionic.config.json

@@ -1,7 +1,7 @@
 {
-  "name": "beacon",
+  "name": "Beacon",
   "integrations": {
     "capacitor": {}
   },
   "type": "react-vite"
-}
+}

package.json

@@ -28,6 +28,8 @@
     "@ionic/react": "^8.1.0",
     "@ionic/react-router": "^8.1.0",
     "@ionic/storage": "^4.0.0",
+    "@sentry/browser": "^8.4.0",
+    "@supabase/sentry-js-integration": "^0.2.0-beta.4",
     "@supabase/supabase-js": "^2.43.1",
     "@types/humanize-duration": "^3.27.4",
     "@types/leaflet": "^1.9.12",

public/runtime-vars.js

@@ -2,4 +2,5 @@ window.__VITE_VARS__ = {
   VITE_SUPABASE_URL: {{env "CADDY_SUPABASE_URL" | mustToRawJson}},
   VITE_SUPABASE_ANON_KEY: {{env "CADDY_SUPABASE_ANON_KEY" | mustToRawJson}},
   VITE_HCAPTCHA_SITE_KEY: {{env "CADDY_HCAPTCHA_SITE_KEY" | mustToRawJson}},
+  VITE_SENTRY_DSN: {{env "CADDY_SENTRY_DSN" | mustToRawJson}},
 };

scripts/lib.ts

@@ -189,7 +189,8 @@ export const writeEnvs = async () => {
       frontendEnv,
       `VITE_HCAPTCHA_SITE_KEY = "" # Required!
 VITE_SUPABASE_URL = ${JSON.stringify(status.apiUrl)}
-VITE_SUPABASE_ANON_KEY = ${JSON.stringify(status.anonKey)}`,
+VITE_SUPABASE_ANON_KEY = ${JSON.stringify(status.anonKey)}
+VITE_SENTRY_DSN = "" # Required!`,
       {
         flag: envFlags,
       },

src/env.d.ts

@@ -13,6 +13,11 @@ interface ImportMetaEnv {
    * The Supabase API key
    */
   readonly VITE_SUPABASE_ANON_KEY: string;
+
+  /**
+   * The Sentry DSN
+   */
+  readonly VITE_SENTRY_DSN?: string;
 }
 
 interface ImportMeta {

src/lib/vars.ts

@@ -39,14 +39,19 @@ const SUPABASE_URL = RUNTIME_VARS.VITE_SUPABASE_URL;
  */
 const SUPABASE_ANON_KEY = RUNTIME_VARS.VITE_SUPABASE_ANON_KEY;
 
+/**
+ * Sentry DSN
+ */
+const SENTRY_DSN = RUNTIME_VARS.VITE_SENTRY_DSN;
+
 // Validate variables
 const vars = {
-  VERSION,
-  GIT_COMMIT,
   GIT_BRANCH,
+  GIT_COMMIT,
   HCAPTCHA_SITE_KEY,
-  SUPABASE_URL,
   SUPABASE_ANON_KEY,
+  SUPABASE_URL,
+  VERSION,
 };
 
 const missing = [];
@@ -65,6 +70,7 @@ export {
   GIT_BRANCH,
   GIT_COMMIT,
   HCAPTCHA_SITE_KEY,
+  SENTRY_DSN,
   SUPABASE_ANON_KEY,
   SUPABASE_URL,
   VERSION,

src/main.tsx

@@ -21,10 +21,38 @@ import "~/lib/geolocation";
 
 import {IonApp, isPlatform, setupIonicReact} from "@ionic/react";
 import {IonReactRouter} from "@ionic/react-router";
+import {browserTracingIntegration, init as sentryInit} from "@sentry/browser";
+import {SupabaseIntegration} from "@supabase/sentry-js-integration";
+import {SupabaseClient} from "@supabase/supabase-js";
 import {StrictMode} from "react";
 import {createRoot} from "react-dom/client";
 
 import {App} from "~/app";
+import {SENTRY_DSN, SUPABASE_URL} from "~/lib/vars";
+
+// Setup Sentry
+if (SENTRY_DSN !== undefined) {
+  sentryInit({
+    dsn: SENTRY_DSN,
+    integrations: [
+      new SupabaseIntegration(SupabaseClient, {
+        tracing: true,
+        breadcrumbs: true,
+        errors: true,
+      }),
+      browserTracingIntegration({
+        /**
+         * Callback to determine if a request should create a span
+         * @param url Request URL
+         * @returns Whether a span should be created
+         */
+        shouldCreateSpanForRequest: url =>
+          !url.startsWith(`${SUPABASE_URL}/rest`),
+      }),
+    ],
+    tracesSampleRate: 1,
+  });
+}
 
 // Setup React
 const container = document.getElementById("root");

src/pages/index.tsx

@@ -179,7 +179,6 @@ export const Index: FC = () => {
             className="my-2"
             color="dark"
             fill="outline"
-            target="_blank"
             href="/terms-and-conditions"
           >
             <IonIcon
@@ -194,7 +193,6 @@ export const Index: FC = () => {
             className="my-2"
             color="dark"
             fill="outline"
-            target="_blank"
             href="/privacy-policy"
           >
             <IonIcon slot="start" ios={shieldOutline} md={shieldSharp} />

src/pages/settings.tsx

@@ -350,11 +350,11 @@ export const Settings: FC = () => {
               <IonLabel>Bug report/feature request</IonLabel>
             </IonItem>
 
-            <IonItem target="_blank" href="/terms-and-conditions">
+            <IonItem href="/terms-and-conditions">
               <IonLabel>Terms and Conditions</IonLabel>
             </IonItem>
 
-            <IonItem target="_blank" href="/privacy-policy">
+            <IonItem href="/privacy-policy">
               <IonLabel>Privacy Policy</IonLabel>
             </IonItem>
           </IonItemGroup>