Calling this.error inside preload on a _layout route hangs the site

[pablote]

Describe the bug
What the title says. I'm calling a service from a preload method in a _layout page, if the service fails then I'm calling the this.error function. When this happens on a layout page it seems to get stuck in permanent loading in browser, it never finishes loading.

Logs
There's nothing out of the ordinary in the server logs. In the browser the page never gets to load in the first place.

To Reproduce

Create a new sapper project using the template, and add this to a _layout.svelte:

<script context="module">
  export function preload({ params, query }) {
    this.error(500, "testing");
  }
</script>

If this is done in any other route, non layout, then it correctly loads and shows the error page.

Expected behavior
Expected to see the error page.

Information about your Sapper Installation:

• The output of npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers

npx: installed 1 in 1.225s

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 676.62 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 85.0.4183.102
    Firefox Developer Edition: 81.0
    Safari: 13.1.2
  npmPackages:
    rollup: ^2.3.4 => 2.26.11 
    sapper: ^0.28.0 => 0.28.6 
    svelte: ^3.17.3 => 3.25.0 

• Your browser

Tested on latest Chrome and Firefox Developer Edition. I don't think this is a browser issue.

• Your hosting environment (i.e. Local, GCP/AWS/Azure, Vercel/Begin, etc...)

Local testing with npm run dev

• If it is an exported (npm run export) or dynamic application

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely?

Sapper is currently only being evaluated. Not being able to do proper error handling would be a blocker, maybe there's a workaround or maybe I'm doing something wrong.

[saylerb]

I've run into this recently also. I wanted to fetch some data on every route, so I decided to put the preload inside _layout. If you put a console.log statement inside the preload before the error, it reveals that there's actually an infinite loop, since _error renders the layout.

Is there any way around this?

[ehrencrona]

I submitted a PR that breaks the infinite loop. However, there's no way to recover from this situation and render a styled error page, so it will result in an unstyled text response. For the situation described by @saylerb where the layout is loading data for other components you can probably skip loading the data on the error page by checking the page store if it is an error page.

[Conduitry]

This should be fixed in 0.28.10.

[pablote]

I submitted a PR that breaks the infinite loop. However, there's no way to recover from this situation and render a styled error page, so it will result in an unstyled text response. For the situation described by @saylerb where the layout is loading data for other components you can probably skip loading the data on the error page by checking the page store if it is an error page.

How would you do that? I don't see a way to tell from the page in the preload function from a _layout that what's being rendered is the _error page. I only see the URL path of the original route. I'm sorry if this is obvious, but I'm still unsure how to properly do error handling from a layout preload. Thanks.

[ehrencrona]

How would you do that? I don't see a way to tell from the page in the preload function from a _layout that what's being rendered is the _error page. I only see the URL path of the original route. I'm sorry if this is obvious, but I'm still unsure how to properly do error handling from a layout preload. Thanks.

Sorry for the late reply, but you can check for the error property in the page store. If set, it's an error page.