{"action":"created","issue":{"url":"https://api.github.com/repos/plotly/dash/issues/292","repository_url":"https://api.github.com/repos/plotly/dash","labels_url":"https://api.github.com/repos/plotly/dash/issues/292/labels{/name}","comments_url":"https://api.github.com/repos/plotly/dash/issues/292/comments","events_url":"https://api.github.com/repos/plotly/dash/issues/292/events","html_url":"https://github.com/plotly/dash/issues/292","id":341143892,"node_id":"MDU6SXNzdWUzNDExNDM4OTI=","number":292,"title":"Dash Dev Tools","user":{"login":"chriddyp","id":1280389,"node_id":"MDQ6VXNlcjEyODAzODk=","avatar_url":"https://avatars3.githubusercontent.com/u/1280389?v=4","gravatar_id":"","url":"https://api.github.com/users/chriddyp","html_url":"https://github.com/chriddyp","followers_url":"https://api.github.com/users/chriddyp/followers","following_url":"https://api.github.com/users/chriddyp/following{/other_user}","gists_url":"https://api.github.com/users/chriddyp/gists{/gist_id}","starred_url":"https://api.github.com/users/chriddyp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chriddyp/subscriptions","organizations_url":"https://api.github.com/users/chriddyp/orgs","repos_url":"https://api.github.com/users/chriddyp/repos","events_url":"https://api.github.com/users/chriddyp/events{/privacy}","received_events_url":"https://api.github.com/users/chriddyp/received_events","type":"User","site_admin":false},"labels":[{"id":958241929,"node_id":"MDU6TGFiZWw5NTgyNDE5Mjk=","url":"https://api.github.com/repos/plotly/dash/labels/Sponsored","name":"Sponsored","color":"97d8ef","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":14,"created_at":"2018-07-13T20:05:40Z","updated_at":"2018-08-01T16:20:24Z","closed_at":null,"author_association":"MEMBER","body":"In https://github.com/orgs/plotly/projects/3, many of our issues involve Dash's front-end: Front-end error handling, front-end live-DAG, front-end hot-reload.\r\n\r\nI'd like to open this issue to discuss an architecture for handling these requirements.\r\n\r\nSome framing:\r\n\r\n**JavaScript Error Handling**\r\n- We should expose Dash's front-end errors to the users. Currently, they are only available in the browser's dev tools, which is too hidden for our community.\r\n\r\nFor example, consider Atom's plugins:\r\n![image](https://user-images.githubusercontent.com/1280389/42711578-60c76c08-86b6-11e8-87e4-7232651fe51b.png)\r\n\r\n\r\n**Python Error Handling**\r\nCould we use the same architecture that we use for JavaScript errors to display python errors? That way, the user _never_ needs to look at the terminal for errors, they only need to focus on their app.\r\n\r\nFor example, consider create-react-app:\r\n![image](https://user-images.githubusercontent.com/1280389/42711603-7de38b3c-86b6-11e8-8739-042542e4b146.png)\r\n\r\nor werkzeug:\r\n![image](https://user-images.githubusercontent.com/1280389/42711614-90ed328c-86b6-11e8-8e3c-2b5fbcb92c3e.png)\r\n\r\n**Hot Reloading**\r\nIf we had hot-reloading, could we build a nice little \"control bar\" that users could use to configure hot reloading? For example, it could:\r\n- Tell the user if hot-reloading is on or off\r\n- Users could turn hot-reloading on and off\r\n- It could provide build times or \"last updated\" times\r\n\r\n**Displaying the DAG**\r\nIf we wanted to display the DAG to the user, could we place this in the Dash Dev Tools container as well?\r\n![image](https://user-images.githubusercontent.com/1280389/42711592-71733140-86b6-11e8-84e6-10f58bb6dac4.png)\r\n\r\n***\r\n\r\ncc @plotly/dash "},"comment":{"url":"https://api.github.com/repos/plotly/dash/issues/comments/409633166","html_url":"https://github.com/plotly/dash/issues/292#issuecomment-409633166","issue_url":"https://api.github.com/repos/plotly/dash/issues/292","id":409633166,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTYzMzE2Ng==","user":{"login":"rmarren1","id":10272301,"node_id":"MDQ6VXNlcjEwMjcyMzAx","avatar_url":"https://avatars3.githubusercontent.com/u/10272301?v=4","gravatar_id":"","url":"https://api.github.com/users/rmarren1","html_url":"https://github.com/rmarren1","followers_url":"https://api.github.com/users/rmarren1/followers","following_url":"https://api.github.com/users/rmarren1/following{/other_user}","gists_url":"https://api.github.com/users/rmarren1/gists{/gist_id}","starred_url":"https://api.github.com/users/rmarren1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rmarren1/subscriptions","organizations_url":"https://api.github.com/users/rmarren1/orgs","repos_url":"https://api.github.com/users/rmarren1/repos","events_url":"https://api.github.com/users/rmarren1/events{/privacy}","received_events_url":"https://api.github.com/users/rmarren1/received_events","type":"User","site_admin":false},"created_at":"2018-08-01T16:20:24Z","updated_at":"2018-08-01T16:20:24Z","author_association":"CONTRIBUTOR","body":"One point on the UI is that if we are dealing with a front-end error (originating from a React lifecycle method of come component in the app) then the app will [unmount by default as of React 16](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#new-behavior-for-uncaught-errors), so in the current solution we couldn't render the app and the error message.\r\n\r\nWe could include an error boundary around _every_ component in the tree, then figure out a way to bubble caught errors up to a higher-order error handler which will display the message along with the app (excluding the component in the app which caused the error). We might even be able to put a red-box around the space where the buggy component used to be, which would make it super apparent where the error comes from. I'll see if I can do this in the WIP I have."}}
{"actor":{"display_login":"rmarren1"}}