Beta SDK

了解 JavaScript SDK 7 版本的用户反馈通用配置字段。

用户反馈小部件提供了许多自定义选项,如果这些选项不足以满足需求,您可以使用自己的 UI。下图显示了哪些元素可以自定义。图像左侧的配置键对应于 文本自定义,而右侧的配置键用于 主题自定义

显示用户反馈小部件可用自定义选项的图像

以下选项可以在 feedbackIntegration({}) 中配置:

类型默认值描述
autoInjectbooleantrue当集成被添加时,注入反馈小部件到应用程序中。如果您想直接调用 feedback.attachTo()feedback.openDialog(),或仅在某些视图中显示小部件,请设置 autoInject: false
showBrandingbooleantrue在表单内显示 Sentry 标志
colorScheme"system" | "light" | "dark""system"显示颜色主题选择。"system" 将使用您的操作系统颜色方案。

类型默认值描述
showNamebooleantrue在反馈表单中显示姓名字段。
showEmailbooleantrue在反馈表单中显示电子邮件字段。
isNameRequiredbooleanfalse要求反馈表单中的姓名字段必须填写。
isEmailRequiredbooleanfalse要求反馈表单中的电子邮件字段必须填写。
useSentryUserRecord<string, string>{ email: 'email', name: 'username'}emailname 字段设置为与调用 Sentry.setUser 时对应的 Sentry SDK 用户字段。

默认情况下,反馈集成会尝试填充姓名和电子邮件字段,如果您通过 Sentry.setUser() 设置了用户上下文。预期的字段是 emailusername。以下是一个带有非默认用户字段的示例配置:

Copied
Sentry.setUser({
  email: "foo@example.com",
  fullName: "Jane Doe",
});

feedbackIntegration({
  useSentryUser: {
    email: "email",
    name: "fullName",
  },
});

默认反馈小部件中显示的大多数文本都可以自定义。

默认值描述
buttonLabelReport a Bug注入按钮的标签。
submitButtonLabelSend Bug Report反馈表单中提交按钮的标签。
cancelButtonLabelCancel反馈表单中取消按钮的标签。
formTitleReport a Bug反馈表单顶部的标题。
nameLabelName姓名输入字段的标签。
namePlaceholderYour Name姓名输入字段的占位符。
emailLabelEmail电子邮件输入字段的标签。
emailPlaceholderyour.email@example.org电子邮件输入字段的占位符。
messageLabelDescription反馈描述输入字段的标签。
messagePlaceholderWhat's the bug? What did you expect?反馈描述输入字段的占位符。
successMessageTextThank you for your report!成功提交反馈后显示的消息。
isRequiredText(required)必填字段旁边的文本。

自定义示例:

Copied
feedbackIntegration({
  buttonLabel: "Feedback",
  submitButtonLabel: "Send Feedback",
  formTitle: "Send Feedback",
});

颜色可以通过 Feedback 类构造函数或在注入按钮上定义 CSS 变量来进行自定义。如果使用默认按钮,它将具有属性 id="sentry-feedback",这意味着您可以使用 #sentry-feedback 选择器来定义覆盖的 CSS 变量。

CSS 变量浅色模式深色模式描述
background--background#ffffff#29232f小部件(注入按钮和表单)的背景颜色。
backgroundHover--background-hover#f6f6f7#352f3b注入按钮在悬停状态下的背景颜色。
foreground--foreground#2b2233#ebe6ef前景颜色,例如文本颜色。
error--error#df3338#f55459错误相关组件使用的颜色(例如提交反馈时出错的文本颜色)。
success--success#268d75#2da98c成功相关组件使用的颜色(例如成功提交反馈时的文本颜色)。
border--border1.5px solid rgba(41, 35, 47, 0.13)1.5px solid rgba(235, 230, 239, 0.15)小部件(注入按钮和表单)使用的边框样式。
borderRadius--border-radius12px12px小部件(注入按钮和成功消息)使用的圆角样式。
boxShadow--box-shadow0px 4px 24px 0px rgba(43, 34, 51, 0.12)0px 4px 24px 0px rgba(43, 34, 51, 0.12)小部件(注入按钮和表单)使用的阴影样式。
submitBackground--submit-backgroundrgba(88, 74, 192, 1)rgba(88, 74, 192, 1)提交按钮的背景颜色。
submitBackgroundHover--submit-background-hoverrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)悬停时提交按钮的背景颜色。
submitBorder--submit-borderrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)提交按钮的边框样式。
submitOutlineFocus--submit-outline-focusrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)聚焦状态下提交按钮的轮廓颜色。
submitForeground--submit-foreground#ffffff#ffffff提交按钮的前景颜色。
submitForegroundHover--submit-foreground-hover#ffffff#ffffff悬停时提交按钮的前景颜色。
cancelBackground--cancel-backgroundtransparenttransparent取消按钮的背景颜色。
cancelBackgroundHover--cancel-background-hovervar(--background-hover)var(--background-hover)悬停时取消按钮的背景颜色。
cancelBorder--cancel-bordervar(--border)var(--border)取消按钮的边框样式。
cancelOutlineFocus--cancel-outline-focusvar(--input-outline-focus)var(--input-outline-focus)聚焦状态下取消按钮的轮廓颜色。
cancelForeground--cancel-foregroundvar(--foreground)var(--foreground)取消按钮的前景颜色。
cancelForegroundHover--cancel-foreground-hovervar(--foreground)var(--foreground)悬停时取消按钮的前景颜色。
inputBackground--input-backgroundinheritinherit表单输入框的背景颜色。
inputForeground--input-foregroundinheritinherit表单输入框的前景颜色。
inputBorder--input-bordervar(--border)var(--border)表单输入框的边框样式。
inputOutlineFocus--input-outline-focusrgba(108, 95, 199, 1)rgba(108, 95, 199, 1)聚焦时表单输入框的轮廓颜色。
formBorderRadius--form-border-radius20px20px表单的圆角样式。
formContentBorderRadius--form-content-border-radius6px6px表单内容(例如:输入框、按钮)的圆角样式。

以下是一个仅使用 Feedback 构造函数配置自定义浅色主题背景颜色的示例:

Copied
feedbackIntegration({
  themeLight: {
    background: "#cccccc",
  },
});

或者使用 CSS 变量方法实现上述相同的示例:

Copied
#sentry-feedback {
  --background: #cccccc;
}

以下是额外可以覆盖的 CSS 变量,类似于上述的主题自定义。这些变量不支持在构造函数中使用。

变量默认值描述
--bottom1rem默认情况下,小部件具有固定位置,并位于右下角。
--right1rem默认情况下,小部件具有固定位置,并位于右下角。
--topauto默认情况下,小部件具有固定位置,并位于右下角。
--leftauto默认情况下,小部件具有固定位置,并位于右下角。
--z-index100000小部件的 z-index。
--font-family"'Helvetica Neue', Arial, sans-serif"默认字体。
--font-size14px字体大小。

有时了解用户何时开始与反馈表单交互非常有用,因此我们允许您添加自定义日志记录,或在页面上启动和停止后台计时器,以告知您用户何时完成操作。

在初始化 Feedback 集成时传递这些回调:

Copied
feedbackIntegration({
  onFormOpen: () => {},
  onFormClose: () => {},
  onSubmitSuccess: () => {},
  onSubmitError: () => {},
});

您可以使用自己的按钮代替默认的注入按钮来触发表单显示,通过调用 feedback.attachTo() 让 SDK 为您的按钮附加点击监听器。您还可以提供与构造函数接受的相同的自定义选项(例如,文本标签和颜色)。

Copied
const feedback = feedbackIntegration({
  // Disable the injection of the default widget
  autoInject: false,
});

feedback.attachTo(document.querySelector("#your-button"), {
  formTitle: "Report a Bug!",
});

或者,您可以调用 feedback.openDialog()

Copied
import { BrowserClient, Feedback, getClient } from "@sentry/react";

function MyFeedbackButton() {
  const client = getClient<BrowserClient>();
  const feedback = client?.getIntegration(Feedback);

  // Don't render custom feedback button if Feedback integration isn't installed
  if (!feedback) {
    return null;
  }

  return (
    <button type="button" onClick={() => feedback.openDialog()}>
      Give me feedback
    </button>
  );
}

您还可以使用自己的 UI 组件来收集反馈,并将反馈数据对象传递给 sendFeedback() 函数。sendFeedback 函数接受两个参数:

  • 一个包含必需的 message 属性以及可选的 nameemail 属性的 JavaScript 对象,或者是一个具有相同属性的 FormData 实例。
  • 一个可选的 "options" 对象。
Copied
Sentry.sendFeedback(
  {
    name: "Jane Doe", // optional
    email: "email@example.org", // optional
    message: "This is an example feedback", // required
  },
  {
    includeReplay: true, // optional
  },
);

这里是一个简单的示例:

Copied
<form id="my-feedback-form">
  <input name="name" />
  <input name="email" />
  <textarea name="message" placeholder="What's the issue?" />
</form>

您可以根据组织的需求自定义崩溃报告模态框,例如用于本地化。所有选项都可以通过 Sentry.showReportDialog 调用传递。

参数默认值
eventId手动设置事件的 ID。
dsn手动设置要报告到的 DSN。
user手动设置用户数据 [包含以下键的对象]
user.email用户的电子邮件地址。
user.name用户的姓名。
lang[自动] – (覆盖 Sentry 的语言代码。)
title看起来我们遇到了一些问题。
subtitle我们的团队已收到通知。
subtitle2如果您愿意帮助,请在下方告诉我们发生了什么。– (在小屏幕分辨率下不可见。)
labelName姓名
labelEmail电子邮件
labelComments发生了什么?
labelClose关闭
labelSubmit提交
errorGeneric在提交您的报告时发生了一个未知错误。请重试。
errorFormEntry某些字段无效。请修正错误并重试。
successMessage您的反馈已发送。感谢!
onLoadn/a - (当小部件打开时调用的可选回调。)
onClosen/a - (当小部件关闭时调用的可选回调。)

可选回调 onLoad 在用户看到小部件时被调用。您可以使用此回调来运行自定义逻辑,例如记录分析事件:

Copied
Sentry.showReportDialog({
  // ...
  onLoad() {
    // Log an event to amplitude when the report dialog opens
    amplitude.logEvent("report_dialog_seen");
  },
});

可选回调 onClose 在用户关闭小部件时被调用。您可以使用此回调来运行自定义逻辑,例如重新加载页面:

需要 JS SDK 版本 v7.82.0 或更高。

Copied
Sentry.showReportDialog({
  // ...
  onClose() {
    // Refresh the page after the user closes the report dialog
    location.reload();
  },
});