dce-reactkit 3.1.20 → 3.2.0-beta.10

package/dist/esm/types/types/LogBuiltInMetadata.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Built-in metadata for logs
+ * @author Gabe Abrams
+ */
+declare const LogBuiltInMetadata: {
+    Context: {
+        Uncategorized: string;
+        ServerRenderedErrorPage: string;
+        ServerEndpointError: string;
+    };
+    Target: {
+        NoSpecificTarget: string;
+    };
+};
+export default LogBuiltInMetadata;

package/dist/esm/types/types/LogFunction.d.ts

@@ -0,0 +1,24 @@
+import Log from './Log';
+import LogAction from './LogAction';
+/**
+ * Type of a log action function
+ * @author Gabe Abrams
+ */
+declare type LogFunction = (opts: ({
+    context: string | {
+        _: string;
+    };
+    subcontext?: string | {
+        _: string;
+    };
+    tags?: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+} & ({
+    error: any;
+} | {
+    action: LogAction;
+    target?: string;
+}))) => Promise<Log>;
+export default LogFunction;

package/dist/esm/types/types/LogSource.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Source of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogSource {
+    Client = "client",
+    Server = "server"
+}
+export default LogSource;

package/dist/esm/types/types/LogType.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Type of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogType {
+    Action = "action",
+    Error = "error"
+}
+export default LogType;

package/dist/index.d.ts

@@ -515,6 +515,140 @@ declare enum ParamType {
     StringOptional = "string-optional"
 }
 
+/**
+ * Main information in a log event
+ * @author Gabe Abrams
+ */
+declare type LogMainInfo = {
+    id: string;
+    userFirstName: string;
+    userLastName: string;
+    userEmail: string;
+    userId: number;
+    isLearner: boolean;
+    isAdmin: boolean;
+    isTTM: boolean;
+    courseId: number;
+    courseName: string;
+    browser: {
+        name: string;
+        version: string;
+    };
+    device: {
+        os: string;
+        isMobile: boolean;
+    };
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    timestamp: number;
+    context: string;
+    subcontext: string;
+    tags: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+};
+
+/**
+ * Source of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogSource {
+    Client = "client",
+    Server = "server"
+}
+
+/**
+ * Log info that is specific to the type of source
+ * @author Gabe Abrams
+ */
+declare type LogSourceSpecificInfo = ({
+    source: LogSource.Client;
+} | {
+    source: LogSource.Server;
+    routePath: string;
+    routeTemplate: string;
+});
+
+/**
+ * Types of actions
+ * @author Gabe Abrams
+ */
+declare enum LogAction {
+    Open = "open",
+    Close = "close",
+    Cancel = "cancel",
+    Expand = "expand",
+    Collapse = "collapse",
+    View = "view",
+    Interrupt = "interrupt",
+    Create = "create",
+    Edit = "edit",
+    Delete = "delete",
+    Add = "add",
+    Remove = "remove",
+    Activate = "activate",
+    Deactivate = "deactivate",
+    Peek = "peek",
+    Unknown = "unknown"
+}
+
+/**
+ * Type of a log event
+ * @author Gabe Abrams
+ */
+declare enum LogType {
+    Action = "action",
+    Error = "error"
+}
+
+/**
+ * Log info that is specific to the type of log
+ * @author Gabe Abrams
+ */
+declare type LogTypeSpecificInfo = ({
+    type: LogType.Error;
+    errorMessage: string;
+    errorCode: string;
+    errorStack: string;
+} | {
+    type: LogType.Action;
+    target: string;
+    action: LogAction;
+});
+
+/**
+ * A single log event corresponding to an action performed by a user or an
+ *   error encountered by a user
+ * @author Gabe Abrams
+ */
+declare type Log = (LogMainInfo & LogSourceSpecificInfo & LogTypeSpecificInfo);
+
+/**
+ * Type of a log action function
+ * @author Gabe Abrams
+ */
+declare type LogFunction = (opts: ({
+    context: string | {
+        _: string;
+    };
+    subcontext?: string | {
+        _: string;
+    };
+    tags?: string[];
+    metadata?: {
+        [k: string]: any;
+    };
+} & ({
+    error: any;
+} | {
+    action: LogAction;
+    target?: string;
+}))) => Promise<Log>;
+
 /**
  * Generate an express API route handler
  * @author Gabe Abrams
@@ -556,6 +690,7 @@ declare const genRouteHandler: (opts: {
             pageTitle?: string | undefined;
             status?: number | undefined;
         } | undefined) => void;
+        logServerEvent: LogFunction;
     }) => any;
     skipSessionCheck?: boolean | undefined;
 }) => (req: any, res: any, next: () => void) => Promise<undefined>;
@@ -594,10 +729,16 @@ declare type GetLaunchInfoFunction = (req: any) => {
  * Prepare dce-reactkit to run on the server
  * @author Gabe Abrams
  * @param opts object containing all arguments
+ * @param opts.app express app from inside of the postprocessor function that
+ *   we will add routes to
  * @param opts.getLaunchInfo CACCL LTI's get launch info function
+ * @param [opts.logCollection] mongo collection from dce-mango to use for
+ *   storing logs. If none is included, logs are written to the console
  */
 declare const initServer: (opts: {
+    app: any;
     getLaunchInfo: GetLaunchInfoFunction;
+    logCollection?: any;
 }) => void;
 
 /**
@@ -696,6 +837,20 @@ declare const onlyKeepLetters: (str: string) => string;
  */
 declare const parallelLimit: (taskFunctions: (() => Promise<any>)[], limit?: number | undefined) => Promise<any[]>;
 
