1

I'm using tonic-web combined with a React web frontend using @protobuf-ts/grpcweb-transport and @protobuf-ts/plugin.

I'm following this tutorial https://www.youtube.com/watch?v=kerKXChDmsE (no need to watch)

The tutorial is comprised of:

https://github.com/dreamsofcode-io/grpcalculator-rs and https://github.com/dreamsofcode-io/grpcalculator-web

I've been successful in getting the request payload from the browser network tab and running it through a tool like https://protobuf-decoder.netlify.app/ but I've also used some CLI tools in conjunction with the proto file itself to get a more informative output.

When I was trying the CLI approach I was going through https://github.com/grpc/grpc-web/issues/634

However, I can't seem to do the same with the response. The CLI tools say they can't parse the response and the web based tool doesn't provide anything meaningful. In the issue link I provided it does seem that requests and responses can have differing prefix data and I have accounted for that, or so I think.

I would LOVE to be able to use a tool like https://github.com/SafetyCulture/grpc-web-devtools/ but that seems to be for grpc-web which is not used in the tutorial I'm following. And when I tried was too complicated for me when trying to get it to work with typescript.

I'd love to adopt grpc but I also need to be able to debug it. I understand it will be more cumbersome than json, but right now I can't get it to work at all. I know it should be possible, it's not encrypted, after all the front end can access the data, I know it can since I can see the result on the front end!

How can I decode the responses from tonic-web.

QUFBQUFBTUl6d0k9Z0FBQUFBOW5jbkJqTFhOMFlYUjFjem93RFFvPQ== came from the example app and should contain "335" in it.

QUFBQUFCWUtGRWhsYkd4dklITjBZV05yYjNabGNtWnNiM2NoZ0FBQUFBOW5jbkJqTFhOMFlYUjFjem93RFFvPQ== comes from my own implementation and should contain "Hello stackoverflow!"

1 Answer 1

1

For some reason it is base64 encoded twice. So, first decode from base64:

QUFBQUFCWUtGRWhsYkd4dklITjBZV05yYjNabGNtWnNiM2NoZ0FBQUFBOW5jbkJqTFhOMFlYUjFjem93RFFvPQ==

-->

AAAAABYKFEhlbGxvIHN0YWNrb3ZlcmZsb3chgAAAAA9ncnBjLXN0YXR1czowDQo=

Then decode this with https://protobuf-decoder.netlify.app/ and you'll see "Hello stackoverflow!" in the first field.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.