[Feature] grpc/grpc-web backend

[borissmidt]

Dear stephenh,

For grpc/grpc-web backend there is nice tooling to have better logging of requests in the browser.
But it seems that this project uses typescript grpc-web version.

Which doesn't work for the in browser tooling. Do you have any tips on how to better debug grpc calls in the browser?

Or could the native gprc/grpc-web be used as a backend to get this tooling?

[borissmidt]

i found out how the plugin works and it is possible to use it like this to get a message in there.
So you just have to wrap the webGrpcImpl and log the incoming and outgoing messages.

//this doesn't work if the reponse is to big
window.postMessage({type: "__GRPCWEB_DEVTOOLS__",method: methodDesc.methodName, methodType: "unary", requestId: requestId, request:_request, response: response})

[stephenh]

@borissmidt ah great, that is neat! Thanks for updating that you'd found a solution. I've made a note of it in the readme, to link to this issue.

You're right, ts-proto generates grpc-web code that uses improbable-eng; AFAIU at the time that was added to ts-proto, there was no built-in grpc-web support built into the official grpc.io. It looks like now there is?

Fwiw, if that's the case, and you really want to use the grpc.io packages instead, a PR to add additional support for like --ts_proto_opt=outputClientImpl=grpc-web-on-grpc-io would be great.

Thanks!

(Going to close this out for now since you found your own solution :-).)

[borissmidt]

Yes, i noticed reading the issues of the official grpc-web that it has issues like memory leaks for long running streams and it does not and will not support websockets. So it seems that the improbable eng implementation is more feature rich. even tough they are not the official one.

[stephenh]

Ah huh, that's interesting! Well, I don't feel so bad about ts-proto being "out of date" and not using the latest/official client then. :-)

(Fwiw I don't personally use grpc-web, so I'm reliant on users like yourself to report back/work on/improve the various framework changes / options, like nest/grpc-web/etc. So thanks for the issue!)

[ZholobovSS]

@borissmidt hello! Can you show full example of how to wrap webGrpcImpl to log messages?

[Swoorup]

Same would like to know, since I can't get it to compile. Where do you add in the hook?

[ZholobovSS]

@Swoorup Hi. My typescript solution:

import { GrpcWebImpl, GrpcServiceClientImpl } from 'your/generated/package/here';

export function loggerDecorator(func: GrpcWebImpl['unary']) {
    return async function (...params: Parameters<GrpcWebImpl['unary']>): ReturnType<GrpcWebImpl['unary']> {
        let response: any;

        try {
            //@ts-ignore
            response = await func.apply(this, params);

            return response;
        } catch (error) {
            console.log({ error });
            response = getMessageFromError(error) || 'Ошибка';

            throw new Error(error as any);
        } finally {
            window.postMessage(
                {
                    type: '__GRPCWEB_DEVTOOLS__',
                    method: `${params[0].service.serviceName}/${params[0].methodName}`,
                    methodType: 'unary',
                    request: params[1],
                    response: JSON.parse(JSON.stringify(response)),
                },
                window.location.origin,
            );
        }
    };
}


const rpc = new GrpcWebImpl(REACT_APP_ENVOY_URL, {});

rpc.unary = loggerDecorator(rpc.unary);

export const Clients = {
    serviceClient: new GrpcServiceClientImpl(rpc),
};

[Swoorup]

@ZholobovSS Awesome can confirm that works perfectly. Many thanks

[borissmidt]

@ZholobovSS Thank you for writing this.

[vshjxyz]

Hello, I've extended the above to also log streams, as I've noticed that solution was only working for unary calls

import { tap } from "rxjs/operators";

export function loggerDecoratorStream(func: GrpcWebImpl["invoke"]) {
  return function (
    ...params: Parameters<GrpcWebImpl["invoke"]>
  ): ReturnType<GrpcWebImpl["invoke"]> {
    let response: any;

    try {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      //@ts-ignore
      response = func.apply(this, params);

      window.postMessage(
        {
          type: "__GRPCWEB_DEVTOOLS__",
          method: `${params[0].service.serviceName}/${params[0].methodName}`,
          methodType: "server_streaming",
          request: params[1],
        },
        window.location.origin
      );

      return response.pipe(
        tap((data) => {
          console.log("data", data);
          window.postMessage(
            {
              type: "__GRPCWEB_DEVTOOLS__",
              method: `${params[0].service.serviceName}/${params[0].methodName}`,
              methodType: "server_streaming",
              response: JSON.parse(JSON.stringify(data)),
            },
            window.location.origin
          );
        })
      );
    } catch (error) {
      console.log({ error });
      response = error || "error";

      throw new Error(error as any);
    }
  };
}

const rpc = new GrpcWebImpl(REACT_APP_ENVOY_URL, {});

rpc.invoke = loggerDecoratorStream(rpc.invoke);

export const Clients = {
    serviceClient: new GrpcServiceClientImpl(rpc),
};

[kobzarvs]

integration ts-proto + grpc-web for chrome extension https://chromewebstore.google.com/detail/grpc-devtools/fohdnlaeecihjiendkfhifhlgldpeopm

import { v7 as uuidv7 } from 'uuid';
import { GrpcWebClientBaseOptions, RpcError, StatusCode } from 'grpc-web';
import { AdminClientImpl, GrpcWebImpl } from 'src/generated/admin.api';


