Merge pull request #182 from electron/electron-logging

feat: add an execution toggle to enable advanced electron logging

src/less/root.less

@@ -3,7 +3,6 @@
 
 // Variables, also imported in each file
 @import "variables.less";
-
 @import "main.less";
 @import "container.less";
 @import "mosaic-vendor.less";

src/renderer/components/settings-execution.tsx

@@ -20,6 +20,7 @@ export class ExecutionSettings extends React.Component<ExecutionSettingsProps, {
     super(props);
 
     this.handleDeleteDataChange = this.handleDeleteDataChange.bind(this);
+    this.handleElectronLoggingChange = this.handleElectronLoggingChange.bind(this);
   }
 
   /**
@@ -35,14 +36,30 @@ export class ExecutionSettings extends React.Component<ExecutionSettingsProps, {
     this.props.appState.isKeepingUserDataDirs = checked;
   }
 
+  /**
+   * Handles a change on whether or not electron should log more things
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  public handleElectronLoggingChange(
+    event: React.FormEvent<HTMLInputElement>
+  ) {
+    const { checked } = event.currentTarget;
+    this.props.appState.isEnablingElectronLogging = checked;
+  }
+
   public render() {
-    const { isKeepingUserDataDirs } = this.props.appState;
+    const { isKeepingUserDataDirs, isEnablingElectronLogging } = this.props.appState;
+
     const deleteUserDirLabel = `
       Whenever Electron runs, it creates a user data directory for cookies, the cache,
       and various other things that it needs to keep around. Since fiddles are usually
       just run once, we delete this directory after your fiddle exits. Enable this
       setting to keep the user data directories around.
     `.trim();
+    const electronLoggingLabel = `
+      There are some flags that Electron uses to log extra information both internally
+      and through Chromium.  Enable this option to make Fiddle produce those logs.`.trim();
 
     return (
       <div>
@@ -52,14 +69,24 @@ export class ExecutionSettings extends React.Component<ExecutionSettingsProps, {
         </Callout>
         <br />
         <Callout>
-        <FormGroup label={deleteUserDirLabel}>
-          <Checkbox
-            checked={isKeepingUserDataDirs}
-            label='Do not delete user data directories.'
-            onChange={this.handleDeleteDataChange}
-          />
-        </FormGroup>
-      </Callout>
+          <FormGroup label={deleteUserDirLabel}>
+            <Checkbox
+              checked={isKeepingUserDataDirs}
+              label='Do not delete user data directories.'
+              onChange={this.handleDeleteDataChange}
+            />
+          </FormGroup>
+        </Callout>
+        <br />
+        <Callout>
+          <FormGroup label={electronLoggingLabel}>
+            <Checkbox
+              checked={isEnablingElectronLogging}
+              label='Enable advanced Electron logging.'
+              onChange={this.handleElectronLoggingChange}
+            />
+          </FormGroup>
+        </Callout>
       </div>
     );
   }

src/renderer/runner.ts

@@ -181,7 +181,19 @@ export class Runner {
     const binaryPath = binaryManager.getElectronBinaryPath(version, localPath);
     console.log(`Runner: Binary ${binaryPath} ready, launching`);
 
-    this.child = spawn(binaryPath, [ dir, '--inspect' ]);
+    const env = { ...process.env };
+    if (this.appState.isEnablingElectronLogging) {
+      env.ELECTRON_ENABLE_LOGGING = 'true';
+      env.ELECTRON_ENABLE_STACK_DUMPING = 'true';
+    } else {
+      delete env.ELECTRON_ENABLE_LOGGING;
+      delete env.ELECTRON_ENABLE_STACK_DUMPING;
+    }
+
+    this.child = spawn(binaryPath, [ dir, '--inspect' ], {
+      cwd: dir,
+      env,
+    });
     this.appState.isRunning = true;
     pushOutput(`Electron v${version} started.`);
 

src/renderer/state.ts

@@ -66,6 +66,7 @@ export class AppState {
       this.retrieve('statesToShow') as Array<ElectronVersionState>
       || [ ElectronVersionState.downloading, ElectronVersionState.ready, ElectronVersionState.unknown ];
   @observable public isKeepingUserDataDirs: boolean = !!this.retrieve('isKeepingUserDataDirs');
+  @observable public isEnablingElectronLogging: boolean = !!this.retrieve('isEnablingElectronLogging');
 
   @observable public binaryManager: BinaryManager = new BinaryManager();
 
@@ -117,6 +118,7 @@ export class AppState {
     autorun(() => this.save('gitHubToken', this.gitHubToken));
     autorun(() => this.save('gitHubPublishAsPublic', this.gitHubPublishAsPublic));
     autorun(() => this.save('isKeepingUserDataDirs', this.isKeepingUserDataDirs));
+    autorun(() => this.save('isEnablingElectronLogging', this.isEnablingElectronLogging));
     autorun(() => this.save('version', this.version));
     autorun(() => this.save('versionsToShow', this.versionsToShow));
     autorun(() => this.save('statesToShow', this.statesToShow));

tests/renderer/components/__snapshots__/settings-execution-spec.tsx.snap

@@ -22,5 +22,17 @@ exports[`ExecutionSettings component renders 1`] = `
       />
     </Blueprint3.FormGroup>
   </Blueprint3.Callout>
+  <br />
+  <Blueprint3.Callout>
+    <Blueprint3.FormGroup
+      label="There are some flags that Electron uses to log extra information both internally
+      and through Chromium.  Enable this option to make Fiddle produce those logs."
+    >
+      <Blueprint3.Checkbox
+        label="Enable advanced Electron logging."
+        onChange={[Function]}
+      />
+    </Blueprint3.FormGroup>
+  </Blueprint3.Callout>
 </div>
 `;

tests/renderer/components/settings-execution-spec.tsx

@@ -36,4 +36,24 @@ describe('ExecutionSettings component', () => {
       expect(store.isKeepingUserDataDirs).toBe(true);
     });
   });
+
+  describe('handleElectronLoggingChange()', () => {
+    it('handles a new selection', async () => {
+      const wrapper = shallow(
+        <ExecutionSettings appState={store} />
+      );
+      const instance = wrapper.instance() as any;
+      await instance.handleElectronLoggingChange({
+        currentTarget: { checked: false }
+      });
+
+      expect(store.isEnablingElectronLogging).toBe(false);
+
+      await instance.handleElectronLoggingChange({
+        currentTarget: { checked: true }
+      });
+
+      expect(store.isEnablingElectronLogging).toBe(true);
+    });
+  });
 });

tests/renderer/runner-spec.tsx

@@ -64,6 +64,22 @@ describe('Runner component', () => {
     expect(store.isRunning).toBe(true);
   });
 
+  it('runs with logging when enabled', async () => {
+    store.isEnablingElectronLogging = true;
+    (findModulesInEditors as any).mockReturnValueOnce([ 'fake-module' ]);
+    (spawn as jest.Mock).mockImplementationOnce((_, __, opts) => {
+      expect(opts.env).toHaveProperty('ELECTRON_ENABLE_LOGGING');
+      expect(opts.env).toHaveProperty('ELECTRON_ENABLE_STACK_DUMPING');
+      return mockChild;
+    });
+
+    expect(await instance.run()).toBe(true);
+    expect(store.binaryManager.getIsDownloaded).toHaveBeenCalled();
+    expect(window.ElectronFiddle.app.fileManager.saveToTemp).toHaveBeenCalled();
+    expect(installModules).toHaveBeenCalled();
+    expect(store.isRunning).toBe(true);
+  });
+
   it('emits output', async () => {
     (findModulesInEditors as any).mockReturnValueOnce([ 'fake-module' ]);
     (spawn as any).mockReturnValueOnce(mockChild);