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 the Refine 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 calling useTelemetryData.
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 in the 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 in the 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 is Ramu 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 at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
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