How to display error message if messaging socket not open in Companion

[r.b]

Hi all,

Could someone tell me if and how I can display an error message in the clock Settings/Companion if message socket is not OPEN? The Fitbit Settings Guide example code below works fine if the messaging socket is OPEN, but if the socket is not OPEN, I would like to display some error message in the user screeen (Companion/Settings of the smartphone) instead of console.log.

function sendSettingData(data) {
   if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
      messaging.peerSocket.send(data);
   } else {
      console.log("No peerSocket connection");
   }
}

[Gondwana · Accepted solution]

This can be done (and it's a great idea!), but it's a bit tricky/cumbersome.

First, I'd create a <Text> or equivalent element in index.jsx that displays the error message.

Then, use a conditional statement in your index.jsx that will only render that message when a certain setting item has a certain value (something like getItem('socketClosed')==='true'). There's a very brief example in the <Toggle> documentation, I think.

Then, in your companion index.js, set the value of that setting item wherever appropriate (and it may need to be in multiple places). This should cause the Settings page to magically show or hide the corresponding setting element.

(All of the code snippets above are incomplete and untested.)

[r.b]

Thank you Peter for your solution idea. I'll try to learn and use the conditional rendering of element in index.jsx as you suggested.

[Gondwana]

Here's another little example. It doesn't do what you want, but might help.

    <Page>
      {props.settingsStorage.getItem('calendarsOptions') && props.settingsStorage.getItem('calendarsOptions')==='[]' &&
        <TextImageRow label="No calendars available!" sublabel="Check calendar permissions." icon={warningIcon}/>
      }
      <Button label="Sync now" onClick={() => props.settingsStorage.setItem('syncBtn', 'true')}/>

    </Page>