From b2a56bcc72185b626c19e290a614bc61710fe190 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Tue, 31 Oct 2023 16:03:29 +0100 Subject: [PATCH 01/27] feat(replay): Update rrweb to 2.2.0 (#9414) - feat: Export getCanvasManager & allow passing it to record() [#122](https://github.com/getsentry/rrweb/pull/122) - feat: Remove hooks related code, which is not used [#126](https://github.com/getsentry/rrweb/pull/126) - feat: Remove plugins related code, which is not used [#123](https://github.com/getsentry/rrweb/pull/123) - feat: Refactor module scope vars & export mirror & `takeFullSnapshot` directly [#113](https://github.com/getsentry/rrweb/pull/113) - fix(rrweb): Fix rule.style being undefined [#121](https://github.com/getsentry/rrweb/pull/121) - ref: Avoid unnecessary cloning of objects or arrays [#125](https://github.com/getsentry/rrweb/pull/125) - ref: Avoid cloning events to add timestamp [#124](https://github.com/getsentry/rrweb/pull/124) Note: With this update, canvas is _always_ excluded, unless we opt in by passing a `getCanvasManager` function to `record()`. We'll provide a way to do this once we have a fully formed canvas story. For now, this will reduce bundle size considerably for all SDK users. --- .size-limit.js | 1 - packages/replay/package.json | 4 ++-- rollup/bundleHelpers.js | 1 - rollup/npmHelpers.js | 1 - rollup/plugins/npmPlugins.js | 8 ++----- yarn.lock | 42 ++++++++++++++++++------------------ 6 files changed, 25 insertions(+), 32 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 81c2c01b1eb0..b00bae9ff5be 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -18,7 +18,6 @@ module.exports = [ config.plugins.push( new webpack.DefinePlugin({ __SENTRY_DEBUG__: false, - __RRWEB_EXCLUDE_CANVAS__: true, __RRWEB_EXCLUDE_SHADOW_DOM__: true, __RRWEB_EXCLUDE_IFRAME__: true, __SENTRY_EXCLUDE_REPLAY_WORKER__: true, diff --git a/packages/replay/package.json b/packages/replay/package.json index ad66d592b089..56ec494fbeaf 100644 --- a/packages/replay/package.json +++ b/packages/replay/package.json @@ -52,8 +52,8 @@ "devDependencies": { "@babel/core": "^7.17.5", "@sentry-internal/replay-worker": "7.77.0", - "@sentry-internal/rrweb": "2.1.0", - "@sentry-internal/rrweb-snapshot": "2.1.0", + "@sentry-internal/rrweb": "2.2.0", + "@sentry-internal/rrweb-snapshot": "2.2.0", "jsdom-worker": "^0.2.1" }, "dependencies": { diff --git a/rollup/bundleHelpers.js b/rollup/bundleHelpers.js index 537cd9321360..d001a3b30ecc 100644 --- a/rollup/bundleHelpers.js +++ b/rollup/bundleHelpers.js @@ -36,7 +36,6 @@ export function makeBaseBundleConfig(options) { const licensePlugin = makeLicensePlugin(licenseTitle); const tsPlugin = makeTSPlugin('es5'); const rrwebBuildPlugin = makeRrwebBuildPlugin({ - excludeCanvas: true, excludeIframe: false, excludeShadowDom: false, }); diff --git a/rollup/npmHelpers.js b/rollup/npmHelpers.js index 1b99d7911a55..b0056cd80bb3 100644 --- a/rollup/npmHelpers.js +++ b/rollup/npmHelpers.js @@ -36,7 +36,6 @@ export function makeBaseNPMConfig(options = {}) { const extractPolyfillsPlugin = makeExtractPolyfillsPlugin(); const setSdkSourcePlugin = makeSetSDKSourcePlugin('npm'); const rrwebBuildPlugin = makeRrwebBuildPlugin({ - excludeCanvas: undefined, excludeShadowDom: undefined, excludeIframe: undefined, }); diff --git a/rollup/plugins/npmPlugins.js b/rollup/plugins/npmPlugins.js index c16d8fd907a3..76564cfe7e6d 100644 --- a/rollup/plugins/npmPlugins.js +++ b/rollup/plugins/npmPlugins.js @@ -111,15 +111,11 @@ export function makeDebugBuildStatementReplacePlugin() { * b) can easily be modified by our users' bundlers to evaluate to false, facilitating the treeshaking of logger code. * * When `undefined` is passed, - * end users can define e.g. `__SENTRY_EXCLUDE_CANVAS__` in their bundler to shake out canvas specific rrweb code. + * end users can define e.g. `__RRWEB_EXCLUDE_SHADOW_DOM__` in their bundler to shake out shadow dom specific rrweb code. */ -export function makeRrwebBuildPlugin({ excludeCanvas, excludeShadowDom, excludeIframe } = {}) { +export function makeRrwebBuildPlugin({ excludeShadowDom, excludeIframe } = {}) { const values = {}; - if (typeof excludeCanvas === 'boolean') { - values['__RRWEB_EXCLUDE_CANVAS__'] = excludeCanvas; - } - if (typeof excludeShadowDom === 'boolean') { values['__RRWEB_EXCLUDE_SHADOW_DOM__'] = excludeShadowDom; } diff --git a/yarn.lock b/yarn.lock index 3a7ec82d944a..155cad8a1efb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4925,33 +4925,33 @@ semver "7.3.2" semver-intersect "1.4.0" -"@sentry-internal/rrdom@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrdom/-/rrdom-2.1.0.tgz#3e8822cd8f748de5c5a3c58121fac1eebbb767d5" - integrity sha512-99paancC1dkU9O1oUP9zAxfXupX+ha9Cglf9oINUsY/Ey8a6fOhFf5Z3wTzDne28OZ0KeivhBHc8yxeGzdCfGw== +"@sentry-internal/rrdom@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrdom/-/rrdom-2.2.0.tgz#edc292e55263e1e2541a9ed282ff998aae272a0a" + integrity sha512-pX2YxpZfKxfbeEKG+sc0WzlSMUsG9mgwK3IioeVulNovUmus6UhLLQHYeZEsQg0WehClCgBRZakk8qEFXbmwdg== dependencies: - "@sentry-internal/rrweb-snapshot" "2.1.0" + "@sentry-internal/rrweb-snapshot" "2.2.0" -"@sentry-internal/rrweb-snapshot@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-2.1.0.tgz#7ed2d51bc8f580496676460bcccf37e1f6da5902" - integrity sha512-nqzSIO25We6XIGDwmZ66zRZ7QHGZApck4gbgFYXA/lcCB/zcY0aPD0DTv85oIVUfEo2RCjLeNoWWKwlrrRWtUQ== +"@sentry-internal/rrweb-snapshot@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-snapshot/-/rrweb-snapshot-2.2.0.tgz#23a231ffd8ef734c2665690e8040a4ffc2faaf9f" + integrity sha512-txHynfjaJHLJvS+Kf9DOJyL7ur/nIBSJsF7OVKoJYJr43uRJzOyJ/SdliIrGz71IpVOCkuBa/ufRRVEVneRDDg== -"@sentry-internal/rrweb-types@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-types/-/rrweb-types-2.1.0.tgz#2888915faec726937db86b4bb9f56e958fdef5e9" - integrity sha512-h9pCw59SJYormxY/R2O/olcynp6xAMzhzZ6lnQy6ezzDfsjjf4G83oqXnAhs6hmqBmDn1QbdODFewMHK6uVxYw== +"@sentry-internal/rrweb-types@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb-types/-/rrweb-types-2.2.0.tgz#79a76a8d5c436cf18cdee604ab95a9e3049d1949" + integrity sha512-0x7gL9cEF/rrdx1feIORD8+pHihJVA2t1wMRnT+PyiEJZToNJO08Mpbe2rlWgovfK3kGDj5GVFVXsPKGTj8c3A== dependencies: - "@sentry-internal/rrweb-snapshot" "2.1.0" + "@sentry-internal/rrweb-snapshot" "2.2.0" -"@sentry-internal/rrweb@2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-2.1.0.tgz#cc8166e9be4cdd2869d81bd65b4ba818063a491f" - integrity sha512-CXBZjl+TtRfPYjLtj5SX/ipqBtZLw5Z3MRIppODi/H7l7oQekOadUHu0+23lm82fl3CXK4jn9gMWcRRulUkn4Q== +"@sentry-internal/rrweb@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@sentry-internal/rrweb/-/rrweb-2.2.0.tgz#f9b538f16718b88f6ca99b3393c5fbebc274bc06" + integrity sha512-gcdC9uuw6b5WZp1wsqC8p8yBN8bmiZN7X7UaxMrhBwH9TifbYxK1gNbgeKOI/GzZF9OVbduXYm3UDt9ZS1njGg== dependencies: - "@sentry-internal/rrdom" "2.1.0" - "@sentry-internal/rrweb-snapshot" "2.1.0" - "@sentry-internal/rrweb-types" "2.1.0" + "@sentry-internal/rrdom" "2.2.0" + "@sentry-internal/rrweb-snapshot" "2.2.0" + "@sentry-internal/rrweb-types" "2.2.0" "@types/css-font-loading-module" "0.0.7" "@xstate/fsm" "^1.4.0" base64-arraybuffer "^1.0.1" From 24b27915a668081395db80b7133baffad16b723c Mon Sep 17 00:00:00 2001 From: Jasmin <77064737+jas-kas@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:02:53 -0400 Subject: [PATCH 02/27] Add alerting instructions to readme.md Temp until product docs + dedicated Feedback Alerts UI --- packages/feedback/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index ef7754701af5..c628f6ef4186 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -202,3 +202,19 @@ document.getElementById('my-feedback-form').addEventListener('submit', (event) = }); ``` + +## Alerting on User Feedback Reports + +Note: The following instructions are to be followed in the Sentry product. + +If you have Sentry's default issue alert ("Alert me on every new issue") turned on for the project you are setting up User Feedback on, no action is required to have alerting on each user feedback report. + +If you don't have Sentry's default issue alert turned on, follow these steps: + +1. Click "Alerts" in the left-nav menu +2. Click the "Create Alert" button +3. Select the "Issues" radio button under "Errors" +4. In "Set Conditions", set "Issue's Category" = Feedback. +5. Add any other alert rules + +![Screenshot 2023-11-01 at 9 59 54 AM](https://github.com/getsentry/sentry-javascript/assets/77064737/c7cebeae-1c6d-4a3d-8afb-734b4f447229) From 4e0caa20daddd907030a353ffa917f3ca67147f2 Mon Sep 17 00:00:00 2001 From: Jasmin <77064737+jas-kas@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:19:50 -0400 Subject: [PATCH 03/27] Update packages/feedback/README.md Co-authored-by: Billy Vong --- packages/feedback/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index c628f6ef4186..bfb374771158 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -217,4 +217,4 @@ If you don't have Sentry's default issue alert turned on, follow these steps: 4. In "Set Conditions", set "Issue's Category" = Feedback. 5. Add any other alert rules -![Screenshot 2023-11-01 at 9 59 54 AM](https://github.com/getsentry/sentry-javascript/assets/77064737/c7cebeae-1c6d-4a3d-8afb-734b4f447229) +![Feedback Alert Rule Creation Screenshot](https://github.com/getsentry/sentry-javascript/assets/79684/1d941967-debb-4ad6-9458-3226c02ec08e) From 081285da39567615f3184edc184c629e966700eb Mon Sep 17 00:00:00 2001 From: Jasmin <77064737+jas-kas@users.noreply.github.com> Date: Wed, 1 Nov 2023 10:19:58 -0400 Subject: [PATCH 04/27] Update packages/feedback/README.md Co-authored-by: Billy Vong --- packages/feedback/README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index bfb374771158..d81275cdb67c 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -211,10 +211,8 @@ If you have Sentry's default issue alert ("Alert me on every new issue") turned If you don't have Sentry's default issue alert turned on, follow these steps: -1. Click "Alerts" in the left-nav menu -2. Click the "Create Alert" button -3. Select the "Issues" radio button under "Errors" -4. In "Set Conditions", set "Issue's Category" = Feedback. -5. Add any other alert rules +1. Navigate to [Create New Alert Rule](https://sentry.io/alerts/new/issue/) in Sentry (Click "Alerts" in the left-nav menu, "Create Alert" in the top right corner, ensure the "Issues" radio button is selected under the "Errors" category, and then click "Set Conditions") +2. In "Set conditions", add an "IF" filter for `The issue's category is equal to "Feedback"` +3. Add any other alert rules ![Feedback Alert Rule Creation Screenshot](https://github.com/getsentry/sentry-javascript/assets/79684/1d941967-debb-4ad6-9458-3226c02ec08e) From 6dc1952a5714e8d53b90594707dafc406cfc8278 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:54:21 +0000 Subject: [PATCH 05/27] ci(deps): bump actions/setup-node from 3 to 4 Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3 to 4. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- .github/workflows/build.yml | 40 +++++++++++------------ .github/workflows/canary.yml | 6 ++-- .github/workflows/flaky-test-detector.yml | 2 +- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 4b3125c09eb1..bd66cf6d24b9 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -168,7 +168,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' # we use a hash of yarn.lock as our cache key, because if it hasn't changed, our dependencies haven't changed, @@ -216,7 +216,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Check dependency cache @@ -274,7 +274,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: # The size limit action runs `yarn` and `yarn build` when this job is executed on # use Node 14 for now. @@ -306,7 +306,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -329,7 +329,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -351,7 +351,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -382,7 +382,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -409,7 +409,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Set up Bun @@ -438,7 +438,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Set up Deno @@ -472,7 +472,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} - name: Restore caches @@ -504,7 +504,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} - name: Restore caches @@ -569,7 +569,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -626,7 +626,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -679,7 +679,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -705,7 +705,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -745,7 +745,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} - name: Restore caches @@ -781,7 +781,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node }} - name: Restore caches @@ -810,7 +810,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches @@ -900,7 +900,7 @@ jobs: with: version: 8.3.1 - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'packages/e2e-tests/package.json' - name: Restore caches @@ -983,7 +983,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Restore caches diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml index 04adce087fd4..ed05e9bfd1af 100644 --- a/.github/workflows/canary.yml +++ b/.github/workflows/canary.yml @@ -27,7 +27,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Check canary cache @@ -89,7 +89,7 @@ jobs: with: version: 8.3.1 - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' @@ -152,7 +152,7 @@ jobs: with: ref: ${{ env.HEAD_COMMIT }} - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' - name: Install dependencies diff --git a/.github/workflows/flaky-test-detector.yml b/.github/workflows/flaky-test-detector.yml index 4f3c92da09ba..9d067eafdbf9 100644 --- a/.github/workflows/flaky-test-detector.yml +++ b/.github/workflows/flaky-test-detector.yml @@ -32,7 +32,7 @@ jobs: - name: Check out current branch uses: actions/checkout@v4 - name: Set up Node - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: 'package.json' cache: 'yarn' From 4babd02f0d38408880864dfc6d3fb858dba5c04f Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Wed, 1 Nov 2023 15:03:05 -0230 Subject: [PATCH 06/27] docs(feedback): Add more themeables + improve/fix inconsistencies (#9429) * Adds themeable options for submit/cancel/input * Make css vars + theme vars consistent * Fix incorrect defaults --- packages/feedback/README.md | 57 +++++++++++++++++++++++-------------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/feedback/README.md b/packages/feedback/README.md index d81275cdb67c..56be5e23ee7c 100644 --- a/packages/feedback/README.md +++ b/packages/feedback/README.md @@ -87,23 +87,26 @@ Most text that you see in the default Feedback widget can be customized. | key | default | description | | --------- | ------- | ----------- | -| `buttonLabel` | `"Feedback"` | The label of the widget button. | -| `submitButtonLabel` | `"Send Feedback"` | The label of the submit button used in the feedback form dialog. | -| `cancelButtonLabel` | `"Cancel"` | The label of the cancel button used in the feedback form dialog. | -| `formTitle` | `"Send Feedback"` | The title at the top of the feedback form dialog. | -| `nameLabel` | `"Full Name"` | The label of the name input field. | -| `namePlaceholder` | `"Full Name"` | The placeholder for the name input field. | -| `emailLabel` | `"Email"` | The label of the email input field. || -| `emailPlaceholder` | `"Email"` | The placeholder for the email input field. | -| `messageLabel` | `"Description"` | The label for the feedback description input field. | -| `messagePlaceholder` | `"What's the issue? What did you expect?"` | The placeholder for the feedback description input field. | -| `successMessageText` | `"Thank you for your report!"` | The message to be displayed after a succesful feedback submission. | +| `buttonLabel` | `Report a Bug` | The label of the widget button. | +| `submitButtonLabel` | `Send Bug Report` | The label of the submit button used in the feedback form dialog. | +| `cancelButtonLabel` | `Cancel` | The label of the cancel button used in the feedback form dialog. | +| `formTitle` | `Report a Bug` | The title at the top of the feedback form dialog. | +| `nameLabel` | `Name` | The label of the name input field. | +| `namePlaceholder` | `Your Name` | The placeholder for the name input field. | +| `emailLabel` | `Email` | The label of the email input field. || +| `emailPlaceholder` | `your.email@example.org` | The placeholder for the email input field. | +| `messageLabel` | `Description` | The label for the feedback description input field. | +| `messagePlaceholder` | `What's the bug? What did you expect?` | The placeholder for the feedback description input field. | +| `successMessageText` | `Thank you for your report!` | The message to be displayed after a succesful feedback submission. | + + +Example of customization ```javascript new Feedback({ - buttonLabel: 'Bug Report', - submitButtonLabel: 'Send Report', - formTitle: 'Send Bug Report', + buttonLabel: 'Feedback', + submitButtonLabel: 'Send Feedback', + formTitle: 'Send Feedback', }); ``` @@ -112,13 +115,25 @@ Colors can be customized via the Feedback constructor or by defining CSS variabl | key | css variable | light | dark | description | | --- | --- | --- | --- | --- | -| `background` | `--bg-color` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog. | -| `backgroundHover` | `--bg-hover-color` | `#f6f6f7` | `#352f3b` | The background color of widget actor when in a hover state | -| `foreground` | `--fg-color` | `#2b2233` | `#ebe6ef` | The foreground color, e.g. text color | -| `error` | `--error-color` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | -| `success` | `--success-color` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | +| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget actor and dialog | +| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of widget actor when in a hover state | +| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | +| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | +| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | | `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget actor and dialog | | `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget actor and dialog | +| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | +| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | +| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | +| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | +| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | +| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | +| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | +| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | +| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | +| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | +| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| `inputBorderFocus` | `--input-border-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border styles for form inputs when focused | Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration. ```javascript @@ -133,7 +148,7 @@ Or the same example above but using the CSS variables method: ```css #sentry-feedback { - --bg-color: #cccccc; + --background: #cccccc; } ``` @@ -188,7 +203,7 @@ feedback.attachTo(document.querySelector('#your-button'), { You can also bring your own widget and UI and simply pass a feedback object to the `sendFeedback()` function. ```html -