Merge branch 'develop' into feat/prioritize-component-name

Author: 0Calories

.github/workflows/codeql-analysis.yml

@@ -32,7 +32,7 @@ concurrency:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     strategy:
       fail-fast: false
@@ -51,6 +51,7 @@ jobs:
         uses: github/codeql-action/init@v2
         with:
           config-file: ./.github/codeql/codeql-config.yml
+          queries: security-extended
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
           # By default, queries listed here will override any specified in a config file.

packages/feedback/README.md

@@ -6,9 +6,11 @@
 
 # Sentry Integration for Feedback
 
-This SDK is **considered experimental and in an alpha state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
 [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
 
+To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
 ## Pre-requisites
 
 `@sentry-internal/feedback` currently can only be used by browsers with [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) support.
@@ -210,7 +212,7 @@ import {BrowserClient, getCurrentHub} from '@sentry/react';
 import {Feedback} from '@sentry-internal/feedback';
 
 function MyFeedbackButton() {
-    const client = hub && getCurrentHub().getClient<BrowserClient>();
+    const client = getCurrentHub().getClient<BrowserClient>();
     const feedback = client?.getIntegration(Feedback);
 
     // Don't render custom feedback button if Feedback integration not installed
@@ -228,22 +230,40 @@ function MyFeedbackButton() {
 
 ### Bring Your Own Widget
 
-You can also bring your own widget and UI and simply pass a feedback object to the `sendFeedback()` function.
+You can also bring your own widget and UI and simply pass a feedback object to the `sendFeedback()` function. The `sendFeedback` function accepts two parameters:
+* a feedback object with a required `message` property, and additionally, optional `name` and `email` properties
+* an options object
+
+```javascript
+sendFeedback({
+  name: 'Jane Doe', // optional
+  email: '[email protected]', // optional
+  message: 'This is an example feedback', // required
+}, {
+  includeReplay: true, // optional
+})
+```
+
+Here is a simple example
 
 ```html
 <form id="my-feedback-form">
   <input name="name" />
   <input name="email" />
   <textarea name="message" placeholder="What's the issue?" />
 </form>
+```
+
+```javascript
+import {BrowserClient, getCurrentHub} from '@sentry/react';
+import {Feedback} from '@sentry-internal/feedback';
 
-<script>
 document.getElementById('my-feedback-form').addEventListener('submit', (event) => {
+  const feedback = getCurrentHub().getClient<BrowserClient>()?.getIntegration(Feedback);
   const formData = new FormData(event.currentTarget);
-  Feedback.sendFeedback(formData);
+  feedback.sendFeedback(formData);
   event.preventDefault();
 });
-</script>
 ```
 
 ## Alerting on User Feedback Reports