{"id":17834,"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.","status":"active","version":"1.0.10","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install nice-grpc-client-middleware-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add nice-grpc-client-middleware-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add nice-grpc-client-middleware-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This middleware is specifically designed to work with gRPC-Web clients and the `grpc-web-devtools` browser extension.","package":"nice-grpc-web","optional":false},{"reason":"While primarily for web, `nice-grpc` is the foundational library for the ecosystem. The middleware expects a `nice-grpc` compatible client factory.","package":"nice-grpc","optional":false},{"reason":"Provides common types and utilities shared across the `nice-grpc` ecosystem.","package":"nice-grpc-common","optional":false}],"imports":[{"note":"The `nice-grpc` ecosystem is primarily ESM-first and TypeScript-centric. While CommonJS might technically work with transpilation, direct `require` is not the idiomatic approach.","wrong":"const { devtoolsClientMiddleware } = require('nice-grpc-client-middleware-devtools');","symbol":"devtoolsClientMiddleware","correct":"import { devtoolsClientMiddleware } from 'nice-grpc-client-middleware-devtools';"},{"note":"Use this specific middleware if you only want to log unary (request-response) gRPC calls to devtools, excluding streaming calls.","symbol":"devtoolsUnaryLoggingMiddleware","correct":"import { devtoolsUnaryLoggingMiddleware } from 'nice-grpc-client-middleware-devtools';"},{"note":"Use this specific middleware if you only want to log streaming gRPC calls to devtools, excluding unary calls.","symbol":"devtoolsStreamLoggingMiddleware","correct":"import { devtoolsStreamLoggingMiddleware } from 'nice-grpc-client-middleware-devtools';"}],"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."},"warnings":[{"fix":"Ensure the `grpc-web-devtools` Chrome/Edge extension (or equivalent) is installed in your browser.","message":"This middleware is designed to work with the `grpc-web-devtools` browser extension. Requests will not appear in browser DevTools unless the extension is installed and active.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Arrange your `.use()` calls based on the desired execution order. If `devtoolsClientMiddleware` needs to see the final request/response before other transformations, place it earlier in the chain. If it needs to see them after transformations, place it later.","message":"The `nice-grpc` middleware chain processes in reverse order of attachment: `clientFactory.use(middleware1).use(middleware2)` means `middleware1` is invoked last, and `middleware2` is invoked first. Consider middleware order carefully if you have multiple middlewares.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure you are using `createClientFactory` and `createChannel` from `nice-grpc-web` when targeting browser environments for `grpc-web-devtools` integration.","message":"This middleware is primarily intended for `nice-grpc-web` clients running in the browser. While technically usable with `nice-grpc` in Node.js, it won't provide benefits for browser-based debugging there and might lead to confusion.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.10':89 'activ':95 'applic':63 'backend':68 'browser':32,53 'cadenc':99 'client':5,12 'client-sid':11 'common':74 'communic':65 'crucial':59 'current':86 'debug':61 'develop':55,96,139 'devtool':4,31,134 'differenti':124 'due':77 'enhanc':138 'experi':140 'extens':33,135 'follow':93 'frequent':109 'frontend':62 'function':36 'gain':117 'general':92 'grpc':3,18,22,29,41,67,71,80,105,121,132 'grpc-web':40,70,79,120 'grpc-web-devtool':28,131 'inspect':50 'integr':25 'javascript':141 'layer':85 'log':39 'make':46 'middlewar':6,14 'nice':2,17,21,104 'nice-grpc':1,16,103 'nice-grpc-web':20 'offer':112 'packag':8,91 'pain':75 'parent':102 'point':76 'popular':130 'primari':35 'project':106 'protocol':83 'provid':9 'releas':98 'request':43 'respons':45 'see':108 'side':13 'specif':127 'straightforward':114 'target':128 'tool':56 'traffic':123 'translat':84 'typescript':142 'updat':110 'version':88 'via':69 'visibl':48,118 'way':115 'web':23,30,42,72,81,122,133 'within':51","created_at":"2026-04-23T17:48:21.588225+00:00","updated_at":"2026-04-23T17:48:21.588225+00:00","problems":[{"fix":"Use ESM `import` statements: `import { devtoolsClientMiddleware } from 'nice-grpc-client-middleware-devtools';`","cause":"Attempting to use CommonJS `require()` syntax in an ESM-only or ESM-configured project.","error":"ReferenceError: require is not defined"},{"fix":"Ensure you correctly import `createClientFactory` from `nice-grpc-web` and call `createClientFactory()` before chaining `.use()` calls: `const clientFactory = createClientFactory().use(middleware);`","cause":"Likely attempting to call `.use()` on something other than a `ClientFactory` or an incorrectly initialized factory.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Verify the `grpc-web-devtools` extension is installed and enabled. Double-check that `devtoolsClientMiddleware` is applied to your `createClientFactory()` instance. Ensure your browser is indeed making gRPC-Web requests (often visible as POST requests to `/Service/Method` with `Content-Type: application/grpc-web+proto` or `application/grpc-web-text`).","cause":"The `grpc-web-devtools` browser extension is not installed, not enabled, or the middleware is not correctly applied to the client factory. Also, ensure your gRPC-Web proxy (e.g., Envoy) is correctly configured.","error":"gRPC-Web calls not appearing in browser's Network tab or grpc-web-devtools extension."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/nice-grpc-client-middleware-devtools","openapi_spec":null,"status_page":null,"smithery":null,"categories":["observability","http-networking","testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-22","install_tag":null}}