{"library":"nice-grpc-client-middleware-devtools","title":"nice-grpc DevTools Client Middleware","description":"This package provides a client-side middleware for `nice-grpc` and `nice-grpc-web` that integrates with the `grpc-web-devtools` browser extension. Its primary function is to log gRPC-Web requests and responses, making them visible and inspectable within the browser's developer tools. This is crucial for debugging frontend applications that communicate with gRPC backends via gRPC-Web, a common pain point due to gRPC-Web's protocol translation layer. Currently at version 1.0.10, the package generally follows the active development and release cadence of its parent `nice-grpc` project, which sees frequent updates. It offers a straightforward way to gain visibility into gRPC-Web traffic, differentiating itself by specifically targeting the popular `grpc-web-devtools` extension for an enhanced developer experience.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install nice-grpc-client-middleware-devtools"],"cli":null},"imports":["import { devtoolsClientMiddleware } from 'nice-grpc-client-middleware-devtools';","import { devtoolsUnaryLoggingMiddleware } from 'nice-grpc-client-middleware-devtools';","import { devtoolsStreamLoggingMiddleware } from 'nice-grpc-client-middleware-devtools';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createClientFactory, createChannel, ClientError, Status } from 'nice-grpc-web';\nimport { devtoolsClientMiddleware } from 'nice-grpc-client-middleware-devtools';\nimport { type ExampleServiceDefinition, ExampleServiceDefinition } from './compiled_proto/example';\n\n// Imagine your compiled Protobuf types look like this (e.g., from ts-proto)\ninterface ExampleServiceDefinition {\n  readonly methodName: string;\n  readonly requestType: any;\n  readonly responseType: any;\n  // ... other protobuf definitions\n}\n\n// 1. Define your gRPC service (usually compiled from .proto)\n// ExampleServiceDefinition would come from your proto compilation output\n\n// 2. Create a gRPC-Web channel pointing to your proxy/server\nconst channel = createChannel('http://localhost:8080');\n\n// 3. Create a client factory and apply the devtools middleware\nconst clientFactory = createClientFactory()\n  .use(devtoolsClientMiddleware);\n\n// 4. Create your gRPC client instance\nconst client = clientFactory.create(\n  ExampleServiceDefinition,\n  channel,\n);\n\n// 5. Make a gRPC call (this will now be logged in grpc-web-devtools)\nasync function callService() {\n  try {\n    console.log('Making a gRPC call...');\n    const response = await client.exampleMethod({ name: 'World' }, {\n      metadata: { 'x-request-id': '123' },\n      // Additional call options can be passed here\n    });\n    console.log('gRPC response:', response);\n  } catch (error: unknown) {\n    if (error instanceof ClientError) {\n      console.error(`gRPC Error: ${error.code} - ${error.details}`);\n    } else {\n      console.error('Unknown error:', error);\n    }\n  }\n}\n\ncallService();\n\n// A minimal example for ExampleServiceDefinition if not using ts-proto directly:\nexport const ExampleServiceDefinition = {\n  methodName: 'ExampleService',\n  requestType: {}, // Define your request type structure\n  responseType: {}, // Define your response type structure\n  // Typically, this comes from compiled .proto files\n  methods: {\n    exampleMethod: {},\n  }\n} as unknown as ExampleServiceDefinition;\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `devtoolsClientMiddleware` into a `nice-grpc-web` client, enabling automatic logging of gRPC-Web requests and responses to the `grpc-web-devtools` browser extension for debugging.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}