feat: Integrate Grafana Faro

.env

@@ -9,6 +9,13 @@ NEXT_PUBLIC_STRIPE_SUB_CANCEL_URL=https://billing.stripe.com/p/login/test_bIY8xy
 NEXT_PUBLIC_OPENGRAPH_URL=https://beta.opengraph.opensauced.pizza/v1
 SENTRY_DSN=https://3f5bb9023ff0407299dd22a6454558f9@o4504872488927232.ingest.sentry.io/4505082236960768
 
+# Grafana Faro web tracing and frontend observability
+# should only be configured to send metric points from beta and prod deployments.
+# For testing purposes, use a valid collector URL and set the environment to "beta"
+NEXT_PUBLIC_FARO_COLLECTOR_URL=""
+NEXT_PUBLIC_FARO_APP_NAME="OpenSauced App"
+NEXT_PUBLIC_FARO_APP_ENVIRONMENT=local
+
 # --------------
 # For running the API local, use your devices localhost address:
 #

lib/utils/grafana.ts

@@ -0,0 +1,37 @@
+import { getWebInstrumentations, initializeFaro, ReactIntegration } from "@grafana/faro-react";
+import { TracingInstrumentation } from "@grafana/faro-web-tracing";
+
+// Get the current, runtime version of the App to surface to Faro
+import packageJson from "../../package.json";
+
+export const initGrafanaFaro = () => {
+  return initializeFaro({
+    url: process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL,
+
+    app: {
+      name: process.env.NEXT_PUBLIC_FARO_APP_NAME,
+      version: packageJson.version,
+      environment: process.env.NEXT_PUBLIC_FARO_ENVIRONMENT,
+    },
+
+    instrumentations: [
+      // load the mandatory web instrumentation
+      ...getWebInstrumentations({
+        captureConsole: true,
+      }),
+
+      // add tracing instrumentation which should include the React Profiler
+      new TracingInstrumentation(),
+
+      new ReactIntegration({
+        // In the future, we may choose to integrate with React router instrumentation to
+        // get deeper metrics on matched routes, navigation types, etc.
+        // Next/router doesn't seem to be supported which won't give us route metrics.
+        //
+        // Reference: https://github.com/grafana/faro-web-sdk/tree/main/packages/react
+        //
+        // router: {}
+      }),
+    ],
+  });
+};

next.config.js

@@ -24,6 +24,9 @@ const interests = [
 
 /** @type {import('next').NextConfig} */
 module.exports = {
+  experimental: {
+    instrumentationHook: true,
+  },
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
   images: {