UnaryInterceptor is not being called

[usertest123test]

In My reactjs web app I am trying to use interceptors on grpc but the interceptor is not being called.

I tried some of the solutions provided around but could get it resolved. please someone assist me on this.

project details:
Package:
"react": "^18.2.0",
"grpc-web": "^1.3.1",

Below is my code:
Interceptor:

export const SimpleUnaryInterceptor = function () {};
SimpleUnaryInterceptor.prototype.intercept = function (request: any, invoker: any) {
  console.log("[Intercepting request]");
  return invoker(request).then((response: any) => {
    console.log("[Intercepting response]");
    return response;
  });
};

Biding interceptor:

export default class Api {
  myServicePromiseClient: MyServicePromiseClient;
  metadata: Metadata;

  constructor(public serviceURL: string) {
    this.myServicePromiseClient = new MyServicePromiseClient(serviceURL, null, { unaryInterceptors: [SimpleUnaryInterceptor] });
  }

  public user = new (class {
    constructor(public superThis: Api) {}
    public getMyUser = async (userId: string): Promise<UserObj> =>
      getMyUser( userId, this.superThis.myServicePromiseClient, this.superThis.metadata);
  })(this);
}

MyServicePromiseClient:

export class MyServicePromiseClient {
  constructor (hostname: string,
               credentials?: null | { [index: string]: string; },
               options?: null | { [index: string]: any; });

and getMyUser grpc method is:

getMyUser(
   request: user_pb.GetMyUserRequest,
   metadata?: grpcWeb.Metadata
 ): Promise<user_pb.MyUserResponse>;

Calling grpc-api:

const response = await new Api(MyServerUrl).user.getMyUser(123)

[usertest123test]

Any help on this ?

[sampajano]

Hi! Thanks for the report :)

Without debugging your code, i'm thinking you probably need to instantiate your interceptor, like:

{ unaryInterceptors: [new SimpleUnaryInterceptor()] })

instead of:

{ unaryInterceptors: [SimpleUnaryInterceptor] })

which you currently have.

Please let me know if this works for you. thanks!

[usertest123test]

@sampajano Thank you for the reply.
Since here interceptor is a function so cannot use new keyword for it but I had tried this and didn't work had also tried something like this, that also didn't help
{ unaryInterceptors: [SimpleUnaryInterceptor()] })

Even I am wondering something wrong in the initialization but not able to figure it out.

[sampajano]

aha ok!

Can you try writing your interceptor following this format?

https://github.com/grpc/grpc-web/blob/master/packages/grpc-web/test/tsc-tests/client04.ts

It might help rule out a few variables.

Thanks!

[usertest123test]

@sampajano I really appreciate your help.
I tried this with my code but that didn't work and when I tried your exact code it worked.
So it means when I try creating a EchoServicePromiseClient on fly with dynamic hostname its not working.

I mean:
const echoService = new EchoServicePromiseClient('http://localhost:8080', null, opts);
=> this is working

but I need to create EchoServicePromiseClient with dynamicURL url passed in
` new EchoServicePromiseClient(dynamicURL, null, opts);``
=> this is not working

[sampajano]

oh wow very interesting! you're very welcome! glad to hear at least the sample code worked! 😃

So it means when I try creating a EchoServicePromiseClient on fly with dynamic hostname its not working.

I wonder if it has something to do with how your javascript "closure" works? In that maybe you're not properly capturing the string in your lambda functions?

Could you try putting a console.log right before this line:

new EchoServicePromiseClient(dynamicURL, null, opts);

And see if it's indeed the right URL?

[usertest123test]

I found out that, further down in our code we have a method being called to enable "gRPC-Web Developer Tool" which is causing this issue of ignoring interceptors.

This is an exact issue of SafetyCulture/grpc-web-devtools#80
But I dont see any solution to this yet 😟

[sampajano]

Oh wow nice investigation!!

I'm sorry that it's an issue for you. i hope that gets resolved soon! (Or you can temporarily disable the plugin when needed.. :))

(UPDATE: This PR seems to be fixing it 😃)

I'll close this issue now as it's not related to our specific implementation. Please keep us updated if there's anything new from your/their side.

Thanks! :)

[usertest123test]

Thank you @sampajano for your valuable suggestions. :-)
Will update once I receive any update on this.

[sampajano]

Thank you @sampajano for your valuable suggestions. :-) Will update once I receive any update on this.

You're very welcome! 😊

And thank you that would be much appreciated! 😃