ADAPT-1837: Added guard code to avoid crashes on page previews.

[nplowman]

READY FOR REVIEW

Summary

• Fixes issue with Storyblok previews crashing on pages with large numbers of components. (Such as Story Overview)

Review By (Date)

• Before end of sprint.

Criticality

• 7/10. Affects only a small number of pages, but makes editing on these pages very frustrating.

Review Tasks

Setup tasks and/or behavior to test

1. Log into Storyblok
2. Make a copy of the Story Overview page (you could also edit the original, if you feel confident you won't accidentally save test changes).
3. Set the Preview URL to use the Netlify Preview environment.
4. Make any change on the page to trigger a preview update. (I usually test by adding a new Story Picker component to the Curated Stories list under the "Stories" tab, but any change to the page was triggering the issue).

Before Fix: Preview would crash, and eventually show an error message. (Something about "component" being undefined).
After Fix: Preview should update as expected.

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• N/A

Associated Issues and/or People

• https://stanfordits.atlassian.net/browse/ADAPT-1837

Resources

• The symptoms we were seeing, was that the data coming back from the storyblok.on('input') hook was resolving most but not all relationship fields. (A few random ones were containing only the UUID field).
• My best theory of why this was happening, was that we were exceeding the max limit of 100 relations in a single API request. https://www.storyblok.com/docs/technical-limits
• The Storyblok Bridge API seems to eventually resolve these relationships, but adding guard code prevents React from attempting to render these unresolved fields on the initial pass.

[yvonnetangsu]

Thanks, @nplowman ! I've tested this locally and it works well. I was still able to make changes to individual cards, rearrange them etc without the page crashing. I have one question for you, is there a reason that you use != instead of !== in the typeof story comparison?

[nplowman]

Thanks, @nplowman ! I've tested this locally and it works well. I was still able to make changes to individual cards, rearrange them etc without the page crashing. I have one question for you, is there a reason that you use != instead of !== in the typeof story comparison?

No specific reason. I'm fine changing it to the more strict type comparison if that's preferable.

[yvonnetangsu]

Thanks, @nplowman ! I've tested this locally and it works well. I was still able to make changes to individual cards, rearrange them etc without the page crashing. I have one question for you, is there a reason that you use != instead of !== in the typeof story comparison?

No specific reason. I'm fine changing it to the more strict type comparison if that's preferable.

Nah, it's fine the way it is. Thanks!

[sherakama]

LINTING IS COMING! I'm working through getting prettier and airbnb standards set up to take care of questions like whether or not to use strict comparisons or not.

[sherakama]

Just one question about how the uid eventually gets resolved but otherwise this seems to do the job.

[nplowman]

Just one question about how the uid eventually gets resolved but otherwise this seems to do the job.

I spent a bit of time trying to pin this down because it was bothering me as well.
It looks like I may have declared victory too early.

After running document.getElementsByClassName('ood-story-card') to validate the number of cards getting rendered, it looks like on the first time sb.on('input') is triggered, the count dropped from 50 down to 20ish. So the guard code is just preventing a hard crash. Cards that only have the UUID are just getting skipped.

[sherakama]

Code looks good but I am not getting an alert on https://app.storyblok.com/#!/me/spaces/78141/stories/0/0/24605778

Is this still the correct page to trigger this issue?

[nplowman]

Code looks good but I am not getting an alert on https://app.storyblok.com/#!/me/spaces/78141/stories/0/0/24605778

Is this still the correct page to trigger this issue?

Yes, but it should only trigger if it receives an unresolved UUID for one of the stories. (It will also only trigger once in a session, unless you delete the cookie).

If you try to edit one of the fields on the page, it should trigger it. If not, I'll take a closer look and see what is going on.

[sherakama]

Ah there it goes. I swear I did that already.

Ok. GTG.