Store throwing "Something went wrong" error on adding asset to current theme using custom app

syze-sahil
New Member
6 0 0

My custom in house Shopify App ("Swan Storefront Integration") adds a new file called "/snippets/syze-snippet.liquid" into the current theme and this file gets rendered from "/sections/product-template.liquid" file using "{% render 'syze-snippet' %}". When I do this, and go to my product page (where my app installs the theme changes), I start getting the error in below screenshot.

Now when I write this exact code manually in these files, then I am not getting any errors.

I would like to know the reason for this error, so that I can make changes to my shopify app. Ideally it would be great if I could get access to a backend error log, to get clarity on this error. If not then I would be happy to get an explanation for this error.

Displaying

 

Thanks for your help

0 Likes
syze-sahil
New Member
6 0 0

Is there any update on this?

0 Likes
_JB
Shopify Staff
Shopify Staff
834 98 182

Hey @syze-sahil,

My apologies, that reply was meant to go to my colleagues internally. I was able to replicate the issue as well, so we'll be investigating further and will post back here will an update.

JB | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
syze-sahil
New Member
6 0 0

Hey

Were you guys able to find anything on this internally? Any help will be appreciated here. This has added a bit of a roadblock in our work.

Thanks

 

0 Likes
_JB
Shopify Staff
Shopify Staff
834 98 182

Hey @syze-sahil,

The issue has been raised with our teams but I don't have an update to provide right now.

Incase it helps I'll provide what we're seeing in the logs. Our logs show an error regarding the encoding of characters, the specific error is invalid byte sequence in UTF-8.

The 500 error being returned means there's something on our end that needs to be fixed, so it's possible this info won't help much and the whole fix will need to come from our end. That being said, app proxies are working for other apps right now so it may be worth looking at how characters are being encoded by your app. 

JB | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
syze-sahil
New Member
6 0 0

Any possible help on this? My app has now been rejected by the Shopify Store Review team because of this error.
I have used standard put assets API to insert a HTML snippet in the theme code. Can you please let me know how I can fix this invalid byte sequence in UTF-8 error.

Thanks

0 Likes
_JB
Shopify Staff
Shopify Staff
834 98 182

Hey @syze-sahil,

Can you provide an install link for your app? Feel free to send in a DM if you prefer.

JB | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
syze-sahil
New Member
6 0 0

After doing some investigation, I found out that the error is occurring only when the snippet which our app creates, does not exist in the first place. So if we update an existing snippet, there is no utf encoding error. So as a trick fix, I made changes to my code, so that on a fresh install when no snippet is there, I am creating an empty snippet and then immediately I am doing another API call which updates the snippet file with the required content.
This issue has been fixed like this in my app now. So if you try installing my app, it will work properly.
Let me know if you need anything else from my side to get to the root cause of this issue, because right now I think that I still haven't made a proper fix.

You can also have a look at the code which I have implemented now to fix this.

// This if block added later to fix the issue

if (syzeSnippetInTheme.length === 0) {
const body = {
asset: {
key: syzeSnippetName,
attachment: ''
}
}
try {
await client.put({
path: `themes/${theme.id}/assets`,
data: body,
type: DataType.JSON,
});
} catch (e) {
console.error(e)
}
}
if (syzeSnippetInTheme.length === 0 || existingSnippetOld) {
const data = fs.readFileSync('./' + syzeSnippetName, 'utf8');
const body = {
asset: {
key: syzeSnippetName,
value: utf8.encode(data.replace('${SYZE_BRAND_ID}', shop))
}
}
try {
await client.put({
path: `themes/${theme.id}/assets`,
data: body,
type: DataType.JSON,
});
} catch (e) {
console.error(e)
}
} else {
console.log(syzeSnippetName + ' snippet already exists')
}

 

0 Likes