excalidraw companion server not using local assets
gerlingsm opened this issue · comments
Hello everybody,
this is my first issue so sorry if I missed something in the first place.
I have noticed that in newer versions the excalidraw companion server is not functional if the server or docker container have no public internet access.
I am getting the error message: "TimeoutError: Unable to convert the diagram: Navigation timeout of 30000 ms exceeded TimeoutError: Navigation timeout of 30000 ms exceeded at LifecycleWatcher._LifecycleWatcher_createTimeoutPromise (file:///usr/local/kroki/node_modules/puppeteer-core/lib/esm/puppeteer/common/LifecycleWatcher.js:154:12)"
I have (hopefully correctly) evaluated that this happened between version 0.19.0 and 0.20.0 and affect versions from 0.20.0 or higher.
I have searched online and found that excalidraw is using a public cdn per default but it is changeable by a variable.
(https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation)
However, the variable "window.EXCALIDRAW_ASSET_PATH" is not set in the docker container.
So for testing i added the line manually inside the docker container to the file /usr/local/kroki/assets/index.html right after "<body>" as "<script>window.EXCALIDRAW_ASSET_PATH="excalidraw/"</script>"
I am unsure if this is the right place to post but I can say that after that change and a restart of the docker container, everything is working fine and I no longer get the TimeoutError mentioned above.
Maybe this issue is related to #1529 and the following topic on zulip: https://kroki.zulipchat.com/#narrow/stream/232085-users/topic/Excalidraw.20error
Best regards
Max
For the record the index.html which is working for me:
<!doctype html>
<html>
<body>
<script>window.EXCALIDRAW_ASSET_PATH="excalidraw/"</script>
<script src="./excalidraw/react.production.min.js" charset="utf-8"></script>
<script src="./excalidraw/react-dom.production.min.js" charset="utf-8"></script>
<script src="./excalidraw/excalidraw.production.min.js" charset="utf-8"></script>
</body>
</html>
Interesting... Could you please submit a pull request with your change? Thanks!
yes, i will submit a pull request asap.
But i have to add something, which i didn't see before:
When the "window.EXCALIDRAW_ASSET_PATH" is set, the links to the fronts are also replaced.
This is the desired behaviour.
For example the kroki original example for excalidraw is using "Virgil" and "Cascadia" as fonts and loading them from https://unpkg.com/@excalidraw/excalidraw@0.15.2/dist/excalidraw-assets/
With window.EXCALIDRAW_ASSET_PATH="excalidraw/" set, the url is changed to "excalidraw//dist/excalidraw-assets/".
It is relative to the basepath, so with a standard kroki installation it will try to load the fonts from https://example.com/excalidraw/svg/excalidraw//dist/excalidraw-assets/Virgil.woff2 which results in an 404 error from kroki.
In my case this is not a problem. I am using an Apache2 reverse proxy before kroki so i can exclude this specific url from proxy pass.
Maybe it's possible to make a new ENVIRONMENT variable for this case, for example "KROKI_EXCALIDRAW_ASSET_PATH" and set default to an empty string?
An empty string behaves actually the same as if the variable were not set so it should work in the default place, when everything is connected to the internet.
But i am not familiar enough with the software to say if it is possible to implement like that...
Indeed, we need to load assets used server-side locally but on the client side we should load assets from the CDN or provide an option to load them from elsewhere. I don't want to serve these assets from kroki.io.
I have opened a pull request.
I have now implemented the change slightly differently via an environment variable, which is empty by default so that the standard behaviour (reloading via CDN) does not change.
Fixed in 2965a67
Thanks @gerlingsm 🙌🏻