|
| 1 | +# End of Feedback Beta |
| 2 | + |
| 3 | +Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply. |
| 4 | + |
| 5 | +Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since |
| 6 | +been fixed/improved, as well as API's which have been streamlined and chanaged. |
| 7 | + |
| 8 | +Below you can find a list of relevant feedback changes and issues that have been made from v7.x to v8.0.0-beta.2 |
| 9 | + |
| 10 | +## Upgrading Feedback from 7.x to 8.0.0-beta.2 |
| 11 | + |
| 12 | +We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that |
| 13 | +existed in v7.x and a description of how they have changed in v8. |
| 14 | + |
| 15 | +| Method Name | Replacement | Notes | |
| 16 | +| ------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 17 | +| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new form will be inserted into the DOM and a Promise<FeedbackDialog> returned allowed you control over the lifecycle of the widget. | |
| 18 | +| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method in will create an onClick event listener to your html element that calls appendToDom() and open(). It returns a callback to remove the event listener. | |
| 19 | +| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. | |
| 20 | +| `feedback.closeDialog()` | `widget.close()` | Make the form inside the widget hidden in the page. Success/Error messages will still be rendered and will hide themselves if the form was recently submitted. | |
| 21 | +| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. | |
| 22 | + |
| 23 | +### API Examples |
| 24 | + |
| 25 | +#### Auto injecting Feedback |
| 26 | + |
| 27 | +The easiest way to get setup is to auto-inject the feedback widget. This will create a floating button which opens the |
| 28 | +feedback form. |
| 29 | + |
| 30 | +In your SDK setup: |
| 31 | + |
| 32 | +```javascript |
| 33 | +Sentry.init({ |
| 34 | + integrations: [ |
| 35 | + feedbackIntegration({ |
| 36 | + autoInject: true, |
| 37 | + }), |
| 38 | + ], |
| 39 | +}); |
| 40 | +``` |
| 41 | + |
| 42 | +`autoInject: true,` is the default value. |
| 43 | + |
| 44 | +#### Attaching feedback to your own button |
| 45 | + |
| 46 | +If you don't want to have a floating button to trigger the feedback form, you can attach the form to your own DOM |
| 47 | +element instead. |
| 48 | + |
| 49 | +First, get a reference to the feedback integration instance: |
| 50 | + |
| 51 | +```javascript |
| 52 | +// Option 1: Keep a reference when you setup the sdk: |
| 53 | +const feedbackInstance = feedbackIntegration(); |
| 54 | +Sentry.init({ |
| 55 | + integrations: [feedbackInstance], |
| 56 | +}); |
| 57 | + |
| 58 | +// Option 2: Get a reference from the SDK client |
| 59 | +const feedbackInstance = getClient()?.getIntegrationByName('Feedback'); |
| 60 | +``` |
| 61 | +
|
| 62 | +Next, call `attachTo()` |
| 63 | +
|
| 64 | +```javascript |
| 65 | +const myButton = document.getElementById('my-button'); |
| 66 | +const unsubscribe = feedbackInstance.attachTo(myButton); |
| 67 | +``` |
| 68 | +
|
| 69 | +This will insert the form into the DOM and show/hide it when the button is clicked. |
| 70 | +
|
| 71 | +Later, if `my-button` is removed from the page be sure to call `unsubscribe()` or `feedbackInstance.remove()` to cleanup |
| 72 | +the event listeners. |
| 73 | +
|
| 74 | +#### Manually managing show/hide state and adding/remove the form from the DOM. |
| 75 | +
|
| 76 | +You can manually add/remove the form from the page, and control when it's shown/hidden by calling the lifecycle methods |
| 77 | +directly. |
| 78 | +
|
| 79 | +For example, `attachTo()` is a convenience wrapper over the lifecycle methods. You could re-implement it like this: |
| 80 | +
|
| 81 | +```javascript |
| 82 | +function attachTo(button: HTMLElement) { |
| 83 | + const handleClick = async () => { |
| 84 | + const widget = await feedbackInstance.getWidget({ |
| 85 | + onFormClose: () => { |
| 86 | + widget.close(); |
| 87 | + }, |
| 88 | + onFormSubmited: () => { |
| 89 | + widget.removeFromDom(); |
| 90 | + } |
| 91 | + }); |
| 92 | + widget.appendToDom(); |
| 93 | + widget.open(); |
| 94 | + }; |
| 95 | + |
| 96 | + button.addEventListener('click', handleClick); |
| 97 | + return () => { |
| 98 | + button.removeEventListener('click', handleClick) |
| 99 | + } |
| 100 | +} |
| 101 | +``` |
| 102 | +
|
| 103 | +## Config changes in v8 |
| 104 | +
|
| 105 | +Added new configuration values |
| 106 | +
|
| 107 | +| Field Name | Type | Description | |
| 108 | +| --------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 109 | +| showScreenshot | boolean | Default: false. Enable this option to allow a user to choose to include a screenshot of the webpage with their feedback submission. The user option is not supported on mobile browsers and will have no effect there. | |
| 110 | +| onFormSubmitted | () => void | Callback whenever the feedback form is submitted, but before success/failure is returned. | |
0 commit comments