Failed fetching stories because the server is down - static storybook, Azure Devops, docker agent

[TomGranot]

I'm getting Failed fetching stories because the server is down with a static storybook build. Basically, I've got this line in my package.json, which I run using npm run test:visual-static-storybook:

"test:visual-static-storybook": "loki --requireReference --verboseRenderer --reactUri file:$PWD/storybook-static --chromeFlags=\"--headless\"",
chromeFlags=\"--headless\""`

This is of course only runs after I do build-storybook.

Some extra data:

1. This, surprisingly, works across two different developer environments (i.e. on our local Linux and Mac machines).
2. Our CI is onAzure DevOps Pipelines, and utilizes a container using the default Microsoft VSTS Ubuntu 16.04 agent image (i.e. this one, and more specifically using the tag ubuntu-16.04-docker-17.12.0-ce-standard).

Things I've tried:

1. With/without $PWD in the storybook path, i.e, file:./storybook and file:$PWD/storybook.
2. With/without the --headless and --no-sandbox chrome flags.
3. Looking inside the agent running the build and ensuring that the storybook static folder exists and has the correct permissions.
4. Making sure storybook indeed fills up that folder.

Issues I've consulted: https://github.com/oblador/loki/issues/85 https://github.com/oblador/loki/issues/142 https://github.com/oblador/loki/issues/143

[TomGranot]

@oblador When you get a sec, I know you're probably super busy:)

[oblador]

@tomgs Could you try upgrading to latest and adding the --chromeDockerWithoutSeccomp flag to the loki command?

[stefankendall]

I have the same issue, and --chromeDockerWithoutSeccomp does not resolve it.

[TomGranot]

@oblador Haven't gotten around to testing it yet, but I do remember trying with the flag (and the latest version), and having it fail. Will let you know once I get around to it again.

[jackall3n]

@tomgs did you resolve your issue here?

[fallion]

Any luck on this? It's blocking me as well.

[stefankendall]

I resorted to just switching my CI job to (run test || run test). It never seems to fail twice in a row, so every now and then the tests take a couple extra minutes to run.

It’s not ideal, but it works.

On Tue, Jan 21, 2020 at 6:18 AM Simon Prochazka notifications@github.com wrote:

Any luck on this? It's blocking me as well.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/oblador/loki/issues/148?email_source=notifications&email_token=AABX4GKYSOLX6AUKKDPDDBTQ63KZTA5CNFSM4HRJFWJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJPMRXY#issuecomment-576637151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABX4GPJN5KWH4GPYEC54WDQ63KZTANCNFSM4HRJFWJA .

[fallion]

No luck with that in Gitlab CI.

[TomGranot]

Haven't gotten around to taking a look at it since then, will update once I do.

[kirilldronkin]

I had the same error on GitLab CI with socket binding for dind. Inspired by the solution described here I finally managed to run Loki with built storybook, but unfortunately it wasn't without patching Loki's source code (by patch-package in postinstall hook, but yarn2 has the same functionality from the box afaik). The solution is based on GitLab's environment variables, and I'm not sure this can (or should) be transformed to something generic.

The patch

```patch diff --git a/node_modules/loki/src/targets/chrome/docker.js b/node_modules/loki/src/targets/chrome/docker.js index 6553433..2102710 100644 --- a/node_modules/loki/src/targets/chrome/docker.js +++ b/node_modules/loki/src/targets/chrome/docker.js @@ -106,10 +106,16 @@ function createChromeDockerTarget({ dockerUrl = baseUrl.replace('localhost', ip); } else if (baseUrl.indexOf('file:') === 0) { const staticPath = baseUrl.substr('file:'.length); - const staticMountPath = '/var/loki'; - runArgs.push('-v'); - runArgs.push(`${staticPath}:${staticMountPath}`); - dockerUrl = `file://${staticMountPath}`; + + if (process.env.CI) { + // In CI environment the fs is inherited from the parent container + dockerUrl = `file://${staticPath}`; + } else { + const staticMountPath = '/var/loki'; + runArgs.push('-v'); + runArgs.push(`${staticPath}:${staticMountPath}`); + dockerUrl = `file://${staticMountPath}`; + } } async function getIsImageDownloaded(imageName) { @@ -133,10 +139,36 @@ function createChromeDockerTarget({ } } + async function getParentContainerId(jobId) { + const { code, stdout, stderr } = await execa(dockerPath, [ + 'ps', + '-q', + '-f', + `label=com.gitlab.gitlab-runner.job.id=${jobId}` + ]); + + if (code !== 0) { + throw new Error(`Failed getting parent container id, ${stderr}`); + } + + return stdout.trim(); + } + async function start() { port = await getRandomPort(); ensureDependencyAvailable('docker'); + + if (process.env.CI) { + const jobId = process.env.CI_JOB_ID; + const parentContainerId = await getParentContainerId(jobId); + + debug(`CI environment job id - ${jobId}, parent container id - ${parentContainerId}`); + + runArgs.push('--volumes-from'); + runArgs.push(parentContainerId); + } + const args = runArgs .concat([ '--shm-size=1g', ```

[zaleGZL]

I build storybook, and run loki --reactUri file:./build-storybook, it not working, What caused this?

[leonid]

I had the same problems and it was due to erroneous requests to statics (styles, web fonts), after I removed and corrected them, the loki began to run normally, same for pre-builded case with storybook-static

[yo-atmosf3re]

I had the same problems and it was due to erroneous requests to statics (styles, web fonts), after I removed and corrected them, the loki began to run normally, same for pre-builded case with storybook-static

Hello, please tell me how you did it? Much needed, thank you!

[apostx]

I had the same problems and it was due to erroneous requests to statics (styles, web fonts), after I removed and corrected them, the loki began to run normally, same for pre-builded case with storybook-static

Hello, please tell me how you did it? Much needed, thank you!

I ran into the same issue. It is really about missing static assets and it looks like Loki is hiding the issue during runtime: https://github.com/oblador/loki/blob/master/packages/core/src/create-static-server.js#L48

You must edit the source of the Loki (node_modules\@loki\core\src\create-static-server.js) to log all the errors and to see the problematic files

[yo-atmosf3re]

I had the same problems and it was due to erroneous requests to statics (styles, web fonts), after I removed and corrected them, the loki began to run normally, same for pre-builded case with storybook-static

Hello, please tell me how you did it? Much needed, thank you!

I ran into the same issue. It is really about missing static assets and it looks like Loki is hiding the issue during runtime: https://github.com/oblador/loki/blob/master/packages/core/src/create-static-server.js#L48

You must edit the source of the Loki (node_modules@loki\core\src\create-static-server.js) to log all the errors and to see the problematic files

Please tell me how to do this?