Fixed Ganache loading forever being stuck due to project details not loading #1382

maoueh · 2019-08-03T18:52:54Z

@davidmurdoch I talked to you yesterday (Friday August 2nd) at Trufflecon about this loading problem. I encountered it again in while attending the RSK workshop in the afternoon

The project loader is performed using a child spawn that should resolved or rejects at some point. However, it seems that in some cases (when some dependencies of the truffle project are missing), the child spawn will issue an 'exit event without ever entering the 'error event.

This is problematic because since this is not trapped properly, the actual Ganache dependency that is waiting for project loading to happen never resolves and the Ganache UI is loading forever being stuck in this loop.

To resolves that, the 'exit' signal is now caught as well as the standard error output of the process. When the child process exits with a bad error code and as now received the error event, a message is now forwarded within an Error object and the standard error output is present in there.

This removes the infinite loop in Ganache and shows the actual standard error in the process.

Caveats, this renders as Oups this is a bug dialog in Ganache while it's really a problem with the truffle project not being configured correctly. I think it's good enough as a first solving, but this could be improved later on be provided a different UI saying the project is misconfigured or something like this.

Here the error that happened to me in the child process while trying to load the truffle project:

$ node /var/folders/hy/f_lkgxf91_b7mt3trmxw671w0000gp/T/ganache11973-51771-ygd47j.eryz/index.js /Users/maoueh/work/acme/truffle-config.js
module.js:549
    throw err;
    ^

Error: Cannot find module 'truffle-hdwallet-provider'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/maoueh/work/acme/truffle-config.js:27:24)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

It was an easy fix once the message was shown up.

davidmurdoch · 2019-08-03T20:45:33Z

Wow. Thanks for digging in and finding the issue! Very happy to learn I was wrong about the root cause.

…der never resolves/rejects The project loader is performed using a child spawn that should resolved or rejects at some point. However, it seems that in some cases (when some dependencies of the truffle project are missing), the child spawn will issue an 'exit` event without ever entering the 'error` event. This is problematic because since this is not trapped properly, the actual Ganache dependency that is waiting for project loading to happen never resolves and the Ganache UI is loading forever being stuck in this loop. To resolves that, the 'exit' signal is now catched as well as the standard error output of the process. When the child process exits with a bad error code and as now received the `error` event, a message is now forwarded within an `Error` object and the standard error output is present in there. This removes the infinite loop in Ganache and shows the actual standard error in the process. Caveats, this renders as 'Oups this is a bug' dialog in Ganache while it's really a problem with the truffle project not being configured correctly. I think it's good enough as a first solving, but this could be improved later on be provided a different UI saying the project is misconfigured or something like this.

… into fix/fetch-project-details-never-resolving

davidmurdoch · 2019-08-24T00:25:03Z

src/main/main.js

      if (truffleIntegration) {
        await truffleIntegration.stopWatching();
      }

      if (chain.isServerStarted()) {
        // Something wrong happened in the chain, let's try to stop it
+        if (mainWindow) {


It was possible for the error here to cause the UI to render before the UI had all the data it needs to render. This change makes sure the chain is ready before sending the error to the mainWindow.

davidmurdoch · 2019-08-24T00:26:04Z

src/renderer/screens/config/ConfigScreen.scss

@@ -8,6 +8,7 @@
  left: 0px;
  right: 0px;
  width: 100%;
+  overflow: auto;


These were some drive-by fixes to CSS layout issues. Mainly due to the new error message that can cause the screen to overflow the y axis.

davidmurdoch · 2019-08-24T00:27:47Z

src/renderer/screens/config/ConfigScreen.scss

    }

    .RowItem {
-      width: 50%;
+      width: calc(50% - 1rem);


The expanding stack trace section of the error message was causing a jump. 50% was a lie due to css's padding rules. Using calc and justify-content: space-between; keeps things from jumping around (and makes the two columns actually equal in width)

davidmurdoch · 2019-08-24T00:28:43Z

src/renderer/screens/config/ConfigScreen.scss

@@ -199,6 +195,13 @@
      border-bottom: 1px solid;
      border-bottom-color: rgba(0, 0, 0, 0.2);

+      button {


Just special styling of buttons that appear in .ValidationErrors. There is only one use case so far.

davidmurdoch · 2019-08-24T00:30:19Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

              <div className="WorkspaceProjects">
                <div className="projectItemContainer">
-                  {projects.map((path, idx) => {
+                  {(projects || []).map((path, idx) => {


I've found that projects can be undefined sometimes, likely due to a race condition. I didn't want to dive in and fix this one, as I think it needs a pretty large re architecture to fix it right.

davidmurdoch · 2019-08-24T00:31:05Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

+                  </div>
+                  <br />
+                </div>
+              )}


I feel like this is not idiomatic React. Comments appreciated!

davidmurdoch · 2019-08-24T00:35:08Z

src/truffle-integration/projectsWatcher.js

@@ -1,3 +1,4 @@
+const { encodeEventSignature } = require("web3-eth-abi");


All the changes in this file are already in develop (see trufflesuite/ganache@4f8c534#diff-4e386a10b26b7224f48e8ee5a9652a3cR1-R129) and I can't seem to make them easily go away from this PR. You can ignore all changes in this file.

davidmurdoch · 2019-08-24T00:36:54Z

package.json

@@ -248,7 +249,8 @@
    "truffle-decoder": "^3.0.8",
    "universal-analytics": "^0.4.13",
    "uuid": "^3.1.0",
-    "web3": "1.2.1"
+    "web3": "1.2.1",
+    "web3-eth-abi": "1.2.1"


This change is already in develop. /shrug

adrianmcli

@davidmurdoch added a few comments.

adrianmcli · 2019-08-25T07:08:47Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

@@ -120,9 +122,43 @@ class WorkspaceScreen extends Component {
          <h4>TRUFFLE PROJECTS</h4>
          <div className="Row">
            <div className="RowItem">
+              {this.props.config.validationErrors["workspace.project"] && (


This is pretty hard to read, might be worthwhile to assign this to a more semantic variable first, like:

const validationErrors = this.props.config.validationErrors["workspace.project"]

And then use it like:

{validationErrors && <div>...</div>}

This would also simplify line 129 to simply be: validationErrors.message

adrianmcli · 2019-08-25T07:12:08Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

+                      <OnlyIf test={!this.state.showErrorDetails}>
+                        show stack trace
+                      </OnlyIf>
+                    </button>


6 lines for a conditional button text with usage of a custom <OnlyIf> component is a bit overkill. You could easily do something like:

<button> {this.state.showErrorDetails ? "hide stack trace" : "show stack trace"} </button>

adrianmcli · 2019-08-25T07:14:00Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

+                    }
+                    <button
+                      onClick={() => {
+                        this.setState({


I wonder if this could be a class method instead, to preserve readability:

toggleErrorDetails = () => this.setState({ showErrorDetails: !this.state.showErrorDetails })

And then your button can just be:

<button onClick={this.toggleErrorDetails}>

adrianmcli · 2019-08-25T07:19:55Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

+                          ].stack.map(line => line.toString())}
+                        </SyntaxHighlighter>
+                      </div>
+                    </OnlyIf>


Again, avoid use of the <OnlyIf> component. You can use short-circuiting here:

{this.state.showErrorDetails && <div>...</div>}

adrianmcli · 2019-08-25T07:20:51Z

src/renderer/screens/config/ConfigScreens/WorkspaceScreen.js

+                        <SyntaxHighlighter language="bash">
+                          {this.props.config.validationErrors[
+                            "workspace.project"
+                          ].stack.map(line => line.toString())}


If we followed the above suggestion to name validationErrors, we could change this to:

validationErrors.stack.map(line => line.toString())

…ading (#1382) Fixed Ganache loading forever being stuck because project details loader never resolves/rejects The project loader is performed using a child spawn that should resolved or rejects at some point. However, it seems that in some cases (when some dependencies of the truffle project are missing), the child spawn will issue an 'exit` event without ever entering the 'error` event. This is problematic because since this is not trapped properly, the actual Ganache dependency that is waiting for project loading to happen never resolves and the Ganache UI is loading forever being stuck in this loop. To resolves that, the 'exit' signal is now catched as well as the standard error output of the process. When the child process exits with a bad error code and as now received the `error` event, a message is now forwarded within an `Error` object and the standard error output is present in there. This removes the infinite loop in Ganache and shows the actual standard error in the process.

