Attempt to use ulog (doesn't work properly) - See Download/ulog#29

package.json

@@ -110,6 +110,7 @@
     "react-style-proptype": "3.2.2",
     "reactstrap": "8.4.1",
     "recompose": "0.30.0",
+    "ulog": "2.0.0-beta.6",
     "webfontloader": "1.6.28",
     "winston": "3.2.1"
   },

src/components/appBootstrap/BrowserPageBootstrap.tsx

@@ -2,7 +2,6 @@
 import { Amplitude, AmplitudeProvider } from '@amplitude/react-amplitude';
 import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
-import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
@@ -13,13 +12,12 @@ import { MultiversalPageProps } from '../../types/pageProps/MultiversalPageProps
 import { OnlyBrowserPageProps } from '../../types/pageProps/OnlyBrowserPageProps';
 import { UserSemiPersistentSession } from '../../types/UserSemiPersistentSession';
 import { getAmplitudeInstance } from '../../utils/analytics/amplitude';
+import { createLogger } from '../../utils/app/logger';
 import UniversalCookiesManager from '../../utils/cookies/UniversalCookiesManager';
 import { getIframeReferrer, isRunningInIframe } from '../../utils/iframe';
 
 const fileLabel = 'components/appBootstrap/BrowserPageBootstrap';
-const logger = createLogger({
-  label: fileLabel,
-});
+const logger = createLogger(fileLabel);
 
 export type BrowserPageBootstrapProps = MultiversalAppBootstrapProps<MultiversalPageProps & MultiversalAppBootstrapPageProps>;
 
@@ -32,7 +30,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
   const {
     Component,
     err,
-    router
+    router,
   } = props;
   // When the page is served by the browser, some browser-only properties are available
   const pageProps = props.pageProps as unknown as MultiversalPageProps<OnlyBrowserPageProps>;
@@ -76,6 +74,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
     window['i18n'] = i18n;
     window['router'] = router;
     window['t'] = t;
+    window['logger'] = logger;
     logger.info(`Utilities have been bound to the DOM for quick testing (only in non-production stages):
         - amplitudeInstance
         - i18n

src/components/appBootstrap/MultiversalAppBootstrap.tsx

@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/node';
 import { isBrowser } from '@unly/utils';
-import { createLogger } from '@unly/utils-simple-logger';
 import { ThemeProvider } from 'emotion-theming';
 import { i18n } from 'i18next';
 import React from 'react';
@@ -11,16 +10,15 @@ import { MultiversalAppBootstrapProps } from '../../types/nextjs/MultiversalAppB
 import { MultiversalPageProps } from '../../types/pageProps/MultiversalPageProps';
 import { SSGPageProps } from '../../types/pageProps/SSGPageProps';
 import { SSRPageProps } from '../../types/pageProps/SSRPageProps';
+import { createLogger } from '../../utils/app/logger';
 import { initCustomerTheme } from '../../utils/data/theme';
 import i18nextLocize from '../../utils/i18n/i18nextLocize';
 import BrowserPageBootstrap, { BrowserPageBootstrapProps } from './BrowserPageBootstrap';
 import ServerPageBootstrap, { ServerPageBootstrapProps } from './ServerPageBootstrap';
 import UniversalGlobalStyles from './UniversalGlobalStyles';
 
 const fileLabel = 'components/appBootstrap/MultiversalAppBootstrap';
-const logger = createLogger({
-  label: fileLabel,
-});
+const logger = createLogger(fileLabel);
 
 export type Props = MultiversalAppBootstrapProps<SSGPageProps> | MultiversalAppBootstrapProps<SSRPageProps>;
 
@@ -44,8 +42,9 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
   });
 
   if (isBrowser() && process.env.APP_STAGE !== 'production') { // Avoids log clutter on server
-    console.debug('MultiversalAppBootstrap.props', props);
+    // console.debug('MultiversalAppBootstrap.props', props);
   }
+  logger(props);
 
   if (pageProps.isReadyToRender || pageProps.statusCode === 404) {
     console.info('MultiversalAppBootstrap - App is ready, rendering...');

src/pages/_app.tsx

@@ -15,7 +15,7 @@ import { SSGPageProps } from '../types/pageProps/SSGPageProps';
 import { SSRPageProps } from '../types/pageProps/SSRPageProps';
 import { sendWebVitals } from '../utils/analytics/amplitude';
 import '../utils/app/ignoreNoisyWarningsHacks'; // HACK This ignore warnings and errors I personally find too noisy and useless
-import '../utils/monitoring/sentry';
+import '../utils/monitoring/sentry'; // Init monitoring
 
 // See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
 config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

src/utils/app/logger.ts

@@ -0,0 +1,23 @@
+import ulog from 'ulog';
+
+// Formats aren't applied when doing logger.info()
+// See https://github.com/Download/ulog#formatting
+const myFormat = (logger, method, args): void => {
+  // add the logger name to the call
+  args.unshift(`[${logger.name}] `);
+};
+
+/**
+ * Create a new
+ *
+ * @param name
+ * @param options
+ */
+export const createLogger = (name: string, options?: object): any => {
+  ulog.level = process.env.APP_STAGE === 'production' ? ulog.ERROR : ulog.DEBUG;
+  ulog.formats.push(myFormat);
+
+  return ulog(name);
+};
+
+export default createLogger;