feat: add Sentry

Signed-off-by: Guillaume Hivert <[email protected]>
ghivert · May 14, 2024 · 55127fc · 55127fc
1 parent 768f358
commit 55127fc
Show file tree

Hide file tree

Showing 7 changed files with 689 additions and 10 deletions.
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -18,6 +18,20 @@
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#292d3e" />
+    <script src="https://js-de.sentry-cdn.com/2798874d6ff29bdb35b2478129b5563d.min.js" crossorigin="anonymous"></script>
+    <script>
+      if (typeof Sentry !== 'undefined') {
+        Sentry.onLoad(function () {
+          Sentry.init({
+            // Performance Monitoring
+            tracesSampleRate: 1.0, // Capture 100% of the transactions
+            // Session Replay
+            replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+            replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+          })
+        })
+      }
+    </script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -9,13 +9,16 @@
   },
   "dependencies": {
     "@gleam-lang/highlight.js-gleam": "^1.5.0",
+    "@sentry/browser": "^8.0.0",
     "firebase": "^10.10.0",
     "highlight.js": "^11.9.0",
     "html-encoder-decoder": "^1.3.10",
     "showdown": "^2.1.0"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^2.16.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "dotenv": "^16.4.5",
     "prettier": "^3.2.5",
     "ts-gleam": "^1.0.1",
     "typescript": "^5.4.2",

diff --git a/apps/frontend/src/config.ffi.mjs b/apps/frontend/src/config.ffi.mjs
@@ -11,3 +11,10 @@ export function scrollTo(id) {
   const offset = elemRect.top - bodyRect.top - (navbarRect?.height ?? 0) - 12
   window.scrollTo({ top: offset, behavior: 'smooth' })
 }
+
+export function captureMessage(content) {
+  if (is_dev()) return content
+  if (typeof Sentry !== 'undefined' && Sentry?.captureMessage && typeof Sentry.captureMessage === 'function')
+    Sentry.captureMessage(content)
+  return content
+}
diff --git a/apps/frontend/src/frontend.gleam b/apps/frontend/src/frontend.gleam
@@ -24,6 +24,9 @@ fn is_dev() -> Bool
 @external(javascript, "./config.ffi.mjs", "scrollTo")
 fn scroll_to_element(id: String) -> Nil
 
+@external(javascript, "./config.ffi.mjs", "captureMessage")
+fn capture_message(content: String) -> String
+
 pub fn main() {
   let init = fn(_) { #(model.init(), effect.none()) }
 
@@ -117,6 +120,7 @@ fn display_toast(
   search_results
   |> result.map_error(fn(error) {
     toast_error.describe_http_error(error)
+    |> option.map(capture_message)
     |> option.map(toast.error)
   })
   |> result.unwrap_error(option.None)

diff --git a/apps/frontend/src/toast/error.gleam b/apps/frontend/src/toast/error.gleam
@@ -1,6 +1,5 @@
 import gleam/dynamic
 import gleam/int
-import gleam/io
 import gleam/json
 import gleam/list
 import gleam/option.{Some}
@@ -37,7 +36,7 @@ pub fn describe_json_error(error: json.DecodeError) {
 }
 
 pub fn describe_http_error(error: http.HttpError) {
-  case io.debug(error) {
+  case error {
     http.BadUrl(url) -> Some("Bad URL: " <> url)
     http.InternalServerError(error) ->
       Some({ "Internal server error. Please try again later. " <> error })

diff --git a/apps/frontend/vite.config.js b/apps/frontend/vite.config.js
@@ -1,9 +1,18 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
+import 'dotenv/config'
 import gleam from 'vite-gleam'
 
 export default {
-  plugins: [gleam()],
+  plugins: [
+    gleam(),
+    sentryVitePlugin({
+      org: process.env.SENTRY_ORG,
+      project: process.env.SENTRY_PROJECT,
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    }),
+  ],
   build: {
-    minify: false,
+    sourcemap: true,
   },
   rollupOptions: {
     output: {