chore: adds event beaconing for features

Author: anthonydmays

lib/javascript/fullstack_demo/src/components/add-todo/add-todo.tsx

@@ -1,4 +1,5 @@
-import { Todo } from '@/models';
+import { LogEvent, Todo } from '@/models';
+import { logger } from '@/util/client-logger';
 import { PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
@@ -14,6 +15,7 @@ export const AddTodo: React.FC<AddTodoProps> = ({ onAdd }) => {
     if (newTodo.trim() !== '') {
       const todo: Todo = { id: Date.now(), text: newTodo, completed: false };
       await fetch('/api/todos', { method: 'POST', body: JSON.stringify(todo) });
+      logger.event(LogEvent.TODO_ADD, { id: todo.id });
       setNewTodo('');
       if (onAdd) {
         onAdd(todo);

lib/javascript/fullstack_demo/src/components/todo-list/todo-list.tsx

@@ -1,6 +1,5 @@
-import { Todo } from '@/models';
+import { LogEvent, Todo } from '@/models';
 import { logger } from '@/util/client-logger';
-import { LogEvent } from '@/util/events';
 import { TodoComponent } from './todo';
 
 export type TodoProps = {
@@ -18,6 +17,7 @@ export const TodoList: React.FC<TodoProps> = ({ todos, onChange }) => {
       method: 'PATCH',
       body: JSON.stringify(todo),
     });
+    logger.event(LogEvent.TODO_TOGGLE, { id });
     if (onChange) {
       onChange(todo.id);
     }
@@ -28,6 +28,7 @@ export const TodoList: React.FC<TodoProps> = ({ todos, onChange }) => {
     await fetch(`/api/todos/${id}`, {
       method: 'DELETE',
     });
+    logger.event(LogEvent.TODO_DELETE, { id });
     if (onChange) {
       onChange(id);
     }

lib/javascript/fullstack_demo/src/models.ts

@@ -11,3 +11,11 @@ export interface Log {
   message: string;
   vars: {};
 }
+
+export enum LogEvent {
+  LOG_IN = 'log_in',
+  LOG_OUT = 'log_out',
+  TODO_TOGGLE = 'todo_toggle',
+  TODO_DELETE = 'todo_delete',
+  TODO_ADD = 'todo_add',
+}

lib/javascript/fullstack_demo/src/util/client-logger.ts

@@ -1,5 +1,4 @@
-import { Log } from '@/models';
-import { LogEvent } from './events';
+import { Log, LogEvent } from '@/models';
 import { Logger, LogLevel } from './logger';
 
 const FLUSH_AFTER_SIZE = 15;

lib/javascript/fullstack_demo/src/util/events.ts

@@ -1,4 +1,4 @@
-import { LogEvent } from './events';
+import { LogEvent } from '@/models';
 
 export interface Logger {
   log(level: LogLevel, message: string, vars?: {}): void;

lib/javascript/fullstack_demo/src/util/logger.ts

@@ -1,7 +1,7 @@
+import { LogEvent } from '@/models';
 import { auth } from '@clerk/nextjs/server';
 import { headers } from 'next/headers';
 import winston, { format } from 'winston';
-import { LogEvent } from './events';
 import { Logger, LogLevel } from './logger';
 import { PrismaTransport } from './prisma-transport';
 const { combine, timestamp, json } = format;