nice-grpc-client-middleware-devtools

import { createClientFactory, createChannel, ClientError, Status } from 'nice-grpc-web'; import { devtoolsClientMiddleware } from 'nice-grpc-client-middleware-devtools'; import { type ExampleServiceDefinition, ExampleServiceDefinition } from './compiled_proto/example'; // Imagine your compiled Protobuf types look like this (e.g., from ts-proto) interface ExampleServiceDefinition { readonly methodName: string; readonly requestType: any; readonly responseType: any; // ... other protobuf definitions } // 1. Define your gRPC service (usually compiled from .proto) // ExampleServiceDefinition would come from your proto compilation output // 2. Create a gRPC-Web channel pointing to your proxy/server const channel = createChannel('http://localhost:8080'); // 3. Create a client factory and apply the devtools middleware const clientFactory = createClientFactory() .use(devtoolsClientMiddleware); // 4. Create your gRPC client instance const client = clientFactory.create( ExampleServiceDefinition, channel, ); // 5. Make a gRPC call (this will now be logged in grpc-web-devtools) async function callService() { try { console.log('Making a gRPC call...'); const response = await client.exampleMethod({ name: 'World' }, { metadata: { 'x-request-id': '123' }, // Additional call options can be passed here }); console.log('gRPC response:', response); } catch (error: unknown) { if (error instanceof ClientError) { console.error(`gRPC Error: ${error.code} - ${error.details}`); } else { console.error('Unknown error:', error); } } } callService(); // A minimal example for ExampleServiceDefinition if not using ts-proto directly: export const ExampleServiceDefinition = { methodName: 'ExampleService', requestType: {}, // Define your request type structure responseType: {}, // Define your response type structure // Typically, this comes from compiled .proto files methods: { exampleMethod: {}, } } as unknown as ExampleServiceDefinition;