export const RpcStatusCodes = {
    [StatusCode.OK]: 'OK',
    [StatusCode.CANCELLED]: 'CANCELLED',
    [StatusCode.UNKNOWN]: 'UNKNOWN',
    [StatusCode.INVALID_ARGUMENT]: 'INVALID_ARGUMENT',
    [StatusCode.DEADLINE_EXCEEDED]: 'DEADLINE_EXCEEDED',
    [StatusCode.NOT_FOUND]: 'NOT_FOUND',
    [StatusCode.ALREADY_EXISTS]: 'ALREADY_EXISTS',
    [StatusCode.PERMISSION_DENIED]: 'PERMISSION_DENIED',
    [StatusCode.RESOURCE_EXHAUSTED]: 'RESOURCE_EXHAUSTED',
    [StatusCode.FAILED_PRECONDITION]: 'FAILED_PRECONDITION',
    [StatusCode.ABORTED]: 'ABORTED',
    [StatusCode.OUT_OF_RANGE]: 'OUT_OF_RANGE',
    [StatusCode.UNIMPLEMENTED]: 'UNIMPLEMENTED',
    [StatusCode.INTERNAL]: 'INTERNAL',
    [StatusCode.UNAVAILABLE]: 'UNAVAILABLE',
    [StatusCode.DATA_LOSS]: 'DATA_LOSS',
    [StatusCode.UNAUTHENTICATED]: 'UNAUTHENTICATED',
};

export function loggerDecoratorUnary(func: GrpcWebImpl['unary']) {
    return async function (this: GrpcWebImpl, ...params: Parameters<GrpcWebImpl['unary']>) {
        const id = uuidv7();

        try {
            window.postMessage(
                {
                    source: '__gRPC_devtools_content_scripts_main__',
                    payload: {
                        id,
                        methodName: `${params[0].methodName}`,
                        requestMessage: params[1],
                        timestamp: Date.now(),
                        serviceName: `${params[0].service.serviceName}`,
                    },
                },
                '*',
            );

            try {
                const result = await func.apply(this, params);

                window.postMessage(
                    {
                        source: '__gRPC_devtools_content_scripts_main__',
                        payload: {
                            id,
                            responseMessage: JSON.parse(JSON.stringify(result)),
                            timestamp: Date.now(),
                        },
                    },
                    '*',
                );
                window.postMessage(
                    {
                        source: '__gRPC_devtools_content_scripts_main__',
                        payload: {
                            id,
                            responseMessage: { EOF: Date.now() },
                            timestamp: Date.now(),
                        },
                    },
                    '*',
                );

                return result;
            } catch (error) {
                if (error instanceof RpcError) {
                    window.postMessage(
                        {
                            source: '__gRPC_devtools_content_scripts_main__',
                            payload: {
                                id,
                                errorMetadata: {},
                                responseMessage: {
                                    code: error.code,
                                    name: `RpcError: ${RpcStatusCodes[error.code]}`,
                                    messsage: error.message,
                                },
                                timestamp: Date.now(),
                            },
                        },
                        '*',
                    );
                } else {
                    window.postMessage(
                        {
                            source: '__gRPC_devtools_content_scripts_main__',
                            payload: {
                                id,
                                errorMetadata: {},
                                responseMessage: {
                                    code: -1,
                                    name: 'Unexoected error',
                                    messsage: String(error),
                                },
                                timestamp: Date.now(),
                            },
                        },
                        '*',
                    );
                }
            }
        } catch (error) {
            console.error(error);
            throw new Error(error as any);
        }
    };
}

export function loggerDecoratorStream(func: GrpcWebImpl['invoke']) {
    return function (this: GrpcWebImpl, ...params: Parameters<GrpcWebImpl['invoke']>) {
        let response: any;

        const id = uuidv7();

        try {
            window.postMessage(
                {
                    source: '__gRPC_devtools_content_scripts_main__',
                    payload: {
                        id,
                        methodName: `${params[0].methodName}`,
                        requestMessage: params[1],
                        timestamp: Date.now(),
                        serviceName: `${params[0].service.serviceName}`,
                    },
                },
                '*',
            );

            response = func.apply(this, params);

            response.subscribe(
                (data: any) => {
                    window.postMessage(
                        {
                            source: '__gRPC_devtools_content_scripts_main__',
                            payload: {
                                id,
                                responseMessage: JSON.parse(JSON.stringify(data)),
                                timestamp: Date.now(),
                            },
                        },
                        '*',
                    );
                },
                (error: RpcError) => {
                    window.postMessage(
                        {
                            source: '__gRPC_devtools_content_scripts_main__',
                            payload: {
                                id,
                                errorMetadata: {},
                                responseMessage: {
                                    code: error.code,
                                    name: `RpcError: ${RpcStatusCodes[error.code]}`,
                                    messsage: error.message,
                                },
                                timestamp: Date.now(),
                            },
                        },
                        '*',
                    );
                },
                () => {
                    window.postMessage(
                        {
                            source: '__gRPC_devtools_content_scripts_main__',
                            payload: {
                                id,
                                responseMessage: { EOF: Date.now() },
                                timestamp: Date.now(),
                            },
                        },
                        '*',
                    );
                },
            );

            return response;
        } catch (error) {
            console.error(error);
            throw new Error(error as any);
        }
    };
}

const rpc = new GrpcWebImpl(`${window.location.protocol}//${window.location.host}`, { debug: false });
const client = new AdminClientImpl(rpc);

rpc.invoke = loggerDecoratorStream(rpc.invoke);
rpc.unary = loggerDecoratorUnary(rpc.unary);

[luca992]

@kobzarvs tried your example with grpc-devtools and I can see the data being intercepted if I set a breakpoint in the debugger. But not data is being displayed in the plugin tab.

is const rpc = new GrpcWebImpl(`${window.location.protocol}//${window.location.host}`, { debug: false }); important at all?
Did you do any other plugin setup at all in your project similar to the readme in the plugin's repo?