How to receive ErrorDetails using Google's error_details.proto

[boan-anbo]

Hi there!

I'm using connect-web client to handle GRPC-web errors containing ErrorDetails.

However, I am not sure how to use the connectErrorDetails utility function to extract the error_details message, especially regarding the second parameter:

export declare function connectErrorDetails<T extends Message<T>>(error: ConnectError, type: MessageType<T>): T[];

Which MessageType should I use to extract Google's implementation of Error Details from it?

If I access (error as ConnectError).details, the values remained UInt8.

A sample code to demonstrate it will do. Thank you!

[timostamm]

Hey @boan-anbo,

with the following buf.gen.yaml:

version: v1
plugins:
  - plugin: buf.build/bufbuild/es
    opt: target=ts
    out: gen

Run the following command to generate the googleapis module, which includes error_details.proto:

npx buf generate buf.build/googleapis/googleapis

The new file gen/google/rpc/error_details_pb.ts will contain all proto messages for error details. One of them is google.rpc.LocalizedMessage, for error messages that are safe to return to the user.

Here is a function that finds a LocalizedMessage for the current locale from the error details:

import {ConnectError, connectErrorDetails} from "@bufbuild/connect-web";
import {LocalizedMessage} from "./gen/google/rpc/error_details_pb.js";

function handle(err: ConnectError) {
  const localizedMessages = connectErrorDetails(err, LocalizedMessage);
  const currentLocaleMessage = localizedMessages.find(i => i.locale === navigator.language);
  console.log(currentLocaleMessage?.message);
}

You can see that connectErrorDetails() returns an array of LocalizedMessage, because the same message can be given multiple times. This is true for all error details - they are just a list of arbitrary protobuf messages.

Any protobuf message can be used in error details, but server and client should have some common understanding of the actual information. error_details.proto just defines a useful set of messages, but it is a good idea to start with them, and only use other types when you really need something that is missing.

You can find an example for providing error details on the server side with TypeScript here.

[boan-anbo]

Thanks so much!

I used ErrorInfo in the Google definition, so the extraction ended like this:

 private extractErrorInfo(error: unknown): ErrorInfo {
      const errorInfo: ErrorInfo[] = connectErrorDetails(error as ConnectError, ErrorInfo);
      if (errorInfo.length === 0) {
          throw new Error('No ErrorInfo found in error');
      } else if (errorInfo.length > 1) {
          throw new Error('Multiple ErrorInfo found in error');
      }
      return errorInfo[0];
  }