Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Ramu Narasinga
Ramu Narasinga

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

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

Firstly, you will get the payload returned by callinguseTelemetryData.

const payload = useTelemetryData();
Enter fullscreen modeExit 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 modeExit 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 modeExit fullscreen mode

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;  }};
Enter fullscreen modeExit 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 inthe same file.

transport(`https://telemetry.refine.dev/telemetry?payload=${encoded}`);
Enter fullscreen modeExit 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 modeExit fullscreen mode

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

Image description

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:

  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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
  • Location
    India
  • Joined

More fromRamu Narasinga

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp