Add Sentry to javascript browser code (#266)

* Add Sentry to javascript browser code

* Add runtime tag to be able to filter in Sentry GUI

* Add runtime tag to elixir sentry

* Add environment tag on sentry js

* Add sentry env vars to runtime

ansible/playbooks/deployment.yaml

@@ -92,6 +92,8 @@
       enable_gateway_data: "{{ lookup('ansible.builtin.env', 'ENABLE_GATEWAY_DATA') }}"
       newrelic_key: "{{ lookup('ansible.builtin.env', 'NEWRELIC_KEY') }}"
       newrelic_app_name: "{{ lookup('ansible.builtin.env', 'NEWRELIC_APP_NAME') }}"
+      sentry_env: "{{ lookup('ansible.builtin.env', 'SENTRY_ENV') }}"
+      sentry_dsn: "{{ lookup('ansible.builtin.env', 'SENTRY_DSN') }}"
       enable_listener: "true"
       enable_updater: "true"
       enable_fetcher: "true"

ansible/playbooks/templates/.env.j2

@@ -14,6 +14,8 @@ ENABLE_LISTENER={{ enable_listener }}
 ENABLE_GATEWAY_DATA={{ enable_gateway_data }}
 NEWRELIC_KEY={{ newrelic_key }}
 NEWRELIC_APP_NAME={{ newrelic_app_name }}
+SENTRY_DSN={{ sentry_dsn }}
+SENTRY_ENV={{ sentry_env }}
 ENABLE_FETCHER={{ enable_fetcher }}
 ENABLE_LISTENER={{ enable_listener }}
 ENABLE_UPDATER={{ enable_updater }}

assets/js/sentry.js

@@ -0,0 +1,25 @@
+import * as Sentry from "@sentry/browser";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+
+  environment: process.env.SENTRY_ENV,
+
+  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+
+  // 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:\/\/(.*)madaraexplorer\.com/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+});
+
+Sentry.setTag("runtime", "javascript");
+Sentry.setTag("environment", process.env.SENTRY_ENV);

assets/package.json

@@ -14,6 +14,7 @@
     "esbuild-plugin-wasm": "1.0.0"
   },
   "dependencies": {
+    "@sentry/browser": "^7.71.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",

config/prod.exs

@@ -23,7 +23,8 @@ config :sentry,
   enable_source_code_context: true,
   root_source_code_path: File.cwd!(),
   tags: %{
-    env: System.get_env("SENTRY_ENV")
+    env: System.get_env("SENTRY_ENV"),
+    runtime: "elixir"
   },
   included_environments: [
     if(System.get_env("SENTRY_ENV") == "production", do: :production, else: :testing)