Last week we managed to get all our work wrapped up into a single, deployable electron application. We handed over both installers, one for macOS and the other for Windows to our client so we can get some feedback from a real clinician of our product.

Goals

<aside> 🎯 **What are we looking to achieve?

1. JSON Schema Validation** As time goes on, there is always a chance that Voiceflow may change the format of their (.vf) file so we decided to include JSON Schema validation to catch any changes to the file.

2. Error Handling Now that we have our core business logic it is important that we have robust error handling to ensure that our application gracefully exits or warns the user if something goes wrong.

3. New UI Features After some more feedback from users, we iterated further on the UI, adding a new test box as well as a new error component.

</aside>

JSON Schema Validation

The Voiceflow file has the main conversation diagram within a key called rootDiagramID. Due to it being at this key value with a random hex value, there was no way to make a single schema for the whole diagram but multiple for each type of block and one generalised Voiceflow file structure.

/**
 * JSON Schema for type "start" node
 */
function getStartSchema(){
    return `{
        "$schema": "<http://json-schema.org/draft-04/schema#>",
        "type": "object",
        "properties": {
          "nodeID": {
            "type": "string"
          },
          "type": {
            "type": "string",
            "enum": ["start"]
          },
          "coords": {
            "type": "array",
            "items": [
              {
                "type": "number"
              },
              {
                "type": "number"
              }
            ]
          },
          "data": {
            "type": "object",
            "properties": {
              "name": {
                "type": "string"
              },
              "color": {
                "type": "string"
              },
              "ports": {
                "type": "array"
              },
              "steps": {
                "type": "array"
              }
            },
            "required": [
              "name",
              "color",
              "ports",
              "steps"
            ],
            "additionalProperties": false
          }
        },
        "required": [
          "nodeID",
          "type",
          "coords",
          "data"
        ],
        "additionalProperties": false
      }`
}

To enforce these schemas, we used a library named jsonschema which allowed us to perform validation for a Voiceflow file and it's respective schema.

This helps quickly identify if Voiceflow makes any changes to the diagram as well as ensures that we only pass diagrams we support.

Error Handling in the Frontend

It's important that any errors that are thrown are caught and handled appropriately. This meant that every time we call our API, we would catch specific errors and usually handle them by showing an error message to the user.

if(this.twilioClient == null) throw new Error("Could not log into twilio");
log.info("Received client", this.twilioClient)

We would also log these errors using the log library, allowing us to generate an error log that users could email us if something went wrong.

const res = remote.dialog.showMessageBoxSync({
    title: 'We\\'re Sorry!',
    message: 'A critical error occurred that we did not expect',
    detail: `But no worries! We\\'ve collected some diagnostic information in a file and 
            will appreciate it if you can send it to us at [email protected]\\n
            You can find the file below:

            on Windows: Your User Folder\\\\AppData\\\\Roaming\\\\sms-it\\\\logs\\\\renderer.log
            on macOS: ~/Library/Logs/sms-it/renderer.log
            on Linux: ~/.config/{app name}/logs/renderer.log`,
    type: 'error',
    buttons: ['Ok, I\\'ll email you'],
})

We allow users to manually navigate to the logs as well as give them the ability to contact us at [email protected] so we can look into any problems further if the user is unable to resolve them.

New UI Features

We made some more improvements to the UI to increase usability. There were many small changes but the two highlights were the new styling for the test box as well as the error component.