feat: adding OpenReplay to long-term improve the user experience

Author: WolverinDEV

Dockerfile

@@ -2,9 +2,13 @@
 FROM node:22-alpine AS build
 
 ARG GITHUB_SHA
+ARG VITE_OPENREPLAY_PROJECT_KEY=3cwetvApbpUmvIOlsktv
+ARG VITE_OPENREPLAY_INGEST_POINT=https://hexo.did.science/api/ingest/
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
+ENV VITE_OPENREPLAY_PROJECT_KEY="$VITE_OPENREPLAY_PROJECT_KEY"
+ENV VITE_OPENREPLAY_INGEST_POINT="$VITE_OPENREPLAY_INGEST_POINT"
 
 RUN apk add git
 RUN corepack enable
@@ -50,4 +54,4 @@ RUN cd packages/backend && pnpm install --frozen-lockfile
 
 EXPOSE 3001
 
-CMD ["node", "packages/backend/dist/server.cjs"]
+CMD ["node", "packages/backend/dist/server.cjs"]

README.md

@@ -118,7 +118,7 @@ docker run -d \
   ih3t:latest
 ```
 
-The Docker build context excludes `.env` files, so runtime configuration must be provided with `--env-file` or `-e` flags when the container starts.
+The Docker build context excludes `.env` files, so backend runtime configuration must be provided with `--env-file` or `-e` flags when the container starts. Frontend Vite variables such as the OpenReplay project key and ingest point are build-time settings in this Docker setup, so they must be overridden with `--build-arg` when building the image.
 
 ## AI Use
 

packages/backend/src/network/clientInfo.ts

@@ -4,6 +4,7 @@ import type { Socket } from 'socket.io';
 
 export type RequestClientInfo = {
     deviceId: string;
+    openReplaySessionId: string | null;
     ip: string;
     userAgent: string;
     origin: string;
@@ -51,6 +52,7 @@ export function getRequestClientInfo(request: Request): RequestClientInfo {
 
     return {
         deviceId,
+        openReplaySessionId: request.get(`x-openreplay-sessionid`) ?? null,
         ip: request.ip ?? ``,
         userAgent: request.get(`user-agent`) ?? ``,
         origin: request.get(`origin`) ?? ``,
@@ -66,6 +68,7 @@ export function getSocketClientInfo(socket: Socket<ClientToServerEvents, ServerT
         versionHash,
 
         socketId: socket.id,
+        openReplaySessionId: null,
         ip: socket.handshake.address ?? ``,
 
         userAgent: getHeaderValue(socket.handshake.headers[`user-agent`]) ?? ``,

packages/backend/src/network/cors.ts

@@ -46,7 +46,7 @@ export class CorsConfiguration {
             methods: [
                 `GET`, `POST`, `PATCH`, `PUT`, `OPTIONS`, `DELETE`,
             ],
-            allowedHeaders: [`Content-Type`, `X-Device-Id`],
+            allowedHeaders: [`Content-Type`, `X-Device-Id`, `X-OpenReplay-SessionId`],
             credentials: true,
         };
     }

packages/backend/src/network/createHttpApp.ts

@@ -10,11 +10,30 @@ import { z } from 'zod';
 import { AuthService } from '../auth/authService';
 import { ServerConfig } from '../config/serverConfig';
 import { ROOT_LOGGER } from '../logger';
+import { getRequestClientInfo } from './clientInfo';
 import { CorsConfiguration } from './cors';
 import { FrontendSsrRenderer } from './frontendSsr';
-import { ApiQueryService } from './rest/apiQueryService';
+import { ApiQueryService, ApiRequestError } from './rest/apiQueryService';
 import { ApiRouter } from './rest/createApiRouter';
 
+type HttpErrorContext = {
+    err?: Error;
+    issues?: z.ZodIssue[];
+    responseBody?: unknown;
+};
+
+function getHttpErrorContext(response: express.Response): HttpErrorContext | null {
+    return (response.locals as { httpErrorContext?: HttpErrorContext }).httpErrorContext ?? null;
+}
+
+function setHttpErrorContext(response: express.Response, context: Partial<HttpErrorContext>): void {
+    const locals = response.locals as { httpErrorContext?: HttpErrorContext };
+    locals.httpErrorContext = {
+        ...locals.httpErrorContext,
+        ...context,
+    };
+}
+
 @injectable()
 export class HttpApplication {
     readonly app: express.Application;
@@ -47,42 +66,86 @@ export class HttpApplication {
         app.use((req, res, next) => {
             const requestId = randomUUID();
             const startedAt = process.hrtime.bigint();
+            const client = getRequestClientInfo(req);
+            const originalJson = res.json.bind(res);
             const requestLogger = logger.child({
                 requestId,
                 method: req.method,
                 path: req.originalUrl,
                 remoteAddress: req.ip,
+                deviceId: client.deviceId,
+                openReplaySessionId: client.openReplaySessionId,
             });
 
+            res.json = ((body: unknown) => {
+                if (res.statusCode >= 400) {
+                    setHttpErrorContext(res, { responseBody: body });
+                }
+
+                return originalJson(body);
+            }) as typeof res.json;
+
             res.on(`finish`, () => {
                 const durationMs = Number(process.hrtime.bigint() - startedAt) / 1_000_000;
-                requestLogger.trace({
-                    event: `http.request.completed`,
+                const event = res.statusCode >= 400 ? `http.request.failed` : `http.request.completed`;
+                const logContext = {
+                    event,
                     statusCode: res.statusCode,
                     durationMs: Number(durationMs.toFixed(3)),
                     contentLength: res.getHeader(`content-length`) ?? null,
                     userAgent: req.get(`user-agent`) ?? null,
-                }, `HTTP request completed`);
+                    ...getHttpErrorContext(res),
+                };
+
+                if (res.statusCode >= 500) {
+                    requestLogger.error(logContext, `HTTP request failed`);
+                    return;
+                }
+
+                if (res.statusCode >= 400) {
+                    requestLogger.warn(logContext, `HTTP request failed`);
+                    return;
+                }
+
+                requestLogger.trace(logContext, `HTTP request completed`);
             });
 
             next();
         });
 
         app.use(`/auth`, express.urlencoded({ extended: false }), express.json(), authService.handler);
         app.use(`/api`, apiRouter.router);
-        app.use((error: unknown, req: express.Request, res: express.Response, next: express.NextFunction) => {
+
+        if (existsSync(this.frontendDistPath)) {
+            app.use(express.static(this.frontendDistPath, { index: false }));
+            app.get(/^(?!\/api(?:\/|$)|\/socket\.io(?:\/|$)).*/, async (req, res) => {
+                const joinRedirectUrl = this.resolveJoinRedirectUrl(req);
+                if (joinRedirectUrl) {
+                    res.redirect(302, joinRedirectUrl);
+                    return;
+                }
+
+                const archiveRedirectUrl = this.resolveArchiveRedirectUrl(req);
+                if (archiveRedirectUrl) {
+                    res.redirect(302, archiveRedirectUrl);
+                    return;
+                }
+
+                const html = await this.frontendSsrRenderer.render(req);
+                res.type(`html`).send(html);
+            });
+        }
+
+        app.use((error: unknown, _req: express.Request, res: express.Response, next: express.NextFunction) => {
             if (!(error instanceof z.ZodError)) {
                 next(error);
                 return;
             }
 
-            logger.warn({
+            setHttpErrorContext(res, {
                 err: error,
-                event: `http.request.invalid`,
-                method: req.method,
-                path: req.originalUrl,
                 issues: error.issues,
-            }, `HTTP request validation failed`);
+            });
 
             const friendlyMessage = error.issues
                 .map((issue) => {
@@ -96,26 +159,22 @@ export class HttpApplication {
                 issues: error.issues,
             });
         });
+        app.use((error: unknown, _req: express.Request, res: express.Response, next: express.NextFunction) => {
+            if (res.headersSent) {
+                next(error);
+                return;
+            }
 
-        if (existsSync(this.frontendDistPath)) {
-            app.use(express.static(this.frontendDistPath, { index: false }));
-            app.get(/^(?!\/api(?:\/|$)|\/socket\.io(?:\/|$)).*/, async (req, res) => {
-                const joinRedirectUrl = this.resolveJoinRedirectUrl(req);
-                if (joinRedirectUrl) {
-                    res.redirect(302, joinRedirectUrl);
-                    return;
-                }
-
-                const archiveRedirectUrl = this.resolveArchiveRedirectUrl(req);
-                if (archiveRedirectUrl) {
-                    res.redirect(302, archiveRedirectUrl);
-                    return;
-                }
+            if (error instanceof ApiRequestError) {
+                setHttpErrorContext(res, { err: error });
+                res.status(error.statusCode).json({ error: error.message });
+                return;
+            }
 
-                const html = await this.frontendSsrRenderer.render(req);
-                res.type(`html`).send(html);
-            });
-        }
+            const normalizedError = error instanceof Error ? error : new Error(`Unexpected server error`);
+            setHttpErrorContext(res, { err: normalizedError });
+            res.status(500).json({ error: `Internal server error.` });
+        });
 
         this.app = app;
     }

packages/backend/src/tournament/tournamentService.ts

@@ -41,6 +41,7 @@ import { buildSwissRoundMatches, calculateSwissStandings } from './tournamentSwi
 
 const kTournamentSystemClient: RequestClientInfo = {
     deviceId: `tournament-system`,
+    openReplaySessionId: null,
     ip: ``,
     userAgent: `tournament-system`,
     origin: ``,

packages/frontend/package.json

@@ -19,6 +19,7 @@
     "dependencies": {
         "@ih3t/bot-worker": "workspace:*",
         "@ih3t/shared": "workspace:*",
+        "@openreplay/tracker": "^18.0.6",
         "@tanstack/react-query": "^5.91.2",
         "@tanstack/react-query-devtools": "^5.95.2",
         "clsx": "^2.1.1",

packages/frontend/src/App.tsx

@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 import { RouterProvider } from 'react-router';
 
 import AppErrorBoundary from './components/AppErrorBoundary';
+import { trackOpenReplayUser } from './openReplay';
+import { useQueryAccount } from './query/accountClient';
 import { clearHydrationRenderPassFlag, useRenderMode } from './ssrState';
 
 type AppProps = {
@@ -12,6 +14,25 @@ type AppProps = {
     dehydratedState?: DehydratedState
 };
 
+function OpenReplayUserSync() {
+    const renderMode = useRenderMode();
+    const accountQuery = useQueryAccount({ enabled: renderMode !== `ssr` });
+    const account = accountQuery.data?.user ?? null;
+
+    useEffect(() => {
+        if (!account) {
+            return;
+        }
+
+        trackOpenReplayUser({
+            id: account.id,
+            username: account.username,
+        });
+    }, [account]);
+
+    return null;
+}
+
 function App({ router, queryClient, dehydratedState }: Readonly<AppProps>) {
     const renderMode = useRenderMode();
 
@@ -31,6 +52,7 @@ function App({ router, queryClient, dehydratedState }: Readonly<AppProps>) {
 
             <QueryClientProvider client={queryClient}>
                 {renderMode === `normal` && <ReactQueryDevtools />}
+                <OpenReplayUserSync />
 
                 <HydrationBoundary state={dehydratedState}>
                     <RouterProvider router={router} />

packages/frontend/src/entry-web.tsx

@@ -1,14 +1,16 @@
 import './index.css';
 import 'react-toastify/dist/ReactToastify.css';
 
+import { initializeOpenReplay } from './openReplay';
 import { installSoundEffects } from './soundEffects';
 
 installSoundEffects();
+void initializeOpenReplay();
 
 const start = performance.now();
 import(`./main`).then(() => {
     console.log(`App loaded in %dms`, performance.now() - start);
 }).catch(error => {
     console.error(error);
     alert(`Failed to load app.\nPlease reload!`);
-});
+});