This is a place where we document miscellaneous and advanced topics regarding development.
Usually, this is straightforward, if not for the fact that our usage of mobx
observer()
make React
devtool unable to give some component proper names, so you most likely will see some stack trace like this
... (some error) ...
(anonymous) index.js:90
(anonymous) index.js:100
...
Editor index.js:300
...
To have better idea of where the error is propagated from, one can refer to this guide. The way we can make React devtool to properly pick up the name of the component wrapped in observer()
is to do he following:
// before
const SomeComponent = observer((props: ...) => { ... });
// after
const SomeComponent = observer(function SomeComponent(props: ...) { ... });
To speed up development with Webpack
, we have disabled source-mapping. If you need source-mapping to properly use browser debugger tool, you could re-enable source-mapping
by running Webpack
in debug
mode, do so by using dev:webpack:debug
script for each application workspace.
yarn workspace @finos/legend-application-studio-deployment dev:webpack:debug
You'd probably run into this issue when running in browsers like Chrome because it does not acknowledge our self-signed certificate. If so, you can follow this guide on how to by pass this issue:
- In the browser address bar, type
chrome://flags/#allow-insecure-localhost
and switch toEnable
. - Go to the page again
localhost:9000/studio
, you should still see the warning. However, now, click somewhere on the page and typethisisunsafe
and you should see the page gets reloaded and display properly.
Clear all cookies for the site (including SDLC, engine, and Studio) and try to refresh. As a quick try, you can open Studio in a incognito window.