@egym/mwa-logger
v0.2.9
Published
The screen logger component that can capture and display request/response data exchanged between web and native apps.
Downloads
177
Keywords
Readme
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);