+/**
+ * Log a user action on the client (cannot be used on the server)
+ * @author Gabe Abrams
+ */
+declare const logClientEvent: LogFunction;
+
+/**
+ * Initialize a log collection given the dce-mango Collection class
+ * @author Gabe Abrams
+ * @param Collection the Collection class from dce-mango
+ * @returns initialized logCollection
+ */
+declare const initLogCollection: (Collection: any) => any;
+
 /**
  * List of error codes built into the react kit
  * @author Gabe Abrams
@@ -727,4 +882,19 @@ declare enum DayOfWeek {
     Sunday = "u"
 }
 
-export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, ItemPicker, LoadingSpinner, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initServer, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };
+/**
+ * Built-in metadata for logs
+ * @author Gabe Abrams
+ */
+declare const LogBuiltInMetadata: {
+    Context: {
+        Uncategorized: string;
+        ServerRenderedErrorPage: string;
+        ServerEndpointError: string;
+    };
+    Target: {
+        NoSpecificTarget: string;
+    };
+};
+
+export { AppWrapper, ButtonInputGroup, CheckboxButton, CopiableBox, DAY_IN_MS, DayOfWeek, Drawer, ErrorBox, ErrorWithCode, HOUR_IN_MS, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, Variant, abbreviate, alert, avg, ceilToNumDecimals, confirm, floorToNumDecimals, forceNumIntoBounds, genRouteHandler, getHumanReadableDate, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, initLogCollection, initServer, logClientEvent, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, roundToNumDecimals, showFatalError, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.1.20",
+  "version": "3.2.0-beta.10",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -303,7 +303,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     undefined
     | {
       title: string,
-      text: string
+      text: string,
     }
   >(undefined);
   setAlertInfo = setAlertInfoInner;

package/src/constants/LOG_ROUTE_PATH.ts

@@ -0,0 +1,9 @@
+import ROUTE_PATH_PREFIX from './ROUTE_PATH_PREFIX';
+
+/**
+ * Path of the route for storing client-side logs
+ * @author Gabe Abrams
+ */
+const LOG_ROUTE_PATH = `${ROUTE_PATH_PREFIX}/log`;
+
+export default LOG_ROUTE_PATH;

package/src/constants/ROUTE_PATH_PREFIX.ts

@@ -0,0 +1,7 @@
+/**
+ * Path that all routes start with
+ * @author Gabe Abrams
+ */
+const ROUTE_PATH_PREFIX = '/dce-reactkit';
+
+export default ROUTE_PATH_PREFIX;

package/src/helpers/genRouteHandler.ts

@@ -1,5 +1,8 @@
 // Import caccl functions
-import { cacclGetLaunchInfo } from '../server/initServer';
+import {
+  cacclGetLaunchInfo,
+  internalGetLogCollection,
+} from '../server/initServer';
 
 // Import shared types
 import ReactKitErrorCode from '../types/ReactKitErrorCode';
@@ -9,6 +12,19 @@ import ParamType from '../types/ParamType';
 import handleError from './handleError';
 import handleSuccess from './handleSuccess';
 import genErrorPage from '../html/genErrorPage';
+import parseUserAgent from './parseUserAgent';
+import getTimeInfoInET from './getTimeInfoInET';
+
+// Import shared types
+import LogFunction from '../types/LogFunction';
+import Log from '../types/Log';
+import LogType from '../types/LogType';
+import LogSource from '../types/LogSource';
+import LogTypeSpecificInfo from '../types/Log/LogTypeSpecificInfo';
+import LogMainInfo from '../types/Log/LogMainInfo';
+import LogSourceSpecificInfo from '../types/Log/LogSourceSpecificInfo';
+import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
+import LogAction from '../types/LogAction';
 
 /**
  * Generate an express API route handler
@@ -55,6 +71,7 @@ const genRouteHandler = (
             status?: number,
           },
         ) => void,
+        logServerEvent: LogFunction,
       },
     ) => any,
     skipSessionCheck?: boolean,
@@ -439,6 +456,195 @@ const genRouteHandler = (
       );
     }
 
+    /*----------------------------------------*/
+    /*               Log Handler              */
+    /*----------------------------------------*/
+
+    // Create a log handler function
+
+    /**
+     * Log an event on the server
+     * @author Gabe Abrams
+     */
+    const logServerEvent: LogFunction = async (opts) => {
+      // NOTE: internally, we slip through an opts.overrideAsClientEvent boolean
+      // that indicates that this is actually a client event, but we don't
+      // include that in the LogFunction type because this is internal and
+      // hidden from users
+      try {
+        // Parse user agent
+        const {
+          browser,
+          device,
+        } = parseUserAgent(req.headers['user-agent']);
+
+        // Get time info in ET
+        const {
+          timestamp,
+          year,
+          month,
+          day,
+          hour,
+          minute,
+        } = getTimeInfoInET();
+
+        // Main log info
+        const mainLogInfo: LogMainInfo = {
+          id: `${launchInfo.userId}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
+          userFirstName: launchInfo.userFirstName,
+          userLastName: launchInfo.userLastName,
+          userEmail: launchInfo.userEmail,
+          userId: launchInfo.userId,
+          isLearner: !!launchInfo.isLearner,
+          isAdmin: !!launchInfo.isAdmin,
+          isTTM: !!launchInfo.isTTM,
+          courseId: launchInfo.courseId,
+          courseName: launchInfo.courseName,
+          browser,
+          device,
+          year,
+          month,
+          day,
+          hour,
+          minute,
+          timestamp,
+          context: (
+            typeof opts.context === 'string'
+              ? opts.context
+              : (
+                ((opts.context as any) ?? {})._
+                ?? LogBuiltInMetadata.Context.Uncategorized
+              )
+          ),
+          subcontext: (
+            typeof opts.context === 'string'
+              ? opts.subcontext
+              : (
+                ((opts.subcontext as any) ?? {})._
+                ?? LogBuiltInMetadata.Context.Uncategorized
+              )
+          ),
+          tags: opts.tags ?? [],
+          metadata: opts.metadata ?? {},
+        };
+
+        // Type-specific info
+        const typeSpecificInfo: LogTypeSpecificInfo = (
+          ('error' in opts && opts.error)
+            ? {
+              type: LogType.Error,
+              errorMessage: opts.error.message ?? 'Unknown message',
+              errorCode: opts.error.code ?? ReactKitErrorCode.NoCode,
+              errorStack: opts.error.stack ?? 'No stack',
+            }
+            : {
+              type: LogType.Action,
+              target: (
+                (opts as any).target
+                ?? LogBuiltInMetadata.Target.NoSpecificTarget
+              ),
+              action: (
+                (opts as any).action
+                ?? LogAction.Unknown
+              ),
+            }
+        );
+
+        // Source-specific info
+        const sourceSpecificInfo: LogSourceSpecificInfo = (
+          (opts as any).overrideAsClientEvent
+            ? {
+              source: LogSource.Client,
+            }
+            : {
+              source: LogSource.Server,
+              routePath: req.path,
+              routeTemplate: req.route.path,
+            }
+        );
+
+        // Build log event
+        const log: Log = {
+          ...mainLogInfo,
+          ...typeSpecificInfo,
+          ...sourceSpecificInfo,
+        };
+
+        // Either print to console or save to db
+        const logCollection = internalGetLogCollection();
+        if (logCollection) {
+          // Store to the log collection
+          await logCollection.insert(log);
+        } else {
+          // Print to console
+          if (log.type === LogType.Error) {
+            console.error('dce-reactkit error log:', log);
+          } else {
+            console.log('dce-reactkit action log:', log);
+          }
+        }
+
+        // Return log entry
+        return log;
+      } catch (err) {
+        // Print because we cannot store the error
+        console.error('Could not log the following:', opts);
+        
+        // Create a dummy log to return
+        const dummyMainInfo: LogMainInfo = {
+          id: '-1',
+          userFirstName: 'Unknown',
+          userLastName: 'Unknown',
+          userEmail: 'unknown@harvard.edu',
+          userId: 1,
+          isLearner: false,
+          isAdmin: false,
+          isTTM: false,
+          courseId: 1,
+          courseName: 'Unknown',
+          browser: {
+            name: 'Unknown',
+            version: 'Unknown',
+          },
+          device: {
+            isMobile: false,
+            os: 'Unknown',
+          },
+          year: 1,
+          month: 1,
+          day: 1,
+          hour: 1,
+          minute: 1,
+          timestamp: Date.now(),
+          tags: [],
+          metadata: {},
+          context: LogBuiltInMetadata.Context.Uncategorized,
+          subcontext: LogBuiltInMetadata.Context.Uncategorized,
+        };
+        
+        const dummyTypeSpecificInfo: LogTypeSpecificInfo = {
+          type: LogType.Error,
+          errorMessage: 'Unknown',
+          errorCode: 'Unknown',
+          errorStack: 'No Stack',
+        };
+
+        const dummySourceSpecificInfo: LogSourceSpecificInfo = {
+          source: LogSource.Server,
+          routePath: req.path,
+          routeTemplate: req.route.path,
+        };
+
+        const log: Log = {
+          ...dummyMainInfo,
+          ...dummyTypeSpecificInfo,
+          ...dummySourceSpecificInfo,
+        };
+
+        return log;
+      }
+    };
+
     /*------------------------------------------------------------------------*/
     /*                              Call handler                              */
     /*------------------------------------------------------------------------*/
@@ -490,6 +696,22 @@ const genRouteHandler = (
     ) => {
       const html = genErrorPage(opts);
       send(html, opts.status ?? 500);
+
+      // Log
+      logServerEvent({
+        context: LogBuiltInMetadata.Context.ServerRenderedErrorPage,
+        error: {
+          message: `${opts.title}: ${opts.description}`,
+          code: opts.code,
+        },
+        metadata: {
+          title: opts.title,
+          description: opts.description,
+          code: opts.code,
+          pageTitle: opts.pageTitle,
+          status: opts.status ?? 500,
+        },
+      });
     };
 
     // Call the handler
@@ -504,6 +726,7 @@ const genRouteHandler = (
         },
         redirect,
         renderErrorPage,
+        logServerEvent,
       });
 
       // Send results to client (only if next wasn't called)
@@ -513,7 +736,15 @@ const genRouteHandler = (
     } catch (err) {
       // Send error to client (only if next wasn't called)
       if (!responseSent) {
-        return handleError(res, err);
+        handleError(res, err);
+
+        // Log server-side error
+        logServerEvent({
+          context: LogBuiltInMetadata.Context.ServerEndpointError,
+          error: err,
+        });
+
+        return;
       }
 
       // Log error that was not responded with

package/src/helpers/logClientEvent.tsx

@@ -0,0 +1,68 @@
+// Import shared types
+import LOG_ROUTE_PATH from '../constants/LOG_ROUTE_PATH';
+import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
+import LogFunction from '../types/LogFunction';
+
+// Import shared functions
+import visitServerEndpoint from './visitServerEndpoint';
+
+/**
+ * Log a user action on the client (cannot be used on the server)
+ * @author Gabe Abrams
+ */
+const logClientEvent: LogFunction = async (opts) => {
+  return visitServerEndpoint({
+    path: LOG_ROUTE_PATH,
+    method: 'POST',
+    params: {
+      context: (
+        typeof opts.context === 'string'
+          ? opts.context
+          : (
+            ((opts.context as any) ?? {})._
+            ?? LogBuiltInMetadata.Context.Uncategorized
+          )
+      ),
+      subcontext: (
+        typeof opts.context === 'string'
+          ? opts.subcontext
+          : (
+            ((opts.subcontext as any) ?? {})._
+            ?? LogBuiltInMetadata.Context.Uncategorized
+          )
+      ),
+      tags: JSON.stringify(opts.tags ?? []),
+      metadata: JSON.stringify(opts.metadata ?? {}),
+      errorMessage: (
+        (opts as any).error
+          ? (opts as any).error.message
+          : undefined
+      ),
+      errorCode: (
+        (opts as any).error
+          ? (opts as any).error.code
+          : undefined
+      ),
+      errorStack: (
+        (opts as any).error
+          ? (opts as any).error.stack
+          : undefined
+      ),
+      target: (
+        (opts as any).action
+          ? (
+            (opts as any).target
+            ?? LogBuiltInMetadata.Target.NoSpecificTarget
+          )
+          : undefined
+      ),
+      action: (
+        (opts as any).action
+          ? (opts as any).action
+          : undefined
+      ),
+    },
+  });
+};
+
+export default logClientEvent;