carstenlebek/shopify-non-embedded-app-template

NgrokClientError: failed to start tunnel

nabusman opened this issue · 8 comments

nabusman commented

The error I am getting is (file paths shortened, ngrok auth token removed):

npm run dev

> shopify-non-embedded-app-template@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from .../shopify-non-embedded-app-template/.env
NgrokClientError: failed to start tunnel
    at NgrokClient.request (.../shopify-non-embedded-app-template/node_modules/ngrok/src/client.js:33:23)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at connectRetry (.../shopify-non-embedded-app-template/node_modules/ngrok/index.js:29:22)
    at setEnvironmentAndReturnHost (file://.../shopify-non-embedded-app-template/next.config.mjs:43:20)
    at nextConfig (file://.../shopify-non-embedded-app-template/next.config.mjs:61:10)
    at Object.normalizeConfig (.../shopify-non-embedded-app-template/node_modules/next/server/config-shared.ts:512:10)
    at Object.loadConfig [as default] (.../shopify-non-embedded-app-template/node_modules/next/server/config.ts:682:24)
    at NextServer.loadConfig (.../shopify-non-embedded-app-template/node_modules/next/server/next.ts:132:18)
    at NextServer.prepare (.../shopify-non-embedded-app-template/node_modules/next/server/next.ts:109:20)
    at .../shopify-non-embedded-app-template/node_modules/next/cli/next-dev.ts:105:7 {
  response: <ref *1> IncomingMessage {
    _readableState: ReadableState {
      objectMode: false,
      highWaterMark: 16384,
      buffer: BufferList { head: null, tail: null, length: 0 },
      length: 0,
      pipes: [],
      flowing: false,
      ended: true,
      endEmitted: true,
      reading: false,
      constructed: true,
      sync: false,
      needReadable: false,
      emittedReadable: false,
      readableListening: true,
      resumeScheduled: false,
      errorEmitted: false,
      emitClose: true,
      autoDestroy: true,
      destroyed: true,
      errored: null,
      closed: true,
      closeEmitted: true,
      defaultEncoding: 'utf8',
      awaitDrainWriters: null,
      multiAwaitDrain: false,
      readingMore: false,
      dataEmitted: true,
      decoder: null,
      encoding: null,
      [Symbol(kPaused)]: null
    },
    _events: [Object: null prototype] {
      end: [Function: responseOnEnd],
      aborted: [Array],
      error: [Function],
      readable: [Function (anonymous)]
    },
    _eventsCount: 4,
    _maxListeners: undefined,
    socket: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      parser: null,
      _httpMessage: [ClientRequest],
      _peername: [Object],
      [Symbol(async_id_symbol)]: 327,
      [Symbol(kHandle)]: [TCP],
      [Symbol(kSetNoDelay)]: false,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(RequestTimeout)]: undefined
    },
    httpVersionMajor: 1,
    httpVersionMinor: 1,
    httpVersion: '1.1',
    complete: true,
    rawHeaders: [
      'Content-Type',
      'application/json',
      'Date',
      'Sat, 02 Jul 2022 07:49:41 GMT',
      'Content-Length',
      '105',
      'Connection',
      'close'
    ],
    rawTrailers: [],
    aborted: false,
    upgrade: false,
    url: 'http://127.0.0.1:4041/api/tunnels',
    method: null,
    statusCode: 502,
    statusMessage: 'Bad Gateway',
    client: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      parser: null,
      _httpMessage: [ClientRequest],
      _peername: [Object],
      [Symbol(async_id_symbol)]: 327,
      [Symbol(kHandle)]: [TCP],
      [Symbol(kSetNoDelay)]: false,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBuffer)]: null,
      [Symbol(kBufferCb)]: null,
      [Symbol(kBufferGen)]: null,
      [Symbol(kCapture)]: false,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0,
      [Symbol(RequestTimeout)]: undefined
    },
    _consuming: true,
    _dumped: false,
    req: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 10,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      maxRequestsOnConnectionReached: false,
      _defaultKeepAlive: true,
      useChunkedEncodingByDefault: true,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      _contentLength: null,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      _closed: false,
      socket: [Socket],
      _header: 'POST /api/tunnels HTTP/1.1\r\n' +
        'user-agent: got (https://github.com/sindresorhus/got)\r\n' +
        'content-type: application/json\r\n' +
        'accept: application/json\r\n' +
        'content-length: 138\r\n' +
        'accept-encoding: gzip, deflate, br\r\n' +
        'Host: 127.0.0.1:4041\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: nop],
      agent: [Agent],
      socketPath: undefined,
      method: 'POST',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/api/tunnels',
      _ended: true,
      res: [Circular *1],
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: '127.0.0.1',
      protocol: 'http:',
      timings: [Object],
      emit: [Function (anonymous)],
      [Symbol(kCapture)]: false,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype],
      [Symbol(reentry)]: true
    },
    timings: {
      start: 1656748180990,
      socket: 1656748180990,
      lookup: 1656748180991,
      connect: 1656748180991,
      secureConnect: undefined,
      upload: 1656748180991,
      response: 1656748181098,
      end: 1656748181098,
      error: undefined,
      abort: undefined,
      phases: [Object]
    },
    emit: [Function (anonymous)],
    requestUrl: 'http://127.0.0.1:4041/api/tunnels',
    redirectUrls: [],
    request: Request {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 14,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      requestInitialized: true,
      redirects: [],
      retryCount: 0,
      _progressCallbacks: [],
      write: [Function: onLockedWrite],
      end: [Function: onLockedWrite],
      options: [Object],
      requestUrl: 'http://127.0.0.1:4041/api/tunnels',
      _cannotHaveBody: false,
      _noPipe: true,
      [Symbol(kCapture)]: false,
      [Symbol(downloadedSize)]: 105,
      [Symbol(uploadedSize)]: 138,
      [Symbol(serverResponsesPiped)]: Set(0) {},
      [Symbol(stopReading)]: true,
      [Symbol(triggerRead)]: false,
      [Symbol(jobs)]: [],
      [Symbol(body)]: '{"addr":3000,"authtoken":"<REMOVED>","proto":"http","name":"<REMOVED>"}',
      [Symbol(bodySize)]: 138,
      [Symbol(cancelTimeouts)]: [Function: cancelTimeouts],
      [Symbol(unproxyEvents)]: [Function (anonymous)],
      [Symbol(request)]: [ClientRequest],
      [Symbol(originalResponse)]: [Circular *1],
      [Symbol(isFromCache)]: false,
      [Symbol(responseSize)]: 105,
      [Symbol(response)]: [Circular *1],
      [Symbol(startedReading)]: true
    },
    isFromCache: false,
    ip: '127.0.0.1',
    retryCount: 0,
    rawBody: <Buffer 7b 22 65 72 72 6f 72 5f 63 6f 64 65 22 3a 31 30 33 2c 22 73 74 61 74 75 73 5f 63 6f 64 65 22 3a 35 30 32 2c 22 6d 73 67 22 3a 22 66 61 69 6c 65 64 20 ... 55 more bytes>,
    body: '{"error_code":103,"status_code":502,"msg":"failed to start tunnel","details":{"err":"remote gone away"}}\n',
    [Symbol(kCapture)]: false,
    [Symbol(kHeaders)]: {
      'content-type': 'application/json',
      date: 'Sat, 02 Jul 2022 07:49:41 GMT',
      'content-length': '105',
      connection: 'close'
    },
    [Symbol(kHeadersCount)]: 8,
    [Symbol(kTrailers)]: null,
    [Symbol(kTrailersCount)]: 0,
    [Symbol(RequestTimeout)]: undefined
  },
  body: {
    error_code: 103,
    status_code: 502,
    msg: 'failed to start tunnel',
    details: { err: 'remote gone away' }
  }
}

