Angular Universal ERROR TypeError: Converting circular structure to JSON

Question

I set up Angular Universal app on my hosting server, when I run it on localhost, everything works great, but on the server I get this error:

ERROR TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'XMLHttpRequest3'
    |     property 'upload' -> object with constructor 'Object'
    --- property '_request' closes the circle
    at JSON.stringify (<anonymous>)
    at readableObjectToString (/path/main.js:1:1558025)
    at resolvePromise (/path/main.js:1:1561872)
    at resolvePromise (/path/main.js:1:1560841)
    at /path/main.js:1:1563538
    at _ZoneDelegate.invokeTask (/path/main.js:1:1545907)
    at Object.onInvokeTask (/path/main.js:1:2772332)
    at _ZoneDelegate.invokeTask (/path/main.js:1:1545797)
    at Zone2.runTask (/path/main.js:1:1538839)
    at drainMicroTaskQueue (/path/main.js:1:1549244) {
  rejection: HttpErrorResponse {
    headers: HttpHeaders {
      normalizedNames: Map(0) {},
      lazyUpdate: null,
      headers: Map(0) {}
    },
    status: 0,
    statusText: 'Unknown Error',
    url: 'https://app.herokuapp.com/editors',
    ok: false,
    name: 'HttpErrorResponse',
    message: 'Http failure response for https://app.herokuapp.com/editors: 0 Unknown Error',
    error: ProgressEvent {
      type: 'error',
      target: [XMLHttpRequest],
      currentTarget: [XMLHttpRequest],
      lengthComputable: false,
      loaded: 0,
      total: 0
    }
  },
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: HttpErrorResponse {
      headers: [HttpHeaders],
      status: 0,
      statusText: 'Unknown Error',
      url: 'https://app.herokuapp.com/editors',
      ok: false,
      name: 'HttpErrorResponse',
      message: 'Http failure response for https://app.herokuapp.com/editors: 0 Unknown Error',
      error: [ProgressEvent]
    }
  },
  zone: <ref *1> Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [_ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: <ref *2> _ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular *1],
      _parentDelegate: [_ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [_ZoneDelegate],
      _invokeCurrZone: [Circular *1],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [_ZoneDelegate],
      _handleErrorCurrZone: [Circular *1],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [_ZoneDelegate],
      _scheduleTaskCurrZone: [Circular *1],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [_ZoneDelegate],
      _invokeTaskCurrZone: [Circular *1],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [_ZoneDelegate],
      _cancelTaskCurrZone: [Circular *1],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [_ZoneDelegate],
      _hasTaskDlgtOwner: [Circular *2],
      _hasTaskCurrZone: [Circular *1]
    }
  },
  task: ZoneTask {
    _zone: <ref *1> Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [_ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: [HttpErrorResponse]
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function (anonymous)],
    invoke: [Function (anonymous)]
  }
}
1 rules skipped due to selector errors:
  legend+* -> Cannot read property 'type' of undefined

I searched the internet for a solution, and I tried everything I could, I found that this error was misleading and that there was something more behind this error response. Does anyone have a solution to this?

Answer 1

Make sure you have no proxy errors and that your server can access the url https://app.herokuapp.com/editors . Try with a wget command.

At the moment, the code tries to serialize the error object returned by the failed call, but hat error object contains circular references, hence the error