Problems with page refresh on a new collection page

[MisRob]

Summary

When I reload a new collection page then:

1. In Chrome, I can see "Page not found" but there is an error in a console:

Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined

2. In Firefox, I can't see "Page not found":

Firefox behavior is problematic on different pages in this regard - see #2389.

---

A general solution might be needed - see @jonboiser's comment.

Category

BUG

Usage Details

• Browser: Firefox, Chrome (different problems)

How to reproduce

1. Go to /channels
2. Navigate to "Collections" tab
3. Click "NEW COLLECTION" button
4. Reload the page

Real-life consequences

Confusion

[jonboiser]

A general solution might be needed - see @jonboiser's comment.

My suggestion was basically to not generate a UUID for a new Channel or Collection just for opening this modal. Is there a reason why we generate these IDs in advance? Or is it okay to not generate (or generate, but not put it in the URL right away) these IDs?

[MisRob]

My suggestion was basically to not generate a UUID for a new Channel or Collection just for opening this modal

This makes sense to me.

Is there a reason why we generate these IDs in advance? Or is it okay to not generate (or generate, but not put it in the URL right away) these IDs?

Sounds good to me. As long as we don't save the new, empty, object I can imagine using /new in URL. I assume that it's okay not to save an empty object and that ID might be generated later, when there are some data. Though I am not familiar with decisions around the current behavior and assume that it has something to do with creating new objects in IndexedDB so it would be better to check with @rtibbles in more detail.

[rtibbles]

The current behaviour of generating the UUID and using that in the URL was implemented prior to the deferred saving of new channels, so no problem in changing that. It will be easiest to still let the UUID be generated, but just use the /new in the URL as you suggest, this should not cause any issues.

[jonboiser]

In Chrome, the problem seems to be that when you refresh at a URL like
http://localhost:8080/en/channels/#/collections/8ee60d42abbd4a6a870733764ebf0d57

Which is a new, but unsaved collection, then you get an ill-formed msg object in handleFetchMessages

This results in two invalid calls:

/api/collections/api/channel
/api/channeluser?channel=collections

both returning a 404 => Error page, since it's treating the route component /collections as a channel ID.

However, if you refresh the link on a valid collection ID, you get the right msg and no problems.

I think if this behavior was fixed, it would resolve the original issue. But it also needs to be fixed just to implement a simplified client-side route like /collections/new.

[shruti862]

@bjester , I would like to work on this issue also; please assign me this issue.

[shruti862]

Hey @rtibbles @MisRob , I’ve noticed that this issue is not limited to the new collection page. When I open an already created collection to edit, I encounter the same “Channel not found” page upon reloading.

Screencast.from.01-02-25.02.56.52.PM.IST.webm

[shruti862]

Additionally, when I made the URL of the new collection page generic (i.e., /collections/new), the "Channel not found" page still appears upon reloading.

Screencast.from.01-02-25.03.02.14.PM.IST.webm

[shruti862]

Hey @rtibbles @MisRob,

Although the issue is not yet fully resolved in my PR, I have updated the URL of the new collection page to be generic. I would appreciate your guidance on how to resolve the issue that occurs when reloading the new collection page.

Looking forward to your suggestions. Thanks!

[bjester]

@shruti862 Could you look into where an error with errorType === ErrorTypes.CHANNEL_NOT_FOUND is pushed into the Vuex errors module? I believe that is what's causing it to appear, via this page which renders it here:

studio/contentcuration/contentcuration/frontend/channelList/views/ChannelListAppError.vue

Line 5 in efc508d

v-if="error.errorType === ErrorTypes.CHANNEL_NOT_FOUND"

[shruti862]

Hey @bjester,
After debugging, I found that the verifyChannel method in the ChannelModal.vue file is pushing an error where errorType === ErrorTypes.CHANNEL_NOT_FOUND into the Vuex errors module.

The issue arises because, in the route /channels/#/collections/new, the string 'collections' is being interpreted as channelId. As a result, loadChannel dispatches an error since it does not find any channel with channelId === 'collections'.

Let me know how you'd like to proceed with resolving this.

verifyChannel(channelId) {
        return new Promise((resolve, reject) => {
          // Check if we already have the channel locally
          if (this.getChannel(channelId)) {
            // Don't allow view-only channels,
            // but allow admins to access
            if (this.getChannel(channelId).edit || this.user.is_admin) {
              resolve();
            } else {
              this.$store.dispatch('errors/handleGenericError', {
                errorType: ErrorTypes.UNAUTHORIZED,
                errorText: this.$tr('unauthorizedError'),
              });
              reject();
            }
            return;
          }
          this.loading = true;
          // If not, try to load the channel
          this.loadChannel(channelId).then(channel => {
            // Did our fetch return any channels, then we have a channel!
            if (channel && channel.edit) {
              this.loading = false;
              resolve();
              return;
            }
            // If not, reject!
            this.$store.dispatch('errors/handleGenericError', {
              errorType: ErrorTypes.CHANNEL_NOT_FOUND,
              errorText: this.$tr('notFoundError'),
            });
            reject();
          });
        });
      },

On the right tab in vue devtools , we can see channelId as 'collections' :

[MisRob]

Thanks for investigation @shruti862. I think it'd be meaningful to not raise this error from the new collection page.