feat: Optionally use a DataDog logger (#56)

If the environment variable NEXT_PUBLIC_DATADOG_CLIENT_TOKEN is set then
we use a client side DataDog logger.

Author: arv

package-lock.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@cloudflare/workers-types": "^3.3.1",
     "@rocicorp/reflect": "^0.6.0",
+    "@datadog/browser-logs": "^4.11.3",
+    "@rocicorp/logger": "^2.2.0",
     "@rocicorp/reflect-server": "^0.11.0",
     "@types/node": "^17.0.16",
     "@types/react": "^17.0.39",

package.json

@@ -4,6 +4,7 @@ import { Rect } from "./rect";
 import type { M } from "../datamodel/mutators";
 import { useClientInfo } from "../datamodel/subscriptions";
 import type { Reflect } from "@rocicorp/reflect";
+import type { OptionalLogger } from "@rocicorp/logger";
 
 const hideCollaboratorDelay = 5000;
 
@@ -18,9 +19,11 @@ interface Position {
 export function Collaborator({
   reflect,
   clientID,
+  logger,
 }: {
   reflect: Reflect<M>;
   clientID: string;
+  logger: OptionalLogger;
 }) {
   const clientInfo = useClientInfo(reflect, clientID);
   const [lastPos, setLastPos] = useState<Position | null>(null);
@@ -40,11 +43,11 @@ export function Collaborator({
 
   if (curPos) {
     if (!lastPos) {
-      console.debug(`Cursor ${clientID} - got initial position`, curPos);
+      logger.debug?.(`Cursor ${clientID} - got initial position`, curPos);
       setLastPos({ pos: curPos, ts: Date.now() });
     } else {
       if (lastPos.pos.x != curPos.x || lastPos.pos.y != curPos.y) {
-        console.debug(`Cursor ${clientID} - got change to`, curPos);
+        logger.debug?.(`Cursor ${clientID} - got change to`, curPos);
         setLastPos({ pos: curPos, ts: Date.now() });
         setGotFirstChange(true);
       }
@@ -58,14 +61,14 @@ export function Collaborator({
 
   useEffect(() => {
     if (remaining > 0) {
-      console.debug(`Cursor ${clientID} - setting timer for ${remaining}ms`);
+      logger.debug?.(`Cursor ${clientID} - setting timer for ${remaining}ms`);
       const timerID = setTimeout(() => setPoke({}), remaining);
       return () => clearTimeout(timerID);
     }
     return;
   });
 
-  console.debug(
+  logger.debug?.(
     `Cursor ${clientID} - elapsed ${elapsed}, remaining: ${remaining}, visible: ${visible}`
   );
   if (!clientInfo || !curPos || !userInfo) {

src/frontend/collaborator.tsx

@@ -0,0 +1,23 @@
+import type { LogLevel, LogSink } from "@rocicorp/logger";
+import { datadogLogs } from "@datadog/browser-logs";
+
+function throwError(message: string): never {
+  throw new Error(message);
+}
+
+export class DataDogBrowserLogSink implements LogSink {
+  constructor() {
+    datadogLogs.init({
+      clientToken:
+        process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN ??
+        throwError("Missing env var NEXT_PUBLIC_DATADOG_CLIENT_TOKEN"),
+      forwardErrorsToLogs: false,
+      sampleRate: 100,
+      silentMultipleInit: true,
+    });
+  }
+
+  log(level: LogLevel, ...args: unknown[]): void {
+    datadogLogs.logger.log(args.join(", "), {}, level);
+  }
+}

src/frontend/data-dog-browser-log-sink.tsx

@@ -1,4 +1,5 @@
 import type { Reflect } from "@rocicorp/reflect";
+import type { OptionalLogger } from "@rocicorp/logger";
 import React, { useRef, useState } from "react";
 import { HotKeys } from "react-hotkeys";
 import { DraggableCore } from "react-draggable";
@@ -15,7 +16,13 @@ import {
 } from "../datamodel/subscriptions";
 import type { M } from "../datamodel/mutators";
 
-export function Designer({ reflect }: { reflect: Reflect<M> }) {
+export function Designer({
+  reflect,
+  logger,
+}: {
+  reflect: Reflect<M>;
+  logger: OptionalLogger;
+}) {
   const ids = useShapeIDs(reflect);
   const overID = useOverShapeID(reflect);
   const selectedID = useSelectedShapeID(reflect);
@@ -126,11 +133,10 @@ export function Designer({ reflect }: { reflect: Reflect<M> }) {
             // rectangles as their own independent svg content. Le. Sigh.
             collaboratorIDs.map((id) => (
               <Collaborator
-                {...{
-                  key: `key-${id}`,
-                  reflect,
-                  clientID: id,
-                }}
+                key={`key-${id}`}
+                reflect={reflect}
+                clientID={id}
+                logger={logger}
               />
             ))
           }

src/frontend/designer.tsx

@@ -5,18 +5,26 @@ import { Nav } from "../../frontend/nav";
 import { M, clientMutators } from "../../datamodel/mutators";
 import { randUserInfo } from "../../datamodel/client-state";
 import { nanoid } from "nanoid";
+import { consoleLogSink, OptionalLoggerImpl } from "@rocicorp/logger";
+import { DataDogBrowserLogSink } from "../../frontend/data-dog-browser-log-sink";
 
 export default function Home() {
   const [reflect, setReflectClient] = useState<Reflect<M> | null>(null);
   const [online, setOnline] = useState(false);
+
+  const logSink = process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN
+    ? new DataDogBrowserLogSink()
+    : consoleLogSink;
+  const logger = new OptionalLoggerImpl(logSink);
+
   useEffect(() => {
     const [, , roomID] = location.pathname.split("/");
 
     (async () => {
       const workerOrigin =
         process.env.NEXT_PUBLIC_WORKER_HOST ??
         "wss://replidraw.replicache.workers.dev";
-      console.info(`Connecting to worker at ${workerOrigin}`);
+      logger.info?.(`Connecting to worker at ${workerOrigin}`);
       const userID = nanoid();
       const r = new Reflect<M>({
         socketOrigin: workerOrigin,
@@ -27,6 +35,7 @@ export default function Home() {
           userID,
           roomID,
         }),
+        logSinks: [logSink],
         mutators: clientMutators,
       });
 
@@ -59,7 +68,7 @@ export default function Home() {
       }}
     >
       <Nav reflect={reflect} online={online} />
-      <Designer {...{ reflect }} />
+      <Designer reflect={reflect} logger={logger} />
     </div>
   );
 }