[x-license] Introduce usage telemetry #13530
Conversation
hasdfa
added
new feature
|
Deploy preview: https://deploy-preview-13530--material-ui-x.netlify.app/ Updated pages: |
github-actions
bot
added
the
PR: out-of-date
This comment was marked as outdated.
This comment was marked as outdated.
…emetry # Conflicts: # packages/x-license/package.json # pnpm-lock.yaml
github-actions
bot
removed
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
added
the
PR: out-of-date
…etry # Conflicts: # packages/x-license/package.json # packages/x-license/src/verifyLicense/verifyLicense.ts # pnpm-lock.yaml # tsconfig.json
github-actions
bot
added
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Signed-off-by: Vadym Raksha <[email protected]>
github-actions
bot
removed
the
PR: out-of-date
…o x-license/add-telemetry
…o x-license/add-telemetry
|
High level, this looks right 👍 There are new console warnings we need to fix when running 
|
| MUI_X_TELEMETRY_DISABLED=false | ||
| ``` | ||
|
|
||
| > Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. |
There was a problem hiding this comment.
This is not a quote.
| > Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. | |
| Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. |
| muiXTelemetrySettings.enableTelemetry(); | ||
| ``` | ||
|
|
||
| ### Setting the Flag in Your Application |
There was a problem hiding this comment.
| ### Setting the Flag in Your Application | |
| ### Setting the flag in your application |
| ponyfillGlobal.__MUI_X_TELEMETRY_DISABLED__ = false; | ||
| ``` | ||
|
|
||
| ## Opting Out |
There was a problem hiding this comment.
| ## Opting Out | |
| ## Opting out |
|
|
||
| <p class="description">MUI X Telemetry collects anonymous usage data to help improve the library. This guide will walk you through how to opt-in, opt-out, and configure telemetry.</p> | ||
|
|
||
| ## Opting In |
There was a problem hiding this comment.
| ## Opting In | |
| ## Opting in |
| MUI_X_TELEMETRY_DISABLED=true | ||
| ``` | ||
|
|
||
| > Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. |
There was a problem hiding this comment.
Note a quote
| > Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. | |
| Note that some frameworks may require you to prefix the environment variable with `REACT_APP_`, `NEXT_PUBLIC_`, etc. |
|
|
||
| function generateId(length: number): string { | ||
| let result = ''; | ||
| const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; |
There was a problem hiding this comment.
Lol ai/nanoid#309 it might be pushing it too far.
| typeof window === 'undefined' || process.env.NODE_ENV === 'test' | ||
| ? () => '' | ||
| : async () => { | ||
| const FingerprintJS = await import('@fingerprintjs/fingerprintjs'); |
There was a problem hiding this comment.
It looks like we should remove this dependency per https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/licensing.md
| const FingerprintJS = await import('@fingerprintjs/fingerprintjs'); |
We could use an older version: https://fingerprint.com/blog/fingerprintjs-license-change/, which most people seem to do, so I guess it's fine https://tools-public.mui.com/prod/pages/npmVersion
The problem is that they don't clearly define production https://fossa.com/blog/business-source-license-requirements-provisions-history/
Alternative: https://github.com/thumbmarkjs/thumbmarkjs
| import { getTelemetryEnvConfigValue } from './config'; | ||
| import { TelemetryEvent } from '../types'; | ||
| import { fetchWithRetry } from './fetcher'; | ||
| import * as packageJson from '../../package.json'; |
There was a problem hiding this comment.
| import * as packageJson from '../../package.json'; | |
| import packageJson from '../../package.json'; |
maybe this would fix the warning (in our docs, and likely in a lot of other project's).
Otherwise, we can use Babel like we did for __RELEASE_INFO__. You can search for MUI_MAJOR_VERSION, similar work, MUI X might need to expose this in other instances: mui/material-ui#43190.
There was a problem hiding this comment.
Can we rename this file and the other files? We don't use the kebab case naming convention for JavaScript/TypeScript files.
| 'X-Telemetry-Client-Version': packageJson.version, | ||
| 'X-Telemetry-Node-Env': (process.env.NODE_ENV as any) ?? '<unknown>', | ||
| }, | ||
| body: JSON.stringify([eventPayload]), |
There was a problem hiding this comment.
Why make it an array?
| body: JSON.stringify([eventPayload]), | |
| body: JSON.stringify(eventPayload), |
Goals
Background
MUI X was released almost 4 years ago, and the library has grown considerably in these 4 years, from new features to better defaults for all users. The way that we've been approaching this improvement process has been very much a manual one.
We're at MUI using the advanced components in some of our applications and plan to extend its usage across our codebases to dogfood MUI X internally more and make improvements based on our experiences.
On top of that, we actively engage with the community to gather feedback. For example, which components or features do you use mostly, ways to customise components, and more. This feedback is extremely valuable in steering feature development for MUI X.
However, there is a problem with this approach, which is that we can only collect feedback from a subset of users. This subset may have different needs and use-cases than you.
For this reason, we're currently exploring a more automated approach to collecting these points of feedback so that we can improve MUI X even more in the near future.
Furthermore, this will allow us to verify if improvements made to the components are improving the baseline of all applications.
Proposal
We're planning to add anonymized telemetry to the MUI X during the development process (excluding
NODE_ENV=production). We'll provide an optional opt-out through an environment variable or CLI command. For the start, it will be disabled by default for all users with the ability to opt-in so we would be able to test it.When enabled the CLI will collect telemetry at development and build time, when telemetry is collected we'll show a message explaining that telemetry is being collected with a link to documentation.
When telemetry is collected it'll be possible to add a flag to see the exact values being sent. These values, as said before, will be completely anonymized (except the license key, which we need for validation).
How we would push it
Demo preview
https://codesandbox.io/p/devbox/mui-x-telemetry-demo-forked-75sv9j?file=%2Fsrc%2Fmain.tsx
There's quite a few open source projects that take a similar approach, most notably:
Preview: https://deploy-preview-13530--material-ui-x.netlify.app/x/guides/telemetry/