Posted on • Edited on • Originally published atthinkthroo.com
Telemetry in Refine source code.
In this article, we will review the Telemetry component in Refine source code.
...<UnsavedWarnContextProvider> <RouterComponent> {children} {!disableTelemetryWithDefault && ( <Telemetry /> )} <RouteChangeHandler /> </RouterComponent>...
This above code snippet is picked from/packages/core/src/components/containers/refine/index.tsx#L196
Telemetry
In theRefine component, Telemetry is imported as shown below
import { Telemetry } from "@components/telemetry";
To find the Telemetry code, we should look at@components/telemetry in Refine repository.
export const Telemetry: React.FC<{}> = () => { const payload = useTelemetryData(); const sent = React.useRef(false); React.useEffect(() => { if (sent.current) { return; } const encoded = encode(payload); if (!encoded) { return; } transport(`https://telemetry.refine.dev/telemetry?payload=${encoded}`); sent.current = true; }, []); return null;};
Firstly, you will get the payload returned by callinguseTelemetryData.
const payload = useTelemetryData();
useTelemetryData
useTelemetryData uses context and computes some values that are returned.
export const useTelemetryData = (): ITelemetryData => { const auth = useIsExistAuthentication(); const auditLogContext = useContext(AuditLogContext); const { liveProvider } = useContext(LiveContext); ... const auditLog = !!auditLogContext.create || !!auditLogContext.get || !!auditLogContext.update; const live = !!liveProvider?.publish || !!liveProvider?.subscribe || !!liveProvider?.unsubscribe; ... return { providers: { auth, auditLog, live, router, data, i18n, notification, accessControl, }, version: REFINE_VERSION, resourceCount: resources.length, projectId, };
This returned value is computed based on values available in contexts such as auditContext or liveContext for example.
This payload gets encoded
const encoded = encode(payload);
encode
encode is a function defined inthe same file and has the below code
const encode = (payload: ITelemetryData): string | undefined => { try { const stringifiedPayload = JSON.stringify(payload || {}); if (typeof btoa !== "undefined") { return btoa(stringifiedPayload); } return Buffer.from(stringifiedPayload).toString("base64"); } catch (err) { return undefined; }};
JSON is stringified, Buffer is created using this stringified JSON and is converted to string using base64.
transport is another interesting function I found inthe same file.
transport(`https://telemetry.refine.dev/telemetry?payload=${encoded}`);
transport
const throughImage = (src: string) => { const img = new Image(); img.src = src;};const throughFetch = (src: string) => { fetch(src);};const transport = (src: string) => { if (typeof Image !== "undefined") { throughImage(src); } else if (typeof fetch !== "undefined") { throughFetch(src); }};
This above code snippet has two more methods called conditionally, throughImage and throughFetch.
About me:
Hey, my name isRamu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email atramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@ramu-narasinga
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects
References:
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse