chore: Migrate from raven-js to sentry browser (#5370)

* chore: Migrate from raven-js to sentry browser

* Update templates/blog/article.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update templates/blog/index.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* fix: Use correct values for Sentry config

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: steverydz

package.json

@@ -10,10 +10,9 @@
     "test-js-all": "yarn run lint-js && yarn run test-js",
     "test-python": "yarn run lint-python && FLASK_DEBUG=0 python3 -m unittest discover tests",
     "test-python-job": "SECRET_KEY=insecure_secret_key coverage run  --source=. -m unittest discover tests",
-    "build": "yarn run copy-3rd-party-js && vite build",
-    "copy-3rd-party-js": "mkdir -p static/js/modules && cp node_modules/raven-js/dist/raven.min.js static/js/modules",
+    "build": "yarn run vite build",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
-    "start": "concurrently --raw 'yarn run copy-3rd-party-js' 'yarn run watch' 'yarn run serve'",
+    "start": "concurrently --raw 'yarn run watch' 'yarn run serve'",
     "watch": "vite",
     "clean": "rm -rf node_modules yarn-error.log css static/js/dist static/js/modules static/css *.log *.sqlite _site/ build/ .jekyll-metadata .bundle cache.tmp",
     "percy": "node_modules/.bin/percy snapshot snapshots.yml"
@@ -33,8 +32,8 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
+    "@sentry/browser": "10.12.0",
     "@sentry/react": "7.120.2",
-    "@sentry/tracing": "7.114.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -67,7 +66,6 @@
     "prettier": "3.4.2",
     "prop-types": "15.8.1",
     "randomstring": "1.3.0",
-    "raven-js": "3.27.2",
     "react": "19.1.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",

static/js/base/base.ts

@@ -1,3 +1,4 @@
 import "./navigation";
 import "./ga";
 import "./contactForm";
+import "./sentry";

static/js/base/sentry.ts

@@ -0,0 +1,15 @@
+import * as Sentry from "@sentry/browser";
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  allowUrls: ["staging.snapcraft.io/static/js", "snapcraft.io/static/js/"],
+  denyUrls: [
+    "staging.snapcraft.io/static/js/modules",
+    "snapcraft.io/static/js/modules",
+  ],
+  dsn: window.SENTRY_DSN,
+  environment: window.ENVIRONMENT,
+  ignoreErrors: ["AbortError"],
+  release: window.COMMIT_ID,
+});

static/js/global.d.ts

@@ -27,6 +27,9 @@ declare interface Window {
   SENTRY_DSN: string;
   CSRF_TOKEN: string;
   API_URL: string;
+  Sentry: Record<string, unknown>;
+  COMMIT_ID: string;
+  ENVIRONMENT: string;
 }
 
 declare module "@canonical/cookie-policy";

static/js/publisher/brand-store.tsx

@@ -1,13 +1,12 @@
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "react-query";
 import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/browser";
 import BrandStoreRoot from "./routes/brand-store-root";
 import { Provider as JotaiProvider } from "jotai";
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
-  integrations: [new BrowserTracing()],
+  integrations: [Sentry.browserTracingIntegration()],
   tracesSampleRate: 1.0,
 });
 

templates/_base-layout.html

@@ -27,20 +27,6 @@
       {{ vite_dev_tools() }}
     {% endif %}
 
-    {% block scripts_modules %}{% endblock %}
-    <script src="{{ static_url('js/modules/raven.min.js') }}" defer></script>
-    <script>
-      window.addEventListener("DOMContentLoaded", function() {
-        Raven.config('{{ SENTRY_DSN }}', {
-          whitelistUrls: ['staging.snapcraft.io/static/js', 'snapcraft.io/static/js/'],
-          ignoreUrls: ['staging.snapcraft.io/static/js/modules', 'snapcraft.io/static/js/modules'],
-          ignoreErrors: ['AbortError'],
-          release: '{{ COMMIT_ID }}',
-          environment: '{{ ENVIRONMENT }}'
-        }).install();
-      });
-    </script>
-
     {{ vite_import('static/js/base/base.ts') }}
     {% block scripts_includes %}{% endblock %}
     <script src="https://assets.ubuntu.com/v1/703e23c9-lazysizes+noscript+native-loading.5.1.2.min.js" defer></script>
@@ -100,6 +86,12 @@
 
     {% block scripts %}{% endblock %}
 
+    <script>
+      window.COMMIT_ID = "{{ COMMIT_ID }}";
+      window.ENVIRONMENT = "{{ ENVIRONMENT }}";
+      window.SENTRY_DSN = "{{ SENTRY_DSN }}";
+    </script>
+
     <script type="application/ld+json">
       {
         "@context": "http://schema.org/",

templates/about/publish.html

@@ -198,10 +198,17 @@ <h3 class="p-heading--5">Trave CI, Circle CI and GitHub Actions are all supporte
 {% block scripts %}
 <script>
   window.addEventListener("DOMContentLoaded", function () {
-    Raven.context(function () {
+    try {
       snapcraft.about.initFSFLanguageSelect(document.querySelector('.js-fsf-language-select'));
+    } catch(e) {
+      Sentry.captureException(e);
+    }
+
+    try {
       snapcraft.about.initExpandableArea();
-    });
+    } catch(e) {
+      Sentry.captureException(e);
+    }
   });
 </script>
 {% endblock %}

templates/blog/article.html

@@ -116,13 +116,19 @@ <h5>
 {% block scripts %}
   <script>
     window.addEventListener("DOMContentLoaded", function() {
-      Raven.context(function () {
+      try {
         {% if is_in_series %}
         snapcraft.blog.seriesPosts('[data-js="blog-series"]', '#blog-series-item-template');
         {% endif %}
+      } catch(e) {
+        Sentry.captureException(e);
+      }
 
+      try {
         snapcraft.public.blog.newsletter();
-      });
+      } catch(e) {
+        Sentry.captureException(e);
+      }
     });
   </script>
 {% endblock %}

templates/blog/index.html

@@ -150,17 +150,23 @@ <h5 class="p-notification__title">Success</h5>
 {% block scripts %}
   <script>
     window.addEventListener("DOMContentLoaded", function() {
-      Raven.context(function () {
+      try {
         {% if categories %}
           var filter = document.getElementById('filter');
           var filterForm = document.querySelector('[data-js="filterForm"]');
           filter.addEventListener('change', function(e) {
             filterForm.submit();
           });
         {% endif %}
+      } catch(e) {
+        Sentry.captureException(e);
+      }
 
+      try {
         snapcraft.public.blog.newsletter();
-      });
+      } catch(e) {
+        Sentry.captureException(e);
+      }
     });
   </script>
 {% endblock %}

templates/docs/document.html

@@ -163,7 +163,7 @@ <h4 class="p-table-of-contents__header">On this page</h4>
 {% block scripts %}
 <script>
   window.addEventListener("DOMContentLoaded", function() {
-    Raven.context(function() {
+    try {
        // Based on Vanilla side navigation example
 // Should be moved out from the template as part of a given project JS bundle
 
@@ -326,7 +326,9 @@ <h4 class="p-table-of-contents__header">On this page</h4>
     });
   });
 })();
-    });
+    } catch(e) {
+      Sentry.captureException(e);
+    }
   });
 </script>
 {% endblock %}