FIX: Add an error message screen when model fails to load

[JacobDiazCruz]

Closes #1618
Closes #2000
Closes #1809
Closes #1739

[agalin920]

This is not a satisfactory solution in my eyes. Looking at the sentry bug it looks like multiple things can fail if model is not populated. Furthermore having that model loaded is paramount for the Content route to render and behave properly.

So the questions to ask that would lead to a more appropriate solution are:
In what scenarios can the model be empty?
Are we rendering the component with an empty model or are we rendering a loading view while it is being fetched?
What are the conditions for my loading view and does it account for model?

Also, remember to clear indexed db and/or throttle internet speed for more thorough debugging

[agalin920]

Resolve comments

[JacobDiazCruz]

Upon checking my solution again, I think it's wrong that I've put an empty object in case the model is empty, since the model's value is already populated even before reaching this Action component.
But still, to answer your questions:

1. In any case, model prop/object should always have values since content items with SEO & meta are always dependent on them. The only thing that I can’t see is the empty "type" value within the model object. Which leads me to just applying a default string in case the "type" is undefined.

2. No, we're not rendering the component with an empty model. The model is already served when the parent Content component is rendered.

P.S I removed the empty object to avoid confusion.

[agalin920]

@JacobDiazCruz Can you share the model ZUID that has an empty type string?

1. According to the API this should never happen and if its a malformed record we should bring it up. In addition what kind of effects would occur if we default to empty string type? A type that should not be accounted for

2. Are you sure? What if the models are still fetching? Does it account for that?

[JacobDiazCruz]

Unfortunately, I can't replicate this issue on dev and I added a comment regarding that on the bug ticket #1618.

1. Upon checking again, the child components that contains this "type" prop is unused. So I can still safely perform actions and there are no effects if the type field is empty string.

2. There is a loading state when the models are still fetching on the parent component, so the Action component won't render before that.

[agalin920]

@JacobDiazCruz I can replicate this by blocking the request to the models endpoint and clearing indexedDB.

Can you share with me the piece of code that prevents the Action component to render without model data?

Either way if it is not being used lets simply remove it then

[JacobDiazCruz]

Got it, I think its best to just remove this code.

[finnar-bin]

Rendering the <NotFound /> component when props.model is empty also fixes the issue raised on #1739
Note: This flow already exists when viewing the list of items for headless and multi-page data types. I just went ahead and applied the same logic to single page. This also makes sure that no weird empty UI states are being rendered when prop.model is empty.

[agalin920]

@theofficialnar This does not seem right to me.

We already have handling for this so this is redundant.

[finnar-bin]

@theofficialnar This does not seem right to me.

We already have handling for this so this is redundant.

@agalin920 I originally wanted to use that component but the error message comes off to me like the item is missing instead of the item just failing to load. Wouldn't that confuse the users making them think that an item has been deleted?

[agalin920]

@theofficialnar What i mean is. I modified the URL to an invalid model zuid. Therefore the 'failure to load model' is already being handled so im not sure what you are attempting to solve with this change

[agalin920]

@theofficialnar The existing handling might be lacking so if anything I expect the current one to be updated as opposed to adding a nested child handling

[finnar-bin]

@theofficialnar The existing handling might be lacking so if anything I expect the current one to be updated as opposed to adding a nested child handling

@agalin920, yeah I guess I could just add that handling to show the error message you mentioned when the model is undefined. I checked how that message is being shown and currently it only shows up when the api call to fetch the model item failed.

[agalin920]

@theofficialnar Also look into is why could a model be undefined while the item loads properly. Could the child component that actually uses the model data simply be attempting a render before fetching models completes? Is there a guard rail that makes sure models are loaded before the item with the component that uses model data? What model data is even needed? Can it be obtained from the URL instead?

[agalin920]

I think this is going off in a wrong direction. Lets rewind a bit. What was wrong with the previous approved solution?

[finnar-bin]

@agalin920, the original fix resolves the issue with the missing modelType which wasn't really used anyway. But another error occurs which also breaks the app just like before this was fixed pertaining to a missing model ZUID. Actually, I just realized just now that I can just use the model zuid that's on the url param.

[finnar-bin]

Added a more simpler fix @agalin920