chore: Replace sentry with faro in web

web/package.json

@@ -15,12 +15,14 @@
     "@dzcode.io/data": "*",
     "@dzcode.io/models": "*",
     "@dzcode.io/utils": "*",
-    "@sentry/react": "^8.27.0",
+    "@grafana/faro-react": "^1.17.2",
+    "@grafana/faro-web-tracing": "^1.17.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5"
   },
   "devDependencies": {
+    "@grafana/faro-webpack-plugin": "^0.5.1",
     "@loadable/component": "^5.16.4",
     "@reduxjs/toolkit": "^2.2.6",
     "@rsbuild/core": "1.0.9",
@@ -73,7 +75,6 @@
     "generate:bundle-info": "tsx ../packages/tooling/bundle-info.ts",
     "generate:htmls": "npx tsx src/_build/gen-multiple-htmls.ts",
     "generate:robots-txt": "npx tsx src/_build/gen-robots-txt.ts",
-    "generate:sentry-release": "tsx ../packages/tooling/sentry-release.ts web bundle",
     "generate:sitemap": "npx tsx src/_build/sitemap.ts",
     "lh:collect": "npx --yes @lhci/cli collect",
     "lh:upload": "npx --yes @lhci/cli upload",

web/rsbuild.config.ts

@@ -52,5 +52,9 @@ export default defineConfig({
       svg: `w/${bundleInfo.version}/svg`,
       wasm: `w/${bundleInfo.version}/wasm`,
     },
+    sourceMap: {
+      js: "source-map",
+      css: true,
+    },
   },
 });

web/src/_build/gen-multiple-htmls.ts

@@ -6,7 +6,6 @@ import { join } from "path";
 import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { allPages } from "./pages";
 import { Environment, environments } from "@dzcode.io/utils/dist/config/environment";
-import { SENTRY_ORIGIN } from "../../src/utils/sentry-origin";
 import { fsConfig } from "@dzcode.io/utils/dist/config";
 
 let stage = process.env.STAGE as Environment;
