CORE-764: new sentry logger

src/components/ToggleButtonGroup.spec.tsx

@@ -30,7 +30,8 @@ describe('ToggleButtonGroup', () => {
         selectionMode 
         ${'multiple'}
         ${'single'}
-    `(`matches snapshot with selectionMode #selectionMode`, ({selectionMode}) => {
+        ${undefined}
+    `(`matches snapshot with selectionMode $selectionMode`, ({selectionMode}) => {
         const tree = renderer.create(
             <ToggleButtonGroup 
                 selectionMode={selectionMode}

src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToggleButtonGroup matches snapshot with selectionMode #selectionMode 1`] = `
+exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
 <div
   aria-orientation="horizontal"
   className="sc-gsnTZi hmfeGJ"
@@ -130,7 +130,142 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode #selectionMode 1`
 </div>
 `;
 
-exports[`ToggleButtonGroup matches snapshot with selectionMode #selectionMode 2`] = `
+exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
+<div
+  aria-orientation="horizontal"
+  className="sc-gsnTZi hmfeGJ"
+  data-orientation="horizontal"
+  data-rac=""
+  onBlurCapture={[Function]}
+  onFocusCapture={[Function]}
+  onKeyDownCapture={[Function]}
+  role="radiogroup"
+>
+  <button
+    aria-checked={true}
+    className="sc-dkzDqf jDeGjH"
+    data-rac=""
+    data-selected={true}
+    data-testid="red-testid"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    role="radio"
+    type="button"
+  >
+    Red
+  </button>
+  <button
+    aria-checked={false}
+    className="sc-dkzDqf jDeGjH"
+    data-rac=""
+    data-testid="green-testid"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    role="radio"
+    type="button"
+  >
+    Green
+  </button>
+  <button
+    aria-checked={false}
+    className="sc-dkzDqf jDeGjH"
+    data-rac=""
+    data-testid="blue-testid"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    role="radio"
+    type="button"
+  >
+    Blue
+  </button>
+  <button
+    aria-checked={false}
+    className="sc-dkzDqf jDeGjH"
+    data-rac=""
+    data-testid="yellow-testid"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    role="radio"
+    type="button"
+  >
+    Yellow
+  </button>
+  <button
+    aria-checked={false}
+    className="sc-dkzDqf jDeGjH"
+    data-rac=""
+    data-testid="orange-testid"
+    disabled={false}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    role="radio"
+    type="button"
+  >
+    Orange
+  </button>
+</div>
+`;
+
+exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
 <div
   aria-orientation="horizontal"
   className="sc-gsnTZi hmfeGJ"

src/index.ts

@@ -31,4 +31,5 @@ export * from './contexts';
 export * from './hooks';
 export * from './theme';
 export * from './types';
+export * from './sentryLogger/sentryLog';
 export type { Key } from 'react-aria-components';

src/sentryLogger/sentryLog.spec.ts

@@ -0,0 +1,68 @@
+import { createSentryLogger } from './sentryLog';
+import * as Sentry from "@sentry/react";
+import { Level, Logger } from '@openstax/ts-utils/services/logger';
+
+describe('createConsoleLogger', () => {
+  let logFn: jest.SpyInstance;
+  let logger: Logger;
+
+  beforeEach(() => {
+    logger = createSentryLogger();
+    logFn = jest.spyOn(Sentry, 'addBreadcrumb').mockImplementation(() => null);
+  });
+
+  afterEach(() => {
+    logFn.mockReset();
+  });
+
+  it('logs all fields', () => {
+    logger.setContext({ extra: 'context' });
+    logger.logEvent(
+      Level.Info,
+      {
+        "timestamp": 1461165894000,
+        "event_id": "any-id",
+        "message": "This is a test",
+        "from": "/login",
+        "to": "/dashboard",
+        "profile": {},
+        "address": {
+          "city": "New York"
+        }
+      }
+    );
+
+    expect(logFn).toHaveBeenCalledWith(
+      {
+        "timestamp": 1461165894000,
+        "level": "info",
+        "message": "This is a test",
+        "category": "log",
+        "data": {
+          "from": "/login",
+          "to": "/dashboard",
+          "event_id": "any-id",
+          "extra": "context",
+          "city": "New York",
+        }
+      }
+    );
+  });
+
+  it('logs with missing fields', () => {
+    logger.logEvent(
+      Level.Warn,
+      {},
+    );
+
+    expect(logFn).toHaveBeenCalledWith(
+      {
+        "timestamp": undefined,
+        "category": "log",
+        "message": "",
+        "level": "warning",
+        "data": {}
+      }
+    );
+  });
+});

src/sentryLogger/sentryLog.ts

@@ -0,0 +1,47 @@
+import { addBreadcrumb, SeverityLevel } from "@sentry/react";
+import { createCoreLogger, Level } from '@openstax/ts-utils/services/logger';
+import { JsonCompatibleStruct } from "@openstax/ts-utils/routing";
+
+/**
+ * Flatten nested objects
+ * @see https://stackoverflow.com/a/70377608
+ */
+
+const flattenObj = (obj: { [x: string]: any; }) =>
+  Object.keys(obj).reduce((acc: { [x: string]: any; }, curKey) => {
+    if (typeof obj[curKey] === 'object') {
+      acc = { ...acc, ...flattenObj(obj[curKey]) }
+    } else {
+      acc[curKey] = obj[curKey]
+    }
+    return acc
+  }, {});
+
+const serializeLevel = (level: Level): SeverityLevel =>
+  level === Level.Warn ? 'warning' : level;
+
+const serializeBreadcrumb = (level: Level, breadcrumb: JsonCompatibleStruct): {
+  level?: SeverityLevel;
+  category?: string;
+  message?: string;
+  timestamp?: number;
+  data?: { [key: string]: any };
+} => {
+  const { type, category, message, timestamp, ...rest } = breadcrumb;
+
+  return {
+    level: serializeLevel(level),
+    category: 'log',
+    message: typeof message === 'string' ? message : '',
+    timestamp: typeof timestamp === 'number' ? timestamp : undefined,
+    data: flattenObj(rest),
+  }
+};
+
+/**
+ * Creates a logger that creates breadcrumbs using Sentry.
+ * @see https://develop.sentry.dev/sdk/data-model/event-payloads/breadcrumbs/
+ */
+export const createSentryLogger = () => createCoreLogger((level, breadcrumb) =>
+  addBreadcrumb(serializeBreadcrumb(level, breadcrumb))
+);