browser sdk in angular is unable to parse responses from amazon services

[bibyzan]

When I call s3.GetObject I can get this error from 2 scenarios

StitchRequestError

errorCode: 1

errorCodeName: "DECODING_ERROR"

message: "(DECODING_ERROR): an error occurred while decoding a response from Stitch: Can't find variable: Buffer"

name: "StitchRequestError"

underlyingError: ReferenceError: Can't find variable: Buffer

StitchRequestError Prototype
(anonymous function) — home.page.ts:48
onInvoke — core.js:17289
run — zone.js:150
(anonymous function) — zone.js:889
onInvokeTask — core.js:17280
runTask — zone.js:195
drainMicroTaskQueue — zone.js:601
promiseReactionJob
home.page.ts:77

From a Stitch function:

exports = async function(key) {
  const s3 = context.services.get('s3_test_service').s3('us-east-2');
  let result = await s3.GetObject({
      "Bucket": "mytestbucket",
      "Key": key,
  });
  return result;
};

Called from the sdk:

        this.client = Stitch.initializeDefaultAppClient('mongotest');
        this.client.auth.loginWithCredential(new AnonymousCredential()).then(user => {
            client.callFunction('testDownload', ['somekey'])
                .then(result => {
                    console.log('SUCCESS', result);
                }).catch(err => console.error('err', err));
        });

When called in the stitch UI console, this comes back successful, but when the function is called via the browser sdk (with the full result promise returned in the function) I get the above error.

As already discussed in slack, changing result to result.Body.text() will let the success through, but being my OCD self I wanted to find the alternative that is functioning correctly so I don't leave a mistake somewhere and forget.

The next option was to call my s3 service directly from the stitch browser sdk so I run this:

     this.client = Stitch.initializeDefaultAppClient('mongotest-dlbqe');
     this.client.auth.loginWithCredential(new AnonymousCredential()).then(user => {
     const aws = this.client.getServiceClient(AwsServiceClient.factory, 's3_test_service');
     const args = {
          Bucket: 'testbucket',
          Key: 'Hello',
     };

      const request = new AwsRequest.Builder()
            .withService('s3')
            .withAction('GetObject')
            .withRegion('us-east-2') 
            .withArgs(args).build();

      aws.execute(request)
         .then(result => {
               console.log('GOT ITTTT', result);
          }).catch(err => {
            console.error('whyeee', err);
      });
 });

But still the same error! Any ideas?

Also dependencies:

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "Buffer": "0.0.0",
    "ajv": "^6.9.2",
    "aws-sdk": "^2.411.0",
    "core-js": "^2.5.4",
    "mongodb-stitch-browser-sdk": "^4.3.0",
    "mongodb-stitch-browser-services-aws": "^4.3.0",
    "rxjs": "~6.3.3",
    "socket.io": "^2.2.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },

Thanks

[bibyzan]

P.S. I also attempted installing the Buffer package and the peer it said it needed

[tkaye407]

Hi @bibyzan, as we discussed in the community slack, we have opened up a ticket for this bug and have begun looking into this dependency problem that seems specific to angular.

[tkaye407]

We have identified the problem and worked with the js-bson team to come up with a solution. We will be sure to let you know when we can release this change.

[bibyzan]

Hey @tkaye407 thanks for the response. Glad to hear progress is being made. I just wanted to highlight the escalation of my request for a fix here, because it seems to extend to any Amazon service I try to use. Resulting in my inability to really utilize this sdk for anything besides auth, mongo access, and calling pre-parsed stitch functions.

I just recently setup an AWS Lambda function with the node package I needed to run which works when I call it from a regular rest client. However, when I attempt to invoke the function (with the Stitch js browser SDK) similarly to s3.PutObject in this case, I get back a ZoneAwarePromise containing the unhandled Buffer error.

Another side note, I'm not 100% sure if I'm doing this right since this doesn't seem to be covered in the Stitch documentation. I inferred how I was supposed to do this by looking at this doc by amazon

https://docs.aws.amazon.com/lambda/latest/dg/API_Invoke.html

Here's how I create and call everything with the error output:

this.aws = this.stitch.client.getServiceClient(AwsServiceClient.factory, 'my_aws_service');
const request = new AwsRequest.Builder()
            .withService('lambda')
            .withAction('Invoke')
            .withArgs({
                FunctionName: 'my-serverless-lambda-function-name'
            }).withRegion('us-east-1')
            .build();
const response = this.aws.execute(request);
console.log('response!', response);

Output:

[Error] ERROR
Error: Uncaught (in promise): StitchRequestError: (DECODING_ERROR): an error occurred while decoding a response from Stitch: Can't find variable: Buffer
resolvePromise — zone.js:831
(anonymous function) — zone.js:896
onInvokeTask — core.js:17280
runTask — zone.js:195
drainMicroTaskQueue — zone.js:601
promiseReactionJob
	defaultErrorLogger (vendor.js:51576)
	handleError (vendor.js:51624)
	next (vendor.js:53623:140)
	(anonymous function) (vendor.js:49367)
	__tryOrUnsub (vendor.js:85704)
	next (vendor.js:85642)
	_next (vendor.js:85585)
	next (vendor.js:85562)
	next (vendor.js:85327)
	emit (vendor.js:49351)
	run (polyfills.js:7688)
	onHandleError (vendor.js:53173)
	runGuarded (polyfills.js:7702)
	_loop_1 (polyfills.js:8232)
	microtaskDrainDone (polyfills.js:8241)
	drainMicroTaskQueue (polyfills.js:8146)
	promiseReactionJob

[bibyzan]

UPDATE: I did just find this link that has a lambda function call from a stitch function. I'll pursue this workaround for now which I know will only work if I modify the response from amazon before sending it to the client (because sending that response to be parsed is what breaks)

[tkaye407]

Hey @bibyzan, I apologize for the delay but we just released version 4.3.2 of the JS SDK and this should fix your problem. This seems to have been an Angular-specific bug where were relied on something that angular took out. However, currently in order to use the Stitch SDK in Angular you have to add the following line to your polyfills.ts file: (window as any).global = window;. I have filed a ticket with our docs team to put this in the Stitch Docs. We tried to get rid of this, but Angular got rid of the global object which the js-bson library depends on. We apologize if this is inconvenient but fixing it bloated the BSON library too much.

I just tested this personally on a brand new angular project and it works perfectly, but let me know if you run into any more issues.

[tkaye407]

Hi @bibyzan, I assume that this worked for you so I will be closing this issue. Please let us know if you have any more issues or questions.

Happy Stitching,
Tyler

[bibyzan]

Hey @tkaye407 Thanks for the updates, I finally had a chance to try your fix and it looks like it works now!

Thanks,

Bennett