DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on Edited on Originally published at thinkthroo.com

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>
...
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

Firstly, you will get the payload returned by calling useTelemetryData.

const payload = useTelemetryData();
Enter fullscreen mode Exit fullscreen mode

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,
  };
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
  }
};
Enter fullscreen mode Exit fullscreen mode

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}`);
Enter fullscreen mode Exit fullscreen mode

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);
  }
};
Enter fullscreen mode Exit fullscreen mode

This above code snippet has two more methods called conditionally, throughImage and throughFetch.

Image description

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/@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:

  1. https://github.com/refinedev/refine/blob/main/packages/core/src/components/telemetry/index.tsx#L39

  2. https://github.com/refinedev/refine/blob/main/packages/core/src/hooks/useTelemetryData/index.ts#L18

Top comments (0)