maoueh force-pushed the fix/fetch-project-details-never-resolving branch from e3bdd02 to 5ac0f46 Compare August 4, 2019 23:10

davidmurdoch added 6 commits August 22, 2019 18:54

fix:make contract events display again (fixes trufflesuite#1293)

b1502ba

Let's *not* roll our own event signature encoding.

cde84fb

clean up function a bit

00d50b1

Merge commit 'refs/pull/1382/head' of github.com:trufflesuite/ganache…

028de89

… into fix/fetch-project-details-never-resolving

Highlight truffle config errors when they happen

be6ce2f

make sure the config screen can scroll

a9be52e

davidmurdoch changed the base branch from develop to master August 24, 2019 00:22

davidmurdoch changed the base branch from master to develop August 24, 2019 00:22

davidmurdoch reviewed Aug 24, 2019

View reviewed changes

Remove dead code

4c16706

davidmurdoch reviewed Aug 24, 2019

View reviewed changes

adrianmcli reviewed Aug 25, 2019

View reviewed changes

davidmurdoch added 2 commits August 26, 2019 12:53

Code review edits

f902cca

Finally fix an annoying crash that only happens under development

c1db56f

davidmurdoch changed the base branch from develop to master August 26, 2019 19:58

davidmurdoch changed the base branch from master to develop August 26, 2019 19:59

davidmurdoch added 2 commits August 26, 2019 16:07

Merge

90c5cba

update package-lock.json

15509ab

davidmurdoch merged commit 6bea2fd into trufflesuite:develop Aug 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed Ganache loading forever being stuck due to project details not loading #1382

Fixed Ganache loading forever being stuck due to project details not loading #1382

maoueh commented Aug 3, 2019

davidmurdoch commented Aug 3, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

davidmurdoch Aug 24, 2019

adrianmcli left a comment

adrianmcli Aug 25, 2019

adrianmcli Aug 25, 2019

adrianmcli Aug 25, 2019

adrianmcli Aug 25, 2019

adrianmcli Aug 25, 2019

		@@ -1,3 +1,4 @@
		const { encodeEventSignature } = require("web3-eth-abi");

Fixed Ganache loading forever being stuck due to project details not loading #1382

Fixed Ganache loading forever being stuck due to project details not loading #1382

Conversation

maoueh commented Aug 3, 2019

davidmurdoch commented Aug 3, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrianmcli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment