core.js:6272 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames" SendGrid and Cloud Firestore

Viewed 10612

I have used the SendGrid NodeJS library with Firebase Cloud function. It works fine and I can send an Email. But it shows below error on the Ionic/Angular client app's console after the fire below Cloud function. Do you know why?

     core.js:6272 ERROR Error: Uncaught (in promise): 
     HttpErrorResponse: {"headers":{"normalizedNames":
    {},"lazyUpdate":null},"status":200,"statusText":"OK","url":"https://my-
    app.cloudfunctions.net/sendEmail","ok":false,"name":"HttpErrorResponse","message"
    :"Http failure during parsing for https://my-
    app.cloudfunctions.net/sendEmail","error":{"error":{},"text":"success"}}
            at resolvePromise (zone-evergreen.js:793)
            at zone-evergreen.js:707
            at SafeSubscriber._error (Observable.js:91)
            at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
            at SafeSubscriber.error (Subscriber.js:135)
            at Subscriber._error (Subscriber.js:75)
            at Subscriber.error (Subscriber.js:55)
            at MapSubscriber._error (Subscriber.js:75)
            at MapSubscriber.error (Subscriber.js:55)
            at FilterSubscriber._error (Subscriber.js:75)

package.json

{
  "name": "functions",
  "scripts": {
    "lint": "tslint --project tsconfig.json",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "main": "lib/index.js",
  "dependencies": {
    "@sendgrid/mail": "^7.2.1",
    "@types/cors": "^2.8.6",
    "axios": "^0.19.2",
    "cors": "^2.8.5",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1"
  },
  "devDependencies": {
    "tslint": "^5.12.0",
    "typescript": "^3.8.0",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

Cloud Function

import * as functions from 'firebase-functions';
import * as sgMail from '@sendgrid/mail';
import * as cors from 'cors';

const corsHandler = cors({ origin: true });

export const sendEmail = functions.https.onRequest((request, response) => {

    return corsHandler(request, response, async () => {

        const apiKey = functions.config().sendgrid.key;
        const emailTemplateId = functions.config().sendgrid.template;

        sgMail.setApiKey(apiKey);

        const email = {
            templateId: emailTemplateId,
            from: 'me@y.com',
            to: 'me@y.com',
            dynamic_template_data: {
                firstName: request.body.firstName,
                lastName: request.body.lastName,
             },
        };

        try {
            await sgMail.send(email);
            response.send('success');

        } catch (err) {
            console.log("Send Email request failure", err);
            response.send('failure');
        }
    });
});

Client app's service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { SellMyHouseModel } from 'src/app/models/sell-my-house.model';

@Injectable({
  providedIn: 'root'
})
export class SendEmailService {

  constructor(private httpClint: HttpClient) { }

  sendEmail(sellMyHouse: SellMyHouseModel): Promise<any> {
    return this.httpClint.post(environment.cloudFunctionUrl + 'sendEmail', sellMyHouse, this.createHeader('application/json')).toPromise();
  }

  private createHeader(contentType: string): any {
    return { headers: new HttpHeaders({ 'Content-Type': contentType }) };
  }

}
1 Answers

I have done it like so and no more above issue. i.e. responseType: 'text'

 private createHeader(contentType: string): any {
    return { headers: new HttpHeaders({ 'Content-Type': contentType }), responseType: 'text' };
  }
Related