Crayons issue when using localStorage API

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi All,

We have submitted a public marketplace app in Freshdesk. The was working fine till the Crayons update. But now the dropdown fields fails to load.

Can someone confirm whether the crayons update will impact the existing app?

Thanks in Advance,
Priya Dharshini.

[Santhosh (Santhosh Balusamy)]

@Priyadharshini_Ramas,
Good Day, Welcome to the community!
There are plenty of changes in crayons v3,

kindly refer to this topic for more reference

Announcing Crayons v3 — new components with breaking changes

We have released a new major version of Crayons, with support for more than 18 new components, and a set of new features: Existing components from v2 now support additional customisation by modifying props Framework bindings for React — allowing React apps to listen and react to events emitted by Crayons components Framework support and usage examples for Vue and Angular Internationalization (i18n) support — allowing you to build multi-lingual interfaces with Crayons New CSS utilties for t…

Thanks

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi @Santhosh

We understand that there are many changes in the Crayons V3.

But my concern is will this update in crayons will impact in the existing app? The public marketplace app was publish on September 2021.

[Santhosh (Santhosh Balusamy)]

@Priyadharshini_Ramas,
it will have an impact, we modified the CDN link to v2 by ourselves,
can you please confirm, by looking into the app (by inspecting the deployed app) which points to v2 or the latest version?

Thanks

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi @Santhosh

Please refer the link below for the screenshot.
https://community.developers.freshworks.com/t/crayons-issue/5418?u=priyadharshini_ramas

[Raviraj (Raviraj Subramanian)]

Hi @Priyadharshini_Ramas,

For your question, yes, the Crayons V3 update affects existing apps as well. Since all the apps pointed to the latest version and v3 was released recently, all the apps by default started pointing to version 3.
So, we have migrated all the existing apps to point to v2 of the crayons version in the CDN URL.

We couldn’t find if your app points to which version in the screenshots that you have posted. Could you inspect the code of the app and check if the CDN URL has “@2” in it?

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi @Raviraj

Thanks for the explanation.

Since this app was published last year we have not used @2. We used just Crayons.

Please refer the below screenshot.

[Raviraj (Raviraj Subramanian)]

@Priyadharshini_Ramas Actually, our team has migrated all the existing apps which are in production to use v2 of Crayons and the URL will have “@2”.

Only when you publish a new version of the app, you will have to add “@2” to the URL as mentioned in the Crayons v2 documentation.

In the screenshot shared, it shows the whole Freshdesk page’s code. Could you right-click on the app and inspect the app’s code? You can find the HTML code you have used in the app if you do so.
Could you check if the Crayons CDN URL used in the HTML content of the app has “@2” in the imported script’s CDN URL?

It should look like the following script.
<script nomodule="" src="https://unpkg.com/@freshworks/crayons@2/dist/crayons/crayons.js"></script>

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi @Raviraj

Please find the screenshot below.

[Raviraj (Raviraj Subramanian)]

@Priyadharshini_Ramas I see this app has “@2” in the imported CDN URL for Crayons. The issue is not with the breaking changes introduced in the Crayons v3.

Could you please debug the issues for any changes in the app? Or help us troubleshoot account to access shared with me (raviraj.subramanian@freshworks.com) and reproducing steps if the app was not changed and introduced issues in the production?

[daniel22 (daniel)]

@Raviraj

Only when you publish a new version of the app, you will have to add “@2” to the URL as mentioned in the Crayons v2 documentation.

Thanks for the link.

[Priyadharshini_Ramas (Priyadharshini Ramasamy)]

Hi @Raviraj ,

We are still facing the issue issue in crayons dropdown fields. The App is deployed in Market place last year. So the customers are reaching us regarding the issue. Please do needful on this.

[kaustavdm (Kaustav Das Modak)]

Updates from Office Hour with @Priyadharshini_Ramas and team today:

1. The app was last published on Sep 2021
2. The app already uses crayons@2 URL, as found by inspecting the app’s iframe
3. The app uses localStorage to store data in the browser. Given that the Platform has disallowed localStorage usage, this was throwing an Unhandled exception due to not handling any error that may result from the localStorage API call.
4. Suggestion: Use client.db instead.

This is not a Crayons issue, but an issue arising out of using localStorage, whose exception was blocking rendering of some Crayons components that depend on the resulting data. Once the localStorage code is replaced with client.db there may still be other exceptions that will surface.

[kaustavdm (Kaustav Das Modak)]

@Priyadharshini_Ramas We are trying to debug the localStorage issue on our end. It will be very helpful if you can share the following details:

• App ID (or URL if it is a public app)
• Account ID and region if it is a custom app
• A screenshot or log showing the localStorage error