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