@@ -63,7 +62,6 @@ allPages.forEach((pageInfo) => {
     pageInfo.canonicalUrl || `${config.web.url}${pageInfo.uri}`,
   );
   newHtml = newHtml.replace(/{{ogImage}}/g, pageInfo.ogImage);
-  newHtml = newHtml.replace(/{{sentryOrigin}}/g, `https://${SENTRY_ORIGIN}`);
 
   mkdirSync(outputHtmlParentDir, { recursive: true });
   writeFileSync(outputHtmlPath, newHtml);

web/src/_entry/app.tsx

@@ -1,7 +1,7 @@
 import "./style.css";
 
 import { HelmetProvider } from "react-helmet-async";
-import { BrowserRouter, Route, RouteProps, Routes } from "react-router-dom";
+import { BrowserRouter, Route, RouteProps } from "react-router-dom";
 import { Footer, FooterProps } from "src/components/footer";
 import { Loadable } from "src/components/loadable";
 import { TopBar, TopBarProps } from "src/components/top-bar";
@@ -10,6 +10,7 @@ import { getInitialLanguageCode } from "src/utils/website-language";
 import React from "react";
 import { Search } from "src/components/search";
 import { DEFAULT_LANGUAGE } from "@dzcode.io/models/dist/language";
+import { Routes } from "src/components/instrumented-routes";
 
 let routes: Array<
   RouteProps & {

web/src/_entry/index.html

@@ -6,7 +6,6 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="{{sentryOrigin}}" />
 
     <meta name="keywords" content="{{keywords}}" />
     <meta name="theme-color" content="{{themeColor}}" />

web/src/components/instrumented-routes.tsx

@@ -0,0 +1,8 @@
+import { Routes as ReactRouterRoutes } from "react-router-dom";
+
+import { FaroRoutes } from "@grafana/faro-react";
+import { getEnv } from "src/utils/environment";
+
+const env = getEnv();
+
+export const Routes = env === "development" ? ReactRouterRoutes : FaroRoutes;

web/src/index.tsx

@@ -1,5 +1,4 @@
-// Sentry initialization should be imported first!
-import "src/utils/setup-sentry";
+import "src/utils/setup-faro";
 
 import React from "react";
 import { StrictMode } from "react";

web/src/redux/actions/contribution.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { contributionPageSlice } from "src/redux/slices/contribution-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -17,6 +17,6 @@ export const fetchContributionAction =
       dispatch(contributionPageSlice.actions.set({ contribution }));
     } catch (error) {
       dispatch(contributionPageSlice.actions.set({ contribution: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/contributions.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { contributionsPageSlice } from "src/redux/slices/contributions-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -13,6 +13,6 @@ export const fetchContributionsListAction =
       dispatch(contributionsPageSlice.actions.set({ contributionsList: contributions }));
     } catch (error) {
       dispatch(contributionsPageSlice.actions.set({ contributionsList: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/contributor.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { contributorPageSlice } from "src/redux/slices/contributor-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -17,6 +17,6 @@ export const fetchContributorAction =
       dispatch(contributorPageSlice.actions.set({ contributor }));
     } catch (error) {
       dispatch(contributorPageSlice.actions.set({ contributor: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/contributors.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { contributorsPageSlice } from "src/redux/slices/contributors-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -12,6 +12,6 @@ export const fetchContributorsListAction =
       dispatch(contributorsPageSlice.actions.set({ contributorsList: contributors }));
     } catch (error) {
       dispatch(contributorsPageSlice.actions.set({ contributorsList: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/project.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { projectPageSlice } from "src/redux/slices/project-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -17,6 +17,6 @@ export const fetchProjectAction =
       dispatch(projectPageSlice.actions.set({ project }));
     } catch (error) {
       dispatch(projectPageSlice.actions.set({ project: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/projects.ts

@@ -1,5 +1,5 @@
+import { faro } from "@grafana/faro-react";
 import { Action, ThunkAction } from "@reduxjs/toolkit";
-import { captureException } from "@sentry/react";
 import { projectsPageSlice } from "src/redux/slices/projects-page";
 import { AppState } from "src/redux/store";
 import { fetchV2 } from "src/utils/fetch";
@@ -12,6 +12,6 @@ export const fetchProjectsListAction =
       dispatch(projectsPageSlice.actions.set({ projectsList: projects }));
     } catch (error) {
       dispatch(projectsPageSlice.actions.set({ projectsList: "ERROR" }));
-      captureException(error, { tags: { type: "WEB_FETCH" } });
+      faro.api.pushError(error as Error, { type: "WEB_FETCH" });
     }
   };

web/src/redux/actions/settings.ts

@@ -1,13 +1,13 @@
 import { DEFAULT_LANGUAGE, LANGUAGES } from "@dzcode.io/models/dist/language";
 import { LanguageCode } from "@dzcode.io/utils/dist/language";
-import { captureException } from "@sentry/react";
+import { faro } from "@grafana/faro-react";
 
 export const changeLanguage = (languageCode: LanguageCode) => {
   let newPath = window.location.pathname;
   const language = LANGUAGES.find(({ code }) => code === languageCode);
   if (!language) {
-    console.error("Invalid language code", languageCode);
-    captureException(`Invalid language code ${language}`, { tags: { type: "GENERIC" } });
+    const error = new Error(`Invalid language code ${languageCode}`);
+    faro.api.pushError(error);
     return;
   }
 

web/src/utils/setup-faro.ts

@@ -0,0 +1,48 @@
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  Routes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
+import {
+  createReactRouterV6Options,
+  getWebInstrumentations,
+  initializeFaro,
+  ReactIntegration,
+} from "@grafana/faro-react";
+import { TracingInstrumentation } from "@grafana/faro-web-tracing";
+
+import { getEnv } from "./environment";
+
+const env = getEnv();
+
+if (env !== "development") {
+  initializeFaro({
+    url: "https://grafana.zak-man.com/faro-proxy/9c90470e84483b225a6a5a0378aa0d97",
+    app: {
+      name: "dzcode",
+      version: window.bundleInfo.version,
+      environment: env,
+    },
+
+    instrumentations: [
+      // Mandatory, omits default instrumentations otherwise.
+      ...getWebInstrumentations(),
+
+      // Tracing package to get end-to-end visibility for HTTP requests.
+      new TracingInstrumentation(),
+
+      // React integration for React applications.
+      new ReactIntegration({
+        router: createReactRouterV6Options({
+          createRoutesFromChildren,
+          matchRoutes,
+          Routes,
+          useLocation,
+          useNavigationType,
+        }),
+      }),
+    ],
+  });
+}