feat(runtime): handle invalid account sid & new error page

This change will check for valid Account SIDs in local development mode and create an appropriate
error message. It also introduces a new Error response page

BREAKING CHANGE: Error page layout changed

fix #45

Author: dkundel

__tests__/runtime/__snapshots__/integration.test.ts.snap

@@ -1,3 +1,5 @@
+jest.mock('window-size');
+
 import '@twilio-labs/serverless-runtime-types';
 import {
   Request as ExpressRequest,
@@ -15,6 +17,7 @@ import {
   handleSuccess,
   isTwiml,
 } from '../../src/runtime/route';
+import { wrapErrorInHtml } from '../../src/utils/error-html';
 
 const { VoiceResponse, MessagingResponse, FaxResponse } = twiml;
 
@@ -26,7 +29,7 @@ describe('handleError function', () => {
     const err = new Error('Failed to execute');
     handleError(err, (mockResponse as unknown) as ExpressResponse);
     expect(mockResponse.status).toHaveBeenCalledWith(500);
-    expect(mockResponse.send).toHaveBeenCalledWith(err.stack);
+    expect(mockResponse.send).toHaveBeenCalledWith(wrapErrorInHtml(err));
   });
 });
 
@@ -128,7 +131,7 @@ describe('constructContext function', () => {
   });
 
   test('getTwilioClient calls twilio constructor', () => {
-    const ACCOUNT_SID = 'ACxxxxx';
+    const ACCOUNT_SID = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
     const AUTH_TOKEN = 'xyz';
 
     const config = {
@@ -138,12 +141,15 @@ describe('constructContext function', () => {
     const context = constructContext(config);
     const twilioFn = require('twilio');
     context.getTwilioClient();
-    expect(twilioFn).toHaveBeenCalledWith('ACxxxxx', 'xyz');
+    expect(twilioFn).toHaveBeenCalledWith(
+      'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+      'xyz'
+    );
   });
 });
 
 describe('constructGlobalScope function', () => {
-  const ACCOUNT_SID = 'ACxxxxx';
+  const ACCOUNT_SID = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
   const AUTH_TOKEN = 'xyz';
   let config: StartCliConfig;
 

__tests__/runtime/route.test.ts

@@ -62,6 +62,7 @@
     "log-symbols": "^2.2.0",
     "ngrok": "^3.0.1",
     "nocache": "^2.1.0",
+    "normalize.css": "^8.0.1",
     "ora": "^3.3.1",
     "pkg-install": "^1.0.0",
     "prompts": "^2.0.4",

package-lock.json

@@ -0,0 +1,54 @@
+import { stripIndent } from 'common-tags';
+import { errorMessage } from '../printers/utils';
+import chalk = require('chalk');
+
+type Options = {
+  shouldPrintMessage: boolean;
+  shouldThrowError: boolean;
+  functionName?: string;
+};
+
+export function checkForValidAccountSid(
+  accountSid: string | undefined,
+  options: Options = { shouldPrintMessage: false, shouldThrowError: false }
+): boolean {
+  if (accountSid && accountSid.length === 34 && accountSid.startsWith('AC')) {
+    return true;
+  }
+
+  let message = '';
+  let title = '';
+  if (!accountSid) {
+    title = 'Missing Account SID';
+    message = stripIndent`
+      You are missing a Twilio Account SID. You can add one into your .env file:
+      
+      ${chalk.bold('ACCOUNT_SID=')}ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    `;
+  } else {
+    title = 'Invalid Account SID';
+    message = stripIndent`
+      The value for your ACCOUNT_SID in your .env file is not a valid Twilio Account SID. 
+      
+      It should look like this: ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    `;
+  }
+
+  if (options.shouldPrintMessage && message) {
+    console.error(errorMessage(title, message));
+  }
+
+  if (options.shouldThrowError && message) {
+    const err = new Error(title);
+    err.name = 'INVALID_CONFIG';
+    err.message = `${title}\n${message}`;
+    let meta = '';
+    if (options.functionName) {
+      meta = `\n--- at ${options.functionName}`;
+    }
+    err.stack = `${err.message}${meta}`;
+    throw err;
+  }
+
+  return false;
+}

package.json

@@ -11,6 +11,7 @@ import twilio from 'twilio';
 import { ServiceContext } from 'twilio/lib/rest/sync/v1/service';
 import { SyncListListInstance } from 'twilio/lib/rest/sync/v1/service/syncList';
 import { SyncMapListInstance } from 'twilio/lib/rest/sync/v1/service/syncMap';
+import { checkForValidAccountSid } from '../../checks/check-account-sid';
 import { StartCliConfig } from '../cli/config';
 
 const log = debug('twilio-run:runtime');
@@ -63,6 +64,13 @@ export function create({ env }: StartCliConfig): RuntimeInstance {
     const { serviceName } = options;
     delete options.serviceName;
 
+    checkForValidAccountSid(env.ACCOUNT_SID, {
+      shouldPrintMessage: true,
+      shouldThrowError: true,
+      functionName: `Runtime.getSync(${[...arguments]
+        .map((x: any) => JSON.stringify(x))
+        .join(',')})`,
+    });
     const client = twilio(env.ACCOUNT_SID, env.AUTH_TOKEN, options);
     const service = client.sync.services(
       serviceName || 'default'

src/checks/check-account-sid.ts

@@ -11,6 +11,8 @@ import {
   Response as ExpressResponse,
 } from 'express';
 import twilio, { twiml } from 'twilio';
+import { checkForValidAccountSid } from '../checks/check-account-sid';
+import { wrapErrorInHtml } from '../utils/error-html';
 import { StartCliConfig } from './cli/config';
 import { Response } from './internal/response';
 import * as Runtime from './internal/runtime';
@@ -32,6 +34,12 @@ export function constructContext<T extends {} = {}>({
   [key: string]: string | undefined | Function;
 }> {
   function getTwilioClient(): twilio.Twilio {
+    checkForValidAccountSid(env.ACCOUNT_SID, {
+      shouldPrintMessage: true,
+      shouldThrowError: true,
+      functionName: 'context.getTwilioClient()',
+    });
+
     return twilio(env.ACCOUNT_SID, env.AUTH_TOKEN);
   }
   const DOMAIN_NAME = url.replace(/^https?:\/\//, '');
@@ -45,17 +53,25 @@ export function constructGlobalScope(config: StartCliConfig): void {
   (global as any)['Functions'] = GlobalRuntime.getFunctions();
   (global as any)['Response'] = Response;
 
-  if (config.env.ACCOUNT_SID && config.env.AUTH_TOKEN) {
+  if (
+    checkForValidAccountSid(config.env.ACCOUNT_SID) &&
+    config.env.AUTH_TOKEN
+  ) {
     (global as any)['twilioClient'] = twilio(
       config.env.ACCOUNT_SID,
       config.env.AUTH_TOKEN
     );
   }
 }
 
-export function handleError(err: Error, res: ExpressResponse) {
+export function handleError(
+  err: Error,
+  res: ExpressResponse,
+  functionFilePath?: string
+) {
   res.status(500);
-  res.send(err.stack);
+  res.type('text/html');
+  res.send(wrapErrorInHtml(err, functionFilePath));
 }
 
 export function isTwiml(obj: object): boolean {
@@ -94,7 +110,8 @@ export function handleSuccess(
 
 export function functionToRoute(
   fn: ServerlessFunctionSignature,
-  config: StartCliConfig
+  config: StartCliConfig,
+  functionFilePath?: string
 ): ExpressRequestHandler {
   constructGlobalScope(config);
 
@@ -114,7 +131,7 @@ export function functionToRoute(
     ) {
       log('Function execution %s finished', req.path);
       if (err) {
-        handleError(err, res);
+        handleError(err, res, functionFilePath);
         return;
       }
       handleSuccess(responseObject, res);
@@ -124,7 +141,7 @@ export function functionToRoute(
     try {
       fn(context, event, callback);
     } catch (err) {
-      callback(err.message);
+      callback(err);
     }
   };
 }

src/runtime/internal/runtime.ts

@@ -104,7 +104,7 @@ export async function createServer(
                 `Could not find a "handler" function in file ${functionPath}`
               );
           }
-          functionToRoute(twilioFunction, config)(req, res, next);
+          functionToRoute(twilioFunction, config, functionPath)(req, res, next);
         } catch (err) {
           log('Failed to retrieve function. %O', err);
           res.status(404).send(`Could not find function ${functionPath}`);

src/runtime/route.ts

@@ -0,0 +1,61 @@
+import { html } from 'common-tags';
+import { readFileSync } from 'fs';
+
+let normalizeCss = '';
+const normalizeCssPath = require.resolve('normalize.css');
+
+export function wrapErrorInHtml<T extends Error>(
+  err: T,
+  filePath?: string
+): string {
+  if (!normalizeCss) {
+    normalizeCss = readFileSync(normalizeCssPath, 'utf8');
+  }
+
+  return html`
+    <html>
+      <style>
+        ${normalizeCss}/**/
+
+        body {
+          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+          color: #565b73;
+          font-weight: 300;
+          line-height: 1.8;
+          margin: 10px 30px;
+        }
+
+        h1 {
+          color: #152748;
+          font-weight: 500;
+          font-size: 1.4em;
+        }
+
+        h2,
+        strong {
+          color: #152748;
+          font-size: 1em;
+          font-weight: 500;
+        }
+
+        .stack-trace {
+          background: #233659;
+          color: #fff;
+          padding: 20px;
+          border-radius: 5px;
+        }
+      </style>
+      <h1>Runtime Error</h1>
+      ${filePath ? `<p>Error thrown in <code>${filePath}</code></p>` : ''}
+      <hr />
+      <p>
+        ${`<strong>${err.name}:</strong> ${err.message.replace(
+          /\n/g,
+          '<br/>'
+        )}`}
+      </p>
+      <h2>Stack Trace</h2>
+      ${`<pre class="stack-trace">${err.stack}</pre>`}
+    </html>
+  `;
+}