To recreate:

  1. Clone the repo to local
  2. Create .env file with SHOPIFY_API_KEY, SHOPIFY_API_SECRET, SHOP, SCOPES, NGROK_AUTH_TOKEN, UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN
  3. Executed npm run dev

I have checked to ensure that the Ngrok tunnel is working.

carstenlebek commented

I was only able to reproduce this error with an invalid Ngrok authtoken. Try replacing the env variable in nextConfig.mjs with your authtoken.

Which node version are you running?

nabusman commented

Node version: v16.13.0

I changed the following lines:

const tunnelUrl = await ngrok.connect({
    addr: 3000,
    authtoken: "20sePyqza6gFEu1NMhkGUgOtY4V_21bnvpEQGce3wnaonY1xe",
  });

And got the same error as above.

I've tested this token with a Shopify embedded app, but I'll test with the ngrok CLI and report back.

nabusman commented

Ok figured it out, you were right, it's a ngrok issue. I tried resetting the auth token but that didn't work so I created another ngrok account and that finally worked.

Thanks!

  • 👍1
yhalias9 commented

I'm getting this issue now. I reset the auth token and created another ngrok account, still doesn't work

nabusman commented

@yhalias9 This looks like a nudge to get you to upgrade from ngrok. I got this error again and after upgrading my ngrok account it started working.

EDIT: spelling

nabusman commented

Also, it seems that if you try to connect with your ngrok account via the ngrok CLI it will work fine, but if you try to connect through the ngrok node package it will give this error. Also, for future people who run across this another error you get randomly is below:

TypeError: Cannot read properties of undefined (reading 'body') at NgrokClient.request (/.../node_modules/ngrok/src/client.js:40:26) at processTicksAndRejections (node:internal/process/task_queues:95:5) at connectRetry (/.../node_modules/ngrok/index.js:29:22) at setEnvironmentAndReturnHost (file:///.../next.config.mjs:43:21) at nextConfig (file:///.../next.config.mjs:68:12) at Object.normalizeConfig (/.../node_modules/next/server/config-shared.ts:512:10) at Object.loadConfig [as default] (/.../node_modules/next/server/config.ts:682:24) at NextServer.loadConfig (/.../node_modules/next/server/next.ts:132:18) at NextServer.prepare (/.../node_modules/next/server/next.ts:109:20) at /.../node_modules/next/cli/next-dev.ts:105:7

  • 👍1
AamirKhattak commented

grading

By upgrading you meaning paid packages?

I am able to do this: "it seems that if you try to connect with your ngrok account via the ngrok CLI it will work fine, but if you try to connect through the ngrok node package it will give this error"

nabusman commented

Yes upgrade to their paid service.

  • 👍1