2 files changed, 74 insertions, 65 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 3ababe54a..dbe0bb4b6 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,6 +6,8 @@ import { TitleBar } from 'electron-react-titlebar';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
+import ErrorBoundary from '../util/ErrorBoundary';
+
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
@@ -94,74 +96,78 @@ export default @observer class AppLayout extends Component {
     const { intl } = this.context;
 
     return (
-      <div className={(darkMode ? 'theme__dark' : '')}>
-        <div className="app">
-          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
-          <div className="app__content">
-            {sidebar}
-            <div className="app__service">
-              {news.length > 0 && news.map(item => (
-                <InfoBar
-                  key={item.id}
-                  position="top"
-                  type={item.type}
-                  sticky={item.sticky}
-                  onHide={() => removeNewsItem({ newsId: item.id })}
-                >
-                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-                </InfoBar>
-              ))}
-              {!isOnline && (
-                <InfoBar
-                  type="danger"
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                </InfoBar>
-              )}
-              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
-              )}
-              {showServicesUpdatedInfoBar && (
-                <InfoBar
-                  type="primary"
-                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                  onClick={reloadServicesAfterUpdate}
-                  sticky
-                >
-                  <span className="mdi mdi-power-plug" />
-                  {intl.formatMessage(messages.servicesUpdated)}
-                </InfoBar>
-              )}
-              {appUpdateIsDownloaded && (
-                <InfoBar
-                  type="primary"
-                  ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-                  onClick={installAppUpdate}
-                  sticky
-                >
-                  <span className="mdi mdi-information" />
-                  {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
-                    <u>{intl.formatMessage(messages.changelog)}</u>
-                  </a>
-                </InfoBar>
-              )}
-              {isDelayAppScreenVisible && (<DelayApp />)}
-              {services}
+      <ErrorBoundary>
+        <div className={(darkMode ? 'theme__dark' : '')}>
+          <div className="app">
+            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+            <div className="app__content">
+              {sidebar}
+              <div className="app__service">
+                {news.length > 0 && news.map(item => (
+                  <InfoBar
+                    key={item.id}
+                    position="top"
+                    type={item.type}
+                    sticky={item.sticky}
+                    onHide={() => removeNewsItem({ newsId: item.id })}
+                  >
+                    <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  </InfoBar>
+                ))}
+                {!isOnline && (
+                  <InfoBar
+                    type="danger"
+                  >
+                    <span className="mdi mdi-flash" />
+                    {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                  </InfoBar>
+                )}
+                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                  <InfoBar
+                    type="danger"
+                    ctaLabel="Try again"
+                    ctaLoading={areRequiredRequestsLoading}
+                    sticky
+                    onClick={retryRequiredRequests}
+                  >
+                    <span className="mdi mdi-flash" />
+                    {intl.formatMessage(messages.requiredRequestsFailed)}
+                  </InfoBar>
+                )}
+                {showServicesUpdatedInfoBar && (
+                  <InfoBar
+                    type="primary"
+                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                    onClick={reloadServicesAfterUpdate}
+                    sticky
+                  >
+                    <span className="mdi mdi-power-plug" />
+                    {intl.formatMessage(messages.servicesUpdated)}
+                  </InfoBar>
+                )}
+                {appUpdateIsDownloaded && (
+                  <InfoBar
+                    type="primary"
+                    ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                    onClick={installAppUpdate}
+                    sticky
+                  >
+                    <span className="mdi mdi-information" />
+                    {intl.formatMessage(messages.updateAvailable)}
+                    {' '}
+                    <a href="https://meetfranz.com/changelog" target="_blank">
+                      <u>{intl.formatMessage(messages.changelog)}</u>
+                    </a>
+                  </InfoBar>
+                )}
+                {isDelayAppScreenVisible && (<DelayApp />)}
+                {services}
+              </div>
             </div>
           </div>
+          {children}
         </div>
-        {children}
-      </div>
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 6ea95bf88..609a3b604 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -65,6 +65,7 @@ export default @observer class Sidebar extends Component {
           disableToolTip={() => this.disableToolTip()}
         />
         <button
+          type="button"
           onClick={toggleMuteApp}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
@@ -72,6 +73,7 @@ export default @observer class Sidebar extends Component {
           <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
         </button>
         <button
+          type="button"
           onClick={() => openSettings({ path: 'recipes' })}
           className="sidebar__button sidebar__button--new-service"
           data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
@@ -79,6 +81,7 @@ export default @observer class Sidebar extends Component {
           <i className="mdi mdi-plus-box" />
         </button>
         <button
+          type="button"
           onClick={() => openSettings({ path: 'app' })}
           className="sidebar__button sidebar__button--settings"
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}