Error message after browser inactivity "Failed to fetch"

[gbdesign2023]

Already with 'Kirby 3', the message "Failed to fetch" was displayed in the panel when the browser was inactive, e.g. after hibernation. This also continues with 'Kirby 4'. The problem is not reproducible, as the error message is displayed sporadically.

The following JS is displayed in the log: /media/panel/23fb94884a48c87b2205cae4ed48d2a6/js/index.min.js

• Kirby 4.01
• Apple MacBook M1
• macOS 14.2
• Chrome 119

[lukasbestle]

Do you have the opportunity to run the dev build of the Panel so we know where in the code the error is thrown?

You can run the dev build like so:

1. Replace your kirby folder with a clone of this repo so that you have all files, including the source files.
2. Follow the instructions in https://github.com/getkirby/kirby/tree/main/panel#kirby-panel
3. After running npm run dev, your browser should open the Panel in dev mode.

If you aren't able to do this, please let us know.

[gbdesign2023]

Thank you @lukasbestle for your feedback, unfortunately I have no way of following your instructions. I use MAMP locally. However, the error message has also occurred on a live site. It only appears if, for example, the computer was in sleep mode, the screen saver was active or the browser tab was open in the background. Can I collect further useful information with the Developer Tools console?

[lukasbestle]

With the production build it's unfortunately very hard to find the source of the issue, i.e. the specific request that fails and the code that should handle the case of a suspended network connection. The methods and lines in the trace point to the minified sources.

I haven't encountered this before and as you write it is hard to reproduce specifically. However it seems like you had this issue a few times already.

Another thing you could try:

1. I've built a source map for Kirby 4.0.1. Download it from here, extract the ZIP and upload the .map file to the kirby/panel/dist folder of your site: index.min.js.map.zip
2. Edit the kirby/panel/dist/index.min.js file and put the following comment in a new line at the end of the file: //# sourceMappingURL=index.min.js.map
3. Delete the media/panel folder and clear your browser cache
4. If you run into the same issue again, your trace will include more information that will help us with finding the source of the issue

[gbdesign2023]

Unfortunately, I don't have the expertise to follow your instructions from the first message. So thank you for your temporary solution. I hope the error message will reappear shortly and I can give you more details.

However it seems like you had this issue a few times already.

Yes, I have seen this error message many times before. Sometimes after a short time, when another tab was open in the browser and I returned to the Kirby panel. Sometimes only after the computer has been idle.

I've built a source map for Kirby 4.0.1.

In the meantime I have updated to 4.0.2. Is the index.min.js.map still compatible with it?

I now keep the Kirby panel open in the Polypane browser. The DevTools are always open there and the chances of getting more detailed information are better here.

[lukasbestle]

Yes, there were no changes in the frontend code between 4.0.1 and 4.0.2. Thanks for testing :)

[gbdesign2023]

@lukasbestle I had the PC in sleep mode overnight and after waking up the error message "Failed to fetch" was immediately visible again. I have now been able to copy the relevant passages in Chrome DevTools. I hope this information helps you. I was unable to achieve success with Polypane, as the page is automatically reloaded.

plugins.js:39 Plugin is replacing "k-block-type-table" hu @ plugins.js:39 https://gbd:8890/kirby-test/media/panel/src/panel/plugins.js

37  // check if the component is replacing a core component
38  if (isComponent(name) === true) {
39      window.console.warn(`Plugin is replacing "${name}"`);
40  }

at request.js:39:55 https://gbd:8890/kirby-test/media/panel/src/api/request.js

38  // fetch the resquest's response
39  const { response } = await responder(request, await fetch(request));
40
41  let data = response.json;

at Qa.e.request (index.js:56:17) https://gbd:8890/kirby-test/media/panel/src/api/index.js

55  try {
56      return await Request(api)(path, options);
57  } finally {
58      // restart the ping
59      ping();

at Object. (get.js:12:14) https://gbd:8890/kirby-test/media/panel/src/api/get.js

12  return api.request(
13      path,
14      Object.assign(options ?? {}, {
15          method: "GET"
16      }),

at a.check (FormButtons.vue:186:1) https://gbd:8890/kirby-test/media/panel/src/components/Forms/FormButtons.vue

183 methods: {
184 async check() {
185     if (this.$panel.isOffline === false) {
186         const { lock } = await this.$api.get(...this.api);
187         set(this.$panel.view.props, "lock", lock);
188     }
189 },

error @ panel.js https://gbd:8890/kirby-test/media/panel/src/panel/panel.js

167 error(error, openNotification = true) {
168     if (this.debug === true) {
169         console.error(error);
170     }
171
172     if (openNotification === true) {
173         return this.notification.error(error);
174     }
175 },

[gbdesign2023]

4. If you run into the same issue again, your trace will include more information that will help us with finding the source of the issue

How/where can I read out the additional information?

[lukasbestle]

Thank you @gbdesign2023. That already confirms the source of the issue. 👍 I'll still keep the "needs replication" label as I haven't been able to reproduce this on my machine yet.

The issue is very similar to https://github.com/getkirby/kirby/issues/5821 except that you get "Failed to fetch" instead of "NetworkError when attempting to fetch resource". But the difference in wording can also be because of a different browser as the error message is generated by the browser's fetch() implementation. To fix the issue, we have added a check that prevents the request from being sent when the Panel is offline. But for some reason, this does not seem to take effect for you.

@distantnative Do you have an idea why the lock request is sent and fails anyway?

[gbdesign2023]

Yes, the other error looks very similar. Unfortunately, the error message appears sporadically and cannot be reproduced. In any case, I have not yet found a way to do this. Could a browser add-on be the trigger? Or would that be visible in the DevTools log? I will try to open the Kirby panel in incognito mode with inactive add-ons and leave the PC in sleep mode overnight.

[distantnative]

@lukasbestle Maybe the offline event from the browser isn't as immediate as one would hope? So the Panel still thinks it's online and sends a lock request but that already fails?

[lukasbestle]

That could be it. Unfortunately the errors don't seem to be fully standardized. The spec just says "reject with a TypeError", so we cannot detect network errors specifically. If we could, we could have a mode in our request code that ignores and silently drops network errors and only throws other kinds of errors.

[miragecraft]

I've been encountering this error when my computer wake up from sleep and I have the panel open in the browser tab.

[beebmx]

I have the same error

[github-actions[bot]]

This issue has been marked as stale because it requires further input but has not seen activity in the past months. This is for us to prioritize issues that are still relevant and actionable. It will be closed if no further activity occurs within the next 15 days. If this issue is still relevant to you, please help us in gathering the necessary input.

[lukasbestle]

I think we know now why this happens and even if we ourselves couldn't reproduce it yet, it's clear that it can happen at any time. The issue is more that it's difficult to find a solution as discussed above.

[miragecraft]

It wasn’t a problem in v3, is it possible to revert to the old way of handling the error?

The biggest issue with this is that the error forces the page to reload, and will wipe out all the changes you’ve made in the editor. It’s especially problematic on mobile devices. I am forced to write my content in another editor and then copy it over to the panel when I’m done to ensure I won’t lose my work.

[afbora]

I can reproduce the issue with following steps:

Localhost method

• Open Kirby panel
• Make sure that content lock enabled
• Shutdown the local server
• Check Kirby panel for few seconds
• You'll see failed to fetch dialog when lock request called

Live site method

• Open Kirby panel
• Make sure that content lock enabled
• Turn off the internet connection
• Check Kirby panel for few seconds
• You'll see failed to fetch dialog when lock request called

When the computer goes to sleep, it turns off the internet connection. So I think this is expected behavior.

[afbora]

I'm almost pretty sure that this issue won't happen if content.locking option is disabled.

[distantnative]

@afbora Could you please check if these events are triggered: https://github.com/getkirby/kirby/blob/main/panel/src/panel/events.js#L16-L21? Cause if they'd be triggered properly, no content locking requests should be made while the Panel is offline.

[afbora]

@distantnative I've put console.log in online and offline emitter. Nothing happened. Logs is clear. Seems online and offline emitter never run. Am I missing something to test?

[distantnative]

I think there are two connected problems:

• online/offline events don't work reliably at all. At this point, we probably could throw them out all together. However, without such detection, lock requests cannot pause but keep running.
• Network connection errors aren't properly caught. Currently I think the culprit is this line https://github.com/getkirby/kirby/blob/main/panel/src/api/request.js#L39 where if the await fetch() call already fails, the error isn't specifically caught – what we try to do inside responder() https://github.com/getkirby/kirby/blob/main/panel/src/panel/request.js#L129-L173

[nilshoerrmann]

Maybe this is helpful:

I recently had to restart my router and got a "Panel is offline" message which was fine. While the router was rebooting it first reestablished wireless connection and only after that reconnected to our provider. But the panel message disappeared as soon as the wireless connection to the router was verified.

So the online event doesn't seem to check if there is actually a connection to a server but only to the next device allowing for internet communication. Not what you actually want to know in this case …

[miragecraft]

Has there been any updates on this issue?

This is currently the biggest pain point of Kirby for me.

[bastianallgeier]

@miragecraft we have already changed the behavior of the offline check to not run in local environments. This is in 4.4 Locking will also be gone entirely in v5, which should solve this once and for all.