The screen logger component captures and displays request/response data exchanged between web and native apps.

# Install


```json
npm install @egym/mwa-logger --save
```

# Components:

## <EgymMwaDevtools />

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


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

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


```tsx
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:

| 1 | 2 |
|  --- | --- |
|  |  |


## <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:


```tsx
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>
  );
};
```

img
# 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.


```ts
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:


```ts
 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);
}
```

img
## logDebug

Log any random message


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

See example:


```ts
logDebug('initialContext', initialContext);
```

img
## logPortalsRequest, logPortalsResponse

Log portals pub/sub messages


```ts
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:


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

  await Portals.publish(message);
};
```

Same for `Portals.subscribe`:


```ts
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);
  });
};
```

img
## logWebWitals


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

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


```ts
reportWebVitals(logWebWitals);
```

img