Ngrok Replay doesn't seem to work

Description

Describe your issue here.

What type of issue is this? (place an `x` in one of the `[ ]`)

[x] bug
[ ] enhancement (feature request)
[ ] question
[ ] documentation related
[ ] testing related
[ ] discussion

Requirements (place an `x` in each of the `[ ]`)

[x] I've read and understood the Contributing guidelines and have done my best effort to follow them.
[x] I've read and agree to the Code of Conduct.
[x] I've searched for any related issues and avoided creating a duplicate issue.

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Reproducible in:

steno version: 1.2.0

OS version(s): Mac OS X 10.14.2

Steps to reproduce:

Start app on port 3001
Start Steno in record mode: steno --record --scenario-name createTicket --app localhost:3001 --out-port 3030
Start Ngrok, forwarding to 3010
CTRL-C on steno
Start steno in replay mode: steno --replay --scenario-name createTicket --app localhost:3001 --out-port 3030 --in-port 3010
Hit 3010 with the first expected incoming api call. (I made sure all headers matched)

Expected result:

The recorded api call result

Actual result:

Ngrok complains that nothing is connected to ngrok

<!doctype html5>
 <html>
    <head>
        <style type="text/css">

        strong { font-weight: bold; }
        hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
        html { font-family: sans-serif;   -ms-text-size-adjust: 100%;   -webkit-text-size-adjust: 100%;   } body { margin: 0; }
        a { background-color: transparent; }
        a:active, a:hover { outline: 0; }
        </style>

        <style type="text/css">
            body { background-color: #f5f5f5; }
            .container { width: 500px; margin: auto; color: #444; padding: 5px; }
            a, strong { color: purple; text-decoration: none; }
            a:hover { text-decoration: underline; }
            h2 { text-align: center; color: #000; }
            p { line-height: 20px; }
        </style>
    </head>
    <body>
        <div class="container">

<h2>Failed to complete tunnel connection</h2>
<hr />
<p>
    The connection to <strong><a href="https://bubbleiq3.ngrok.io">https://bubbleiq3.ngrok.io</a></strong>
    was successfully tunneled to your ngrok client,
    but the client failed to establish a connection to
    the local address <strong><a href="http://localhost:3010">localhost:3010</a></strong>.
</p>
<p>
    Make sure that a web service is running on
    <strong><a href="http://localhost:3010">localhost:3010</a></strong> and that it is a valid address.
</p>
<p>
    The error encountered was: <strong style="color: #9E2929">dial tcp [::1]:3010: getsockopt: connection refused</strong>
</p>

        </div>
    </body>
</html>

If I stop steno, it says none of the requests matched.

Attachments:

Logs, screenshots, screencast, sample project, funny gif, etc.

ngrok isn't applicable to replay mode, it's only applicable to record mode. In your repro steps it looks like you stop steno before it has a chance to actually record anything.

The way you would record and replay API actions using Steno would be as follows:

Run your app locally, in a test configuration that points all outgoing requests to steno's out-port
Run steno in record mode, sending incoming requests to the local port your app is running on
Run ngrok to forward Slack's incoming web requests to steno's in-port
Create some incoming and outgoing API calls for steno to record. ngrok's web interface should show you incoming requests only.
Stop everything; observe that steno recorded incoming and outgoing requests to a scenario
Re-run your app, and run steno in replay mode to replay the scenario you recorded just between your app and steno. ngrok no longer applies since no requests are incoming from the real Slack API.

slackapi / steno