feat: add OpenTelemetry browser analytics with OTLP log export

conf.d/default.conf

@@ -94,6 +94,17 @@ server {
     try_files $uri $uri/ =404;
   }
 
+  # Analytics: proxy browser OTLP log requests to the in-cluster collector
+  location = /v1/logs {
+    proxy_pass http://opentelemetry-collector.observability.svc:4318/v1/logs;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header Content-Type $content_type;
+    client_max_body_size 64k;
+    access_log off;
+  }
+
   # Docusaurus SPA fallback
   location / {
     try_files $uri $uri/ /index.html;

docusaurus.config.ts

@@ -5,6 +5,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
+  clientModules: ['./src/analytics/clientModule.ts'],
   title: 'Open Learning Data',
   tagline: 'An open data portal for learning analytics research.',
   favicon: 'img/favicon.ico',

package.json

@@ -20,6 +20,13 @@
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
     "@mdx-js/react": "^3.0.0",
+    "@opentelemetry/api-logs": "^0.218.0",
+    "@opentelemetry/browser-instrumentation": "^0.5.2",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.218.0",
+    "@opentelemetry/instrumentation": "^0.218.0",
+    "@opentelemetry/resources": "^2.7.1",
+    "@opentelemetry/sdk-logs": "^0.218.0",
+    "@opentelemetry/semantic-conventions": "^1.41.1",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",

src/analytics/AnalyticsContext.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useAnalytics } from './useAnalytics';
+
+const AnalyticsContext = createContext<{ trackEvent: (name: string, attrs?: Record<string, string | number>) => void }>({
+  trackEvent: () => {},
+});
+
+export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
+  const analytics = useAnalytics();
+  const value = useMemo(() => analytics, [analytics]);
+  return (
+    <AnalyticsContext.Provider value={value}>
+      {children}
+    </AnalyticsContext.Provider>
+  );
+}
+
+export function useTrackEvent() {
+  return useContext(AnalyticsContext).trackEvent;
+}

src/analytics/clientModule.ts

@@ -0,0 +1,13 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+if (ExecutionEnvironment.canUseDOM) {
+  import('./init').then(({ initAnalytics }) => initAnalytics());
+}
+
+export function onRouteDidUpdate({ location }: { location: { pathname: string } }): void {
+  if (ExecutionEnvironment.canUseDOM) {
+    import('./init').then(({ logEvent }) => {
+      logEvent('page_view', { url: location.pathname });
+    });
+  }
+}