Failed to load stories in chrome.docker, loki version 0.32.0

[jamiepenney]

While running this command to update my local reference images: yarn build:storybook --quiet && loki update --requireReference --reactUri file:./storybook-static --chromeDockerImage yukinying/chrome-headless-browser-stable:latest

I'm getting the following error:

chrome.docker
       Fetching stories
       Failed fetching stories because the server is down
       Try starting it with "yarn storybook" or pass the --port or --host arguments if it's not running at http://192.168.1.131:49399

I have nailed this down to the chrome docker image not being able to access Storybook running on my host machine. I'm running this on an M1 Macbook running Docker Desktop 4.22.0, and if I enter the docker image while it is running then I can see that it is unable to access the host by running wget http://192.168.1.131:49399. If I access that URL locally, Storybook is successfully running on it.

If I manually edit the IP detection code on this line https://github.com/oblador/loki/blob/master/packages/target-chrome-docker/src/create-chrome-docker-target.js#L70 to instead always use host.docker.internal as the IP, then everything works correctly.

Is there a reason not to use host.docker.internal as the local IP address by default? An earlier commit added the docker argument required to ensure this works correctly on Linux: --add-host=host.docker.internal:host-gateway.

I'm not sure of the broader implications of this change. There doesn't appear to be any way to override the IP address when you are using the static Storybook build option, but I could add one if you think it's too risky to use host.docker.internal by default.

[huyit88]

Yes, i got the same problem . Can you @jamiepenney elaborate your workaround on mac?
What do you change to make it work?
Thanks!

[jamiepenney]

@huyit88 I've made a draft PR with my suggested changes. There's nothing you can do from a configuration perspective to fix it, but you could patch your local loki files in your node_modules in the mean time. The file is at node_modules/@loki/target-chrome-docker/src/create-chrome-docker-target.js

[huyit88]

Thank you.
It works.
I am not sure why it's relative to host issue. Be the way, With different network provider, the results are also different.
I able to run loki test at my company but get the same error when i run it at home and can't figure it out why.
Not sure if this workaround can apply for below issue.
#142
Anyway, thank for your input.

[fttneto]

I'm trying for a while to run Loki with chrome.docker settings and the only way I found to get it working is by replacing the code suggested in the PR opened by @jamiepenney and also running it through build and passing --reactUri option.

Trying to run it using yarn storybook will make the process fail with the same error that @jamiepenney said here.

So here's my question, @oblador, is still the intention for #474 to be merged? It's been there for a while, and if there's something needed of contribution I would be glad to contribute to this repository so that PR got merged.

[eraf2135]

I'm experiencing this same issue and updating these lines of code worked for me locally also.
It would be great to get PR #474 merged. Anything in particular blocking it?

[SergeyBrukov]

Hello everybody)
I'm having a lot of trouble connecting loki to ci/cd
The error Failed fetching stories because the server is down keeps falling

Maybe someone connected story book 8 to loki and, accordingly, to ci/cd ?
"test:ui": "npx loki test",
"test:ui:ci": "npm run storybook & wait-on http://localhost:9009 && npm run test:ui",

"build-storybook": "pnpm run build:tokens && pnpm run copy-required && npx storybook build -c .storybook -o ./storybook-static && npx loki --requireReference --reactUri file:./storybook-static",

"test-visual": "loki test",

"update-visual": "yarn loki update -- --port 9009",

"test:loki:test": "npx start-server-and-test http://localhost:9009 test-visual",

"test:ui:build": "pnpm loki test --requireReference --reactUri file:./public --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox' --port 9009",

"test:ui:ci:new": "concurrently --kill-others --raw --success first \"pnpm run test:ui:build --host localhost --port 9009\" \"deelay\""

const target = process.env.CI ? "chrome.app" : "chrome.docker";

module.exports = {
configurations: {
"chrome.laptop": {
target,
chromeDockerImage: "yukinying/chrome-headless-browser-stable:123.0.6312.86",
width: 1366,
height: 768,
deviceScaleFactor: 1,
mobile: false,
},
},
storiesFilter:
"^((?!Card|MainBannerV2|MainBanner|Menu|Event|ImageLazyLoader|GiftPromo|Popover|HomeTilesItem|Spinner|SportBanner|Flip|InputPassword).)*$",
reactUri: process.env.CI ? "http://localhost:9009" : "file:./public",
};

run-loki:
stage: run-loki
script:
- pnpm run i
- pnpm run start:storybook:ci > storybook.log 2>&1 & # Запуск Storybook у фоновому режимі
- npx wait-on http://localhost:9009 --timeout 60000 # Очікування доступності Storybook (збільшивши таймаут)
- cat storybook.log
- pnpm run test:loki:test
artifacts:
name: "loki"
expire_in: 1 hour
paths:
- .loki/difference/
- .loki/reference/
- .loki/current/
- storybook.log
when: always

[Vorbert-Kruk]

I'm experiencing this same issue and updating these lines of code worked for me locally also. It would be great to get PR #474 merged. Anything in particular blocking it?

Bumping the question.
Can we do anything to assist with progression on the #474 @jamiepenney?

[jamiepenney]

@Vorbert-Kruk I pushed up the PR initially but PR build actions require a maintainer to run, the feedback loop to get the PR building was too long so I left it hoping the maintainers would take the fix and run with it. I'll have another crack at it now, hopefully it doesn't need any other changes

[Vorbert-Kruk]

@jamiepenney Thanks for sharing how to process is looking.
Indeed one of the pipeline steps was failing, but it appears that after running it again, it passes 🎉
Seems that CI gods are with us! 😄

As maintainer still would be necessary for pushing this code further (they approval is necessary), I'll try to notify them under #474.
Hope that it will enable us to move forward.