设置用户反馈

了解如何在应用程序中启用用户反馈。

用户反馈功能允许您在应用程序中的任何地方、任何时间收集用户反馈，而无需首先发生错误事件。另一方面，崩溃报告模态框功能允许您在错误事件发生时提示用户反馈。

请注意，如果您使用的是自托管的 Sentry 实例，则需要使用版本 24.4.2 或更高版本才能使用用户反馈功能的全部功能。较低版本可能具有有限的功能。

可嵌入的 JavaScript 小部件允许用户从应用程序内的任何地方提交反馈。崩溃报告模态框收集与错误事件相关的反应性反馈。

要使用户反馈集成正常工作，您必须安装 Sentry 浏览器 SDK 包，或等效的框架 SDK（例如，@sentry/react）。SDK 的最低版本要求是 7.85.0。如果您使用的是较旧版本的 SDK，请查阅此迁移文档。

用户反馈需要支持 Shadow DOM 和 Dialog 元素的浏览器。

用户反馈集成已包含在您的 NPM 包中。您无需安装任何其他内容即可使用它。

如果您使用的是加载器脚本，可以像这样懒加载用户反馈集成：

Copied

window.sentryOnLoad = function () {
  Sentry.init({
    // add other configuration here
  });

  Sentry.lazyLoadIntegration("feedbackIntegration")
    .then((feedbackIntegration) => {
      Sentry.addIntegration(
        feedbackIntegration({
          // User Feedback configuration options
        }),
      );
    })
    .catch(() => {
      // this can happen if e.g. a network error occurs,
      // in this case User Feedback will not be enabled
    });
};

如果您使用的是 CDN 包而不是 NPM 包，则需要使用包含用户反馈的相应包：

Copied

<!-- Recommended: Use this bundle for feedback, replay, error, and tracing -->
<script
  src="https://browser.sentry-cdn.com/8.54.0/bundle.tracing.replay.feedback.min.js"
  integrity="sha384-aNUE5rjATOTfMaX3r6V0p+hEE3m4vTWGPSimTkJPd/BUCVxHJVWatOVybGs5Likt"
  crossorigin="anonymous"
></script>

<!-- Alternatively, you can use this bundle for feedback and error monitoring only -->
<script
  src="https://browser.sentry-cdn.com/8.54.0/bundle.feedback.min.js"
  integrity="sha384-bdF+q/SefES1kCntjuGocmo+FhYU4uf6rurEDmUuldIwonJ0Ze2XrtXzh/cApFvr"
  crossorigin="anonymous"
></script>

要设置集成，请将以下内容添加到您的 Sentry 初始化代码中。您可以传递许多选项给集成构造函数。更多详细信息请参阅配置文档。

Copied

// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  integrations: [
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
  ],
});

默认情况下，这将在您网站的右下角插入小部件。您可以自由定制小部件的几乎所有方面，包括完全替换为自己的 UI。

在 SDK 版本 8.0.0 及以上版本中，用户可以随反馈发送截图。如果您是自托管，则还需要 24.4.2 及以上版本。您可以使用 enableScreenshot 选项进行配置，默认情况下它设置为 true。由于不支持移动设备上的截图，因此在这种情况下截图按钮会自动隐藏。

截图使用您的附件配额。所有计划都包含 1GB 的附件，大约相当于 2500 张截图。

用户反馈小部件与 Session Replay 集成非常简单。首先，确保 Session Replay 集成已正确配置，并且 replaysOnErrorSampleRate 大于 0。完成后，当用户打开用户反馈小部件时，Replay SDK 将缓冲最多 30 秒的用户会话。如果用户提交了反馈，您可以在 sentry.io 中查看反馈（包括重放）。

用户反馈 API 允许您在使用自己的 UI 时收集用户反馈。您可以使用应用程序中的相同编程语言发送用户反馈。在这种情况下，SDK 会创建 HTTP 请求，因此您无需通过 HTTP 发送数据。

Sentry 将反馈与原始事件配对，为您提供更多关于问题的见解。Sentry 需要 eventId 才能将用户反馈与相应的事件关联起来。例如，要获取 eventId，您可以使用 beforeSend或捕获事件方法的返回值。

Copied

import * as Sentry from "@sentry/browser";

const eventId = Sentry.captureMessage("User Feedback");
// OR: const eventId = Sentry.lastEventId();

const userFeedback = {
  name: "John Doe",
  email: "john@doe.com",
  message: "I really like your App, thanks!",
  associatedEventId: eventId,
};
Sentry.captureFeedback(userFeedback);

您还可以通过传递 hint 作为第二个参数来附加更多数据到反馈事件。这与其他 capture 方法类似：

Copied

Sentry.captureFeedback(
  { message: "I really like your App, thanks!" },
  {
    captureContext: {
      tags: { key: "value" },
    },
    attachments: [
      {
        filename: "screenshot.png",
        data: "base64-encoded-image",
      },
    ],
  },
);

或者，您可以直接使用用户反馈 API 端点。

我们的可嵌入、基于 JavaScript 的崩溃报告模态框在您通常会在网站上渲染一个简单的错误页面（经典的 500.html）时非常有用。

为了收集反馈，崩溃报告模态框会请求并收集用户的姓名、电子邮件地址和事件描述。当提供反馈时，Sentry 会将反馈与原始事件配对，为您提供更多关于问题的见解。

下面的截图提供了崩溃报告模态框的示例，具体样式可能因您的自定义而有所不同：

模态框使用您的公共 DSN 进行身份验证，然后传入在后端生成的 Event ID。

如果您使用的是像 React 或 Angular 这样的框架，收集用户反馈的最佳位置是在您的错误处理组件中。（请参阅平台特定的文档以获取示例。）如果您没有使用框架，可以在事件发送之前使用 beforeSend 来收集反馈：

Copied

<script>
  Sentry.init({
    dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
    beforeSend(event, hint) {
      // Check if it is an exception, and if so, show the report dialog
      if (event.exception && event.event_id) {
        Sentry.showReportDialog({ eventId: event.event_id });
      }
      return event;
    },
  });
</script>

设置会话重放

配置