Beta SDK
了解 JavaScript SDK 7 版本的用户反馈通用配置字段。
用户反馈小部件提供了许多自定义选项,如果这些选项不足以满足需求,您可以使用自己的 UI。下图显示了哪些元素可以自定义。图像左侧的配置键对应于 文本自定义,而右侧的配置键用于 主题自定义。
以下选项可以在 feedbackIntegration({})
中配置:
键 | 类型 | 默认值 | 描述 |
---|---|---|---|
autoInject | boolean | true | 当集成被添加时,注入反馈小部件到应用程序中。如果您想直接调用 feedback.attachTo() 或 feedback.openDialog() ,或仅在某些视图中显示小部件,请设置 autoInject: false 。 |
showBranding | boolean | true | 在表单内显示 Sentry 标志 |
colorScheme | "system" | "light" | "dark" | "system" | 显示颜色主题选择。"system" 将使用您的操作系统颜色方案。 |
键 | 类型 | 默认值 | 描述 |
---|---|---|---|
showName | boolean | true | 在反馈表单中显示姓名字段。 |
showEmail | boolean | true | 在反馈表单中显示电子邮件字段。 |
isNameRequired | boolean | false | 要求反馈表单中的姓名字段必须填写。 |
isEmailRequired | boolean | false | 要求反馈表单中的电子邮件字段必须填写。 |
useSentryUser | Record<string, string> | { email: 'email', name: 'username'} | 将 email 和 name 字段设置为与调用 Sentry.setUser 时对应的 Sentry SDK 用户字段。 |
默认情况下,反馈集成会尝试填充姓名和电子邮件字段,如果您通过 Sentry.setUser()
设置了用户上下文。预期的字段是 email
和 username
。以下是一个带有非默认用户字段的示例配置:
Sentry.setUser({
email: "foo@example.com",
fullName: "Jane Doe",
});
feedbackIntegration({
useSentryUser: {
email: "email",
name: "fullName",
},
});
默认反馈小部件中显示的大多数文本都可以自定义。
键 | 默认值 | 描述 |
---|---|---|
buttonLabel | Report a Bug | 注入按钮的标签。 |
submitButtonLabel | Send Bug Report | 反馈表单中提交按钮的标签。 |
cancelButtonLabel | Cancel | 反馈表单中取消按钮的标签。 |
formTitle | Report a Bug | 反馈表单顶部的标题。 |
nameLabel | Name | 姓名输入字段的标签。 |
namePlaceholder | Your Name | 姓名输入字段的占位符。 |
emailLabel | Email | 电子邮件输入字段的标签。 |
emailPlaceholder | your.email@example.org | 电子邮件输入字段的占位符。 |
messageLabel | Description | 反馈描述输入字段的标签。 |
messagePlaceholder | What's the bug? What did you expect? | 反馈描述输入字段的占位符。 |
successMessageText | Thank you for your report! | 成功提交反馈后显示的消息。 |
isRequiredText | (required) | 必填字段旁边的文本。 |
自定义示例:
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 | --border | 1.5px solid rgba(41, 35, 47, 0.13) | 1.5px solid rgba(235, 230, 239, 0.15) | 小部件(注入按钮和表单)使用的边框样式。 |
borderRadius | --border-radius | 12px | 12px | 小部件(注入按钮和成功消息)使用的圆角样式。 |
boxShadow | --box-shadow | 0px 4px 24px 0px rgba(43, 34, 51, 0.12) | 0px 4px 24px 0px rgba(43, 34, 51, 0.12) | 小部件(注入按钮和表单)使用的阴影样式。 |
submitBackground | --submit-background | rgba(88, 74, 192, 1) | rgba(88, 74, 192, 1) | 提交按钮的背景颜色。 |
submitBackgroundHover | --submit-background-hover | rgba(108, 95, 199, 1) | rgba(108, 95, 199, 1) | 悬停时提交按钮的背景颜色。 |
submitBorder | --submit-border | rgba(108, 95, 199, 1) | rgba(108, 95, 199, 1) | 提交按钮的边框样式。 |
submitOutlineFocus | --submit-outline-focus | rgba(108, 95, 199, 1) | rgba(108, 95, 199, 1) | 聚焦状态下提交按钮的轮廓颜色。 |
submitForeground | --submit-foreground | #ffffff | #ffffff | 提交按钮的前景颜色。 |
submitForegroundHover | --submit-foreground-hover | #ffffff | #ffffff | 悬停时提交按钮的前景颜色。 |
cancelBackground | --cancel-background | transparent | transparent | 取消按钮的背景颜色。 |
cancelBackgroundHover | --cancel-background-hover | var(--background-hover) | var(--background-hover) | 悬停时取消按钮的背景颜色。 |
cancelBorder | --cancel-border | var(--border) | var(--border) | 取消按钮的边框样式。 |
cancelOutlineFocus | --cancel-outline-focus | var(--input-outline-focus) | var(--input-outline-focus) | 聚焦状态下取消按钮的轮廓颜色。 |
cancelForeground | --cancel-foreground | var(--foreground) | var(--foreground) | 取消按钮的前景颜色。 |
cancelForegroundHover | --cancel-foreground-hover | var(--foreground) | var(--foreground) | 悬停时取消按钮的前景颜色。 |
inputBackground | --input-background | inherit | inherit | 表单输入框的背景颜色。 |
inputForeground | --input-foreground | inherit | inherit | 表单输入框的前景颜色。 |
inputBorder | --input-border | var(--border) | var(--border) | 表单输入框的边框样式。 |
inputOutlineFocus | --input-outline-focus | rgba(108, 95, 199, 1) | rgba(108, 95, 199, 1) | 聚焦时表单输入框的轮廓颜色。 |
formBorderRadius | --form-border-radius | 20px | 20px | 表单的圆角样式。 |
formContentBorderRadius | --form-content-border-radius | 6px | 6px | 表单内容(例如:输入框、按钮)的圆角样式。 |
以下是一个仅使用 Feedback 构造函数配置自定义浅色主题背景颜色的示例:
feedbackIntegration({
themeLight: {
background: "#cccccc",
},
});
或者使用 CSS 变量方法实现上述相同的示例:
#sentry-feedback {
--background: #cccccc;
}
以下是额外可以覆盖的 CSS 变量,类似于上述的主题自定义。这些变量不支持在构造函数中使用。
变量 | 默认值 | 描述 |
---|---|---|
--bottom | 1rem | 默认情况下,小部件具有固定位置,并位于右下角。 |
--right | 1rem | 默认情况下,小部件具有固定位置,并位于右下角。 |
--top | auto | 默认情况下,小部件具有固定位置,并位于右下角。 |
--left | auto | 默认情况下,小部件具有固定位置,并位于右下角。 |
--z-index | 100000 | 小部件的 z-index。 |
--font-family | "'Helvetica Neue', Arial, sans-serif" | 默认字体。 |
--font-size | 14px | 字体大小。 |
有时了解用户何时开始与反馈表单交互非常有用,因此我们允许您添加自定义日志记录,或在页面上启动和停止后台计时器,以告知您用户何时完成操作。
在初始化 Feedback 集成时传递这些回调:
feedbackIntegration({
onFormOpen: () => {},
onFormClose: () => {},
onSubmitSuccess: () => {},
onSubmitError: () => {},
});
您可以使用自己的按钮代替默认的注入按钮来触发表单显示,通过调用 feedback.attachTo()
让 SDK 为您的按钮附加点击监听器。您还可以提供与构造函数接受的相同的自定义选项(例如,文本标签和颜色)。
const feedback = feedbackIntegration({
// Disable the injection of the default widget
autoInject: false,
});
feedback.attachTo(document.querySelector("#your-button"), {
formTitle: "Report a Bug!",
});
或者,您可以调用 feedback.openDialog()
:
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
属性以及可选的name
和email
属性的 JavaScript 对象,或者是一个具有相同属性的FormData
实例。 - 一个可选的 "options" 对象。
Sentry.sendFeedback(
{
name: "Jane Doe", // optional
email: "email@example.org", // optional
message: "This is an example feedback", // required
},
{
includeReplay: true, // optional
},
);
这里是一个简单的示例:
<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 | 您的反馈已发送。感谢! |
onLoad | n/a - (当小部件打开时调用的可选回调。) |
onClose | n/a - (当小部件关闭时调用的可选回调。) |
可选回调 onLoad
在用户看到小部件时被调用。您可以使用此回调来运行自定义逻辑,例如记录分析事件:
Sentry.showReportDialog({
// ...
onLoad() {
// Log an event to amplitude when the report dialog opens
amplitude.logEvent("report_dialog_seen");
},
});
可选回调 onClose
在用户关闭小部件时被调用。您可以使用此回调来运行自定义逻辑,例如重新加载页面:
需要 JS SDK 版本 v7.82.0 或更高。
Sentry.showReportDialog({
// ...
onClose() {
// Refresh the page after the user closes the report dialog
location.reload();
},
});