[x-license] Improve the error messages

[oliviertassinari]

Summary 💡

The license key was introduced to improve the DX. This issue is about exploring all the opportunities that we have to exploit the concept.

Opportunites 🌈

• 4. showInvalidLicenseKeyError() could log the license key used, the npm package that requires it too.
• 5. showExpiredPackageVersionError() could log the plan, the npm package, the license key used, the expiration date of their license, the release date, and the version of the package if the source of the problem. It would give a lot more context for the developers to find the solution.
  • https://mui.zendesk.com/agent/tickets/2730
  • https://mui.zendesk.com/agent/tickets/24593
  • [x-license] Multiple version support #15998
• 7. We could create a new error "License key version mismatch". This would be for perpetual licenses that are not allowed to use a new version. What would make the difference is to tell which version they use right now, and when is the maximum release date they are licensed for.
  • https://mui.zendesk.com/agent/tickets/5827
• 8. showExpiredPackageVersionError() could log the maintenance end date of the current key and the license key used.
  • [x-license] License of MUI X Premium license shows as MUI expired package version #13514. More details
• 9. showNotAvailableInInitialProPlanError() could log what's exactly not available. It's confusing without.
  • https://mui.zendesk.com/agent/tickets/24601

Done

• 1. Developers using the fake license key in https://mui.com/x/introduction/licensing/#how-to-install-the-key

  https://codesandbox.io/s/material-demo-forked-t81rv?file=/demo.js

  • Open https://material-ui.com/components/data-grid/getting-started/#license-key-installation
  • Copy the line
  • Forget to replace with the correct key
  • The error message could be very specific

  Hi, I can't install my license key in a react proyect, and i'm getting the watermark warning
  sorry! my bad, I copied and pasted the licence from the docs 😭😭

  Got it. We bought a license yesterday. I've added the license key but then a new watermark appeared: Material-UI X: Invalid license. What's wrong?

  Solved in [docs] Avoid confusion with license key installation #4891.

• 2. showNotFoundLicenseError: Lack of context about which npm package is triggering the license key not found.
  Solved in [license] Give more context in the missing license #5731.

• 3. Log each error type only once. While only logging an error once can create confusion because you might fix the issue, still see an error until you realize that it's the stack trace that is different! I would argue that it's still better to only log once. React has a bit trained the developers about this behavior. And more importantly, in our case, since all the variables are global, they shouldn't be cases where solving the error once, doesn't solve all the other console log. Solved in [license] Only log an error type once #5730.

• 6. Reporting wrong plan use [license] Confusing out of scope license error message #5246