setup faro to replace sentry for ./web

Author: ZibanPirate

package-lock.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/package.json

@@ -2,6 +2,7 @@ import { environments } from "@dzcode.io/utils/dist/config/environment";
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
 import { readFileSync } from "fs";
+import FaroSourceMapUploaderPlugin from "@grafana/faro-webpack-plugin";
 
 let stage = process.env.STAGE;
 
@@ -21,6 +22,20 @@ try {
 
 export default defineConfig({
   plugins: [pluginReact()],
+  tools: {
+    webpack: {
+      plugins: [
+        new FaroSourceMapUploaderPlugin({
+          appName: "dzcode",
+          endpoint: "https://faro-api-prod-eu-west-2.grafana.net/faro/api/v1",
+          appId: "2897",
+          stackId: "1236993",
+          apiKey: process.env.GRAFANA_SOURCEMAP_TOKEN!,
+          gzipContents: true,
+        }),
+      ],
+    },
+  },
   source: {
     alias: {
       src: "./src",

web/rsbuild.config.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/_build/gen-multiple-htmls.ts

@@ -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/app.tsx

@@ -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/_entry/index.html

@@ -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/components/instrumented-routes.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/index.tsx

@@ -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,
+        }),
+      }),
+    ],
+  });
+}