通过 POST/PUT/PATCH 请求向 Sentry.io 发送有效负载数据

Question

我正在尝试将有效负载数据添加到发送到 Sentry.io 的面包屑中。

看起来就像这样。

我找到了如何添加回复。

const sentryConfig: BrowserOptions = {
  beforeBreadcrumb: (breadcrumb, hint) => {
    if (breadcrumb.category === 'xhr') {
      // hint.xhr is a whole XHR object that you can use to modify breadcrumb
      breadcrumb.data = (hint.xhr as XMLHttpRequest).response;
    }

    return breadcrumb;
  }
};

但我似乎找不到添加有效负载的方法。

XMLHttpRequest

没有此信息。

Answer 1

可以通过这种方式从您的 xhr 获取正文（有效负载数据）：

beforeBreadcrumb: (breadcrumb, hint) => {
 if (breadcrumb.category === 'xhr') {
   const data = {
     requestBody: hint.xhr.__sentry_xhr__.body,
     response: hint.xhr.response,
     responseUrl: hint.xhr.responseURL
   }
   return { ...breadcrumb, data }
 }
 return breadcrumb
}

这是添加它的PR。

Answer 2

我认为没有办法从 xhr 请求中获取有效负载。在创建 xhr 请求时，无论您在哪里有有效负载，我都会

console.log()

。它不会是同一个面包屑的一部分，但您会在 Sentry 中看到它。

Answer 3

类似于卢卡斯的回答：

  beforeBreadcrumb: (breadcrumb, hint) => {
    if (breadcrumb.category === 'xhr' && hint) {
      const xhrKey = Object.keys(hint.xhr).find((key) =>
        /^__sentry_xhr_v\d+__$/.test(key),
      );
      if (!xhrKey) return breadcrumb;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const req: any = hint.xhr[xhrKey];
      try {
        req.body = JSON.parse(req.body);
      } catch {
        //
      }
      const data = {
        request: req,
        response: hint.xhr.response,
      };
      return { ...breadcrumb, data };
    }
    return breadcrumb;
  },