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. https://github.com/oblador/loki/issues/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