Telemetry in Refine source code.

#opensource #react #javascript #telemetry

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