lib-mwa-logger

The screen logger component that can capture and display request/response data exchanged between web and native apps.

Install

npm install @egym/mwa-logger --save

Components:

<EgymMwaDevtools />

<EgymMwaDevtools /> responsible for collection of different log messages and displaying them.

type Props = {
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  wrapperStyle?: CSSProperties;
  buttonStyle?: CSSProperties;
  ciConfig?: CIConfig;
};

type CIConfigItem = {
  value: string;
  description: string;
}

export type CIConfig = {
  appId: CIConfigItem,
  appName: CIConfigItem,
  gitCommitSha: CIConfigItem,
  gitCommitMsg: CIConfigItem,
  gitRef: CIConfigItem,
  gitRefType: CIConfigItem,
  isAutomatedBuild: CIConfigItem,
  automationId: CIConfigItem,
  automationName: CIConfigItem,
  buildId: CIConfigItem,
  buildNumber: CIConfigItem,
  platform: CIConfigItem,
}

Place it at the top level of your app tree, prefferably outside component. See example:

const App: React.FC = () => {
  const [showLogger] = useStore(getShowLoggerSelector);

  return (
    <Suspense fallback={<span />}>
      {showLogger && <EgymMwaDevtools position="top-right" />}
      <I18nextProvider i18n={i18n}>
        <ErrorBoundary fallback={<ErrorFallback />}>
          <Layout />
        </ErrorBoundary>
      </I18nextProvider>
    </Suspense>
  );
};

After you add <EgymMwaDevtools /> component you will see the debug button on the screen, click it to see messages:

<ErrorBoundary />

<ErrorBoundary /> catches errors anywhere in the child component tree, log those errors as WSOD message in the dev tools window, and display a fallback UI instead of the component tree that crashed. See example:

const App: React.FC = () => {
  const [showLogger] = useStore(getShowLoggerSelector);

  return (
    <Suspense fallback={<span />}>
      {showLogger && <EgymMwaDevtools position="top-right" />}
      <I18nextProvider i18n={i18n}>
        <ErrorBoundary fallback={<ErrorFallback />}>
          <Layout />
        </ErrorBoundary>
      </I18nextProvider>
    </Suspense>
  );
};

Log functions:

logHttpRequest, logHttpResponse

Should be used in pair to display http request and it's corresponding response, provided requestId will join them in one group.

declare const logHttpRequest: (method: string, url: string, requestId: string | number, payload?: any) => void;
declare const logHttpResponse: (method: string, url: string, requestId: string | number, response?: any) => void;

See example:

 try {
  const headers = await createHeaders(baseBackendUrl);

  logHttpRequest(method, urlResult, String(requestId), {
    payload: options?.payload,
    headers,
  });

  const response = await CapacitorHttp.request({
    method,
    url: urlResult,
    data: options?.payload,
    responseType: 'json',
    headers,
  });

  return await new Promise((resolve, reject) => {
    if (response.status >= 400 && response.status < 600) {
      reject(response);
    } else {
      logHttpResponse(method, urlResult, requestId, response);
      resolve(response);
    }
  });
} catch (error) {
  logHttpResponse(method, urlResult, requestId, error);
  return Promise.reject(error);
}

logDebug

Log any random message

declare const logDebug: (text: string, data?: any) => void;

See example:

logDebug('initialContext', initialContext);

logPortalsRequest, logPortalsResponse

Log portals pub/sub messages

declare const logPortalsRequest: (topic: string, data?: any) => void;
declare const logPortalsResponse: (topic: string, data?: any) => void;

It is recommended to wrap the Portals.publish call with a custom implementation that includes a log request, so this way every publish event is captured and displayed in the logger window:

export const portalsPublish: PortalsPlugin['publish'] = async (message) => {
  logPortalsRequest(`${message.topic} ${message.data.type}`, message.data);

  await Portals.publish(message);
};

Same for Portals.subscribe:

export const portalsSubscribe = async <T>(
  options: SubscribeOptions,
  callback: SubscriptionCallback<T>
): Promise<PortalSubscription> => {
  return Portals.subscribe<T>(options, (...args) => {
    logPortalsResponse(options.topic, {
      ...options,
      ...args,
    });
    callback(...args);
  });
};

logWebWitals

export declare const logWebWitals: (metric: any) => void;

Pass this function to the reportWebVitals to log results of performance metrics src/index.tsx#77:

reportWebVitals(logWebWitals);