Skip to content

Commit 19648c5

Browse files
authored
Merge pull request #12002 from getsentry/prepare-release/8.0.0
Add Changelog entry for 8.0.0
2 parents e5b295e + 2e08b05 commit 19648c5

File tree

27 files changed

+637
-477
lines changed

27 files changed

+637
-477
lines changed

CHANGELOG.md

+115-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,120 @@
44

55
- "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
66

7+
## 8.0.0
8+
9+
The Sentry JS SDK team is proud to announce the release of version `8.0.0` of Sentry's JavaScript SDKs - it's been a
10+
long time coming! Thanks to everyone for your patience and a special shout out to the brave souls testing preview builds
11+
and reporting issues - we appreciate your support!
12+
13+
---
14+
15+
### How to Upgrade to Version 8:
16+
17+
We recommend reading the
18+
[migration guide docs](https://docs.sentry.io/platforms/javascript/migration/v7-to-v8/#migration-codemod) to find out
19+
how to address any breaking changes in your code for your specific platform or framework.
20+
21+
To automate upgrading to v8 as much as possible, use our migration codemod `@sentry/migr8`:
22+
23+
```sh
24+
npx @sentry/migr8@latest
25+
```
26+
27+
All deprecations from the v7 cycle, with the exception of `getCurrentHub()`, have been removed and can no longer be used
28+
in v8. If you have an advanced Sentry SDK setup, we additionally recommend reading the
29+
[in-depth migration guide](./MIGRATION.md) in our repo which highlights all changes with additional details and
30+
information.
31+
32+
The rest of this changelog highlights the most important (breaking) changes and links to more detailed information.
33+
34+
### Version Support
35+
36+
With v8, we dropped support for several old runtimes and browsers
37+
38+
**Node SDKs:** The Sentry JavaScript SDK v8 now supports **Node.js 14.8.0 or higher**. This applies to `@sentry/node`
39+
and all of our node-based server-side sdks (`@sentry/nextjs`, `@sentry/remix`, etc.). Furthermore, version 8 now ships
40+
with full support for ESM-based node apps using **Node.js 18.19.0 or higher**.
41+
42+
**Browser SDKs:** The browser SDKs now require
43+
[**ES2018+**](https://caniuse.com/?feats=mdn-javascript_builtins_regexp_dotall,js-regexp-lookbehind,mdn-javascript_builtins_regexp_named_capture_groups,mdn-javascript_builtins_regexp_property_escapes,mdn-javascript_builtins_symbol_asynciterator,mdn-javascript_functions_method_definitions_async_generator_methods,mdn-javascript_grammar_template_literals_template_literal_revision,mdn-javascript_operators_destructuring_rest_in_objects,mdn-javascript_operators_destructuring_rest_in_arrays,promise-finally)
44+
compatible browsers. New minimum browser versions:
45+
46+
- Chrome 63
47+
- Edge 79
48+
- Safari/iOS Safari 12
49+
- Firefox 58
50+
- Opera 50
51+
- Samsung Internet 8.2
52+
53+
For more details, please see the
54+
[version support section in our migration guide](./MIGRATION.md#1-version-support-changes).
55+
56+
### Initializing Server-side SDKs (Node, Bun, Deno, Serverless):
57+
58+
In v8, we support a lot more node-based packages than before. In order to ensure auto-instrumentation works, the SDK now
59+
needs to be imported and initialized before any other import in your code.
60+
61+
We recommend creating a new file (e.g. `instrumentation.js`) to import and initialize the SDK. Then, import the file on
62+
top of your entry file or detailed instructions, check our updated SDK setup docs
63+
[initializing the SDK in v8](https://docs.sentry.io/platforms/javascript/guides/node/).
64+
65+
### Performance Monitoring Changes
66+
67+
The API around performance monitoring and tracing has been streamlined, and we've added support for more integrations
68+
out of the box.
69+
70+
- [Performance Monitoring API](./MIGRATION.md#performance-monitoring-api)
71+
- [Performance Monitoring Integrations](./MIGRATION.md#performance-monitoring-integrations)
72+
73+
### Functional Integrations
74+
75+
Integrations are now simple functions instead of classes. Class-based integrations
76+
[have been removed](./MIGRATION.md#removal-of-class-based-integrations):
77+
78+
```javascript
79+
// old (v7)
80+
Sentry.init({
81+
integrations: [new Sentry.BrowserTracing()],
82+
});
83+
84+
// new (v8)
85+
Sentry.init({
86+
integrations: [Sentry.browserTracingIntegration()],
87+
});
88+
```
89+
90+
### Package removal
91+
92+
The following packages have been removed or replaced and will no longer be published:
93+
94+
- [`@sentry/hub`](./MIGRATION.md#sentryhub)
95+
- [`@sentry/tracing`](./MIGRATION.md#sentrytracing)
96+
- [`@sentry/integrations`](./MIGRATION.md#sentryintegrations)
97+
- [`@sentry/serverless`](./MIGRATION.md#sentryserverless)
98+
- [`@sentry/replay`](./MIGRATION.md#sentryreplay)
99+
100+
### Changes since `8.0.0-rc.3`
101+
102+
- **feat(nextjs): Remove `transpileClientSDK` (#11978)**
103+
104+
As we are dropping support for Internet Explorer 11 and other other older browser versions wih version `8.0.0`, we are
105+
also removing the `transpileClientSDK` option from the Next.js SDK. If you need to support these browser versions,
106+
please configure Webpack and Next.js to down-compile the SDK.
107+
108+
- **feat(serverless): Do not include performance integrations by default (#11998)**
109+
110+
To keep Lambda bundle size reasonable, the SDK no longer ships with all performance (database) integrations by
111+
default. Add the Sentry integrations of the databases and other tools you're using manually to your `Sentry.init` call
112+
by following
113+
[this guide](https://docs.sentry.io/platforms/javascript/configuration/integrations/#modifying-default-integrations).
114+
Note that this change does not apply if you use the SDK with the Sentry AWS Lambda layer.
115+
116+
- feat(feedback): Simplify public css configuration for feedback (#11985)
117+
- fix(feedback): Check for empty user (#11993)
118+
- fix(replay): Fix type for `replayCanvasIntegration` (#11995)
119+
- fix(replay): Fix user activity not being updated in `start()` (#12001)
120+
7121
## 8.0.0-rc.3
8122

9123
### Important Changes
@@ -304,7 +418,7 @@ The following packages will no longer be published
304418

305419
### Initializing Server-side SDKs (Node, Bun, Next.js, SvelteKit, Astro, Remix):
306420

307-
Initializing the SDKs on the server-side has been simplified. See more details in our migration docs about
421+
Initializing the SDKs on the server-side has been simplified. More details in our migration docs about
308422
[initializing the SDK in v8](./MIGRATION.md/#initializing-the-node-sdk).
309423

310424
### Performance Monitoring Changes

MIGRATION.md

+16-3
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ stable release of `8.x` comes out).
2020

2121
## 1. Version Support changes:
2222

23-
**Node.js**: We now official support Node 14.18+ for our CJS package, and Node 18.8+ for our ESM package. This applies
24-
to `@sentry/node` and all of our node-based server-side sdks (`@sentry/nextjs`, `@sentry/serverless`, etc.). We no
25-
longer test against Node 8, 10, or 12 and cannot guarantee that the SDK will work as expected on these versions.
23+
**Node.js**: We now officially support Node 14.18+ for our CJS package, and Node 18.19.1+ for our ESM package. This
24+
applies to `@sentry/node` and all of our node-based server-side sdks (`@sentry/nextjs`, `@sentry/serverless`, etc.). We
25+
no longer test against Node 8, 10, or 12 and cannot guarantee that the SDK will work as expected on these versions.
2626

2727
**Browser**: Our browser SDKs (`@sentry/browser`, `@sentry/react`, `@sentry/vue`, etc.) now require ES2018+ compatible
2828
browsers. This means that we no longer support IE11 (end of an era). This also means that the Browser SDK requires the
@@ -866,6 +866,12 @@ in order to inject the `sentry.(server|edge).config.ts` files into the server-si
866866
possible in the future, we are doing ourselves a favor and doing things the way Next.js intends us to do them -
867867
hopefully reducing bugs and jank.
868868

869+
#### Removal of `transpileClientSDK`
870+
871+
Since we are dropping support for Internet Explorer 11 and other other older browser versions, we are also removing the
872+
`transpileClientSDK` option from the Next.js SDK. If you need to support these browser versions, please configure
873+
Webpack and Next.js to down-compile the SDK.
874+
869875
### Astro SDK
870876

871877
- [Removal of `trackHeaders` option for Astro middleware](./MIGRATION.md#removal-of-trackheaders-option-for-astro-middleware)
@@ -1283,6 +1289,13 @@ export class HeaderComponent {
12831289
}
12841290
```
12851291

1292+
# Upgrading Sentry Feedback (beta, 7.x to 8.0)
1293+
1294+
For details on upgrading Feedback from the beta 7.x to the release 8.x version, please view the
1295+
[dedicated Feedback MIGRATION docs](./docs/migration/feedback.md).
1296+
1297+
---
1298+
12861299
# Deprecations in 7.x
12871300

12881301
You can use the **Experimental** [@sentry/migr8](https://www.npmjs.com/package/@sentry/migr8) to automatically update

dev-packages/e2e-tests/test-applications/node-exports-test-app/scripts/consistentExports.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const NODE_EXPORTS_IGNORE = [
1616
'__esModule',
1717
// Only required from the Node package
1818
'setNodeAsyncContextStrategy',
19+
'getDefaultIntegrationsWithoutPerformance',
1920
];
2021

2122
const nodeExports = Object.keys(SentryNode).filter(e => !NODE_EXPORTS_IGNORE.includes(e));

docs/migration/feedback.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# End of Feedback Beta
2+
3+
With the release of 8.0.0, Sentry Feedback is now out of Beta. This means that the usual stabilty guarantees apply.
4+
5+
Feedback 8.0.0 requires server version 24.4.2 and above.
6+
7+
Because of experimentation and rapid iteration, during the Beta period some bugs and problems came up which have since
8+
been fixed/improved, as well as API's which have been streamlined and changed.
9+
10+
Below you can find a list of relevant feedback changes and issues that have been made from 7.x to 8.0.0.
11+
12+
## Upgrading Feedback from 7.x to 8.0.0
13+
14+
We have streamlined the interface for interacting with the Feedback widget. Below is a list of public functions that
15+
existed in 7.x and a description of how they have changed in v8.
16+
17+
| Method Name | Replacement | Notes |
18+
| ------------------------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19+
| `Sentry.getClient<BrowserClient>()?.getIntegration(Feedback)` | `const feedback = Sentry.getFeedback()` | Get a type-safe reference to the configured feedbackIntegration instance. |
20+
| `feedback.getWidget()` | `const widget = feedback.createWidget(); widget.appendToDom()` | The SDK no longer maintains a stack of form instances. If you call `createWidget()` a new widget will be inserted into the DOM and an `ActorComponent` returned allows you control over the lifecycle of the widget. |
21+
| `feedback.openDialog()` | `widget.open()` | Make the form inside the widget visible. |
22+
| `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. |
23+
| `feedback.removeWidget()` | `widget.removeFromDom()` | Remove the form and widget instance from the page. After calling this `widget.el.parentNode` will be set to null. |
24+
| `feedback.attachTo()` | `const unsubscribe = feedback.attachTo(myButtonElem)` | The `attachTo()` method will create an onClick event listener to your html element that calls `appendToDom()` and `open()`. It returns a callback to remove the event listener. |
25+
| - | `const form = await feedback.createForm()` | A new method `createForm()`, used internally by `createWidget()` and `attachTo()`, returns a `Promise<FeedbackDialog>` so you can control showing and hiding of the feedback form directly. |
26+
27+
### API Examples
28+
29+
#### Auto injecting Feedback
30+
31+
The easiest way to get setup is to auto-inject the feedback widget. This will create a floating button which opens the
32+
feedback form.
33+
34+
In your SDK setup:
35+
36+
```javascript
37+
Sentry.init({
38+
integrations: [
39+
feedbackIntegration({
40+
autoInject: true,
41+
}),
42+
],
43+
});
44+
```
45+
46+
`autoInject: true` is the default value.
47+
48+
#### Attaching feedback to your own button
49+
50+
If you don't want to have a floating button to trigger the feedback form, you can attach the form to your own DOM
51+
element instead.
52+
53+
First, get a reference to the feedback integration instance:
54+
55+
```javascript
56+
// Option 1: Keep a reference when you setup the sdk:
57+
const feedbackInstance = feedbackIntegration();
58+
Sentry.init({
59+
integrations: [feedbackInstance],
60+
});
61+
62+
// Option 2: Get a reference from the SDK client
63+
const feedbackInstance = getFeedback();
64+
```
65+
66+
Next, call `attachTo()`
67+
68+
```javascript
69+
const myButton = document.getElementById('my-button');
70+
const unsubscribe = feedbackInstance.attachTo(myButton);
71+
```
72+
73+
This will insert the form into the DOM and show/hide it when the button is clicked.
74+
75+
Later, if `my-button` is removed from the page be sure to call `unsubscribe()` or `feedbackInstance.remove()` to cleanup
76+
the event listeners.
77+
78+
#### Manually managing show/hide state and adding/remove the form from the DOM.
79+
80+
You can manually add/remove the widget from the page, and control when it's shown/hidden by calling the lifecycle
81+
methods directly.
82+
83+
For example, `attachTo()` is a convenience wrapper over the lifecycle methods. You could re-implement it like this:
84+
85+
```javascript
86+
function attachTo(button: HTMLElement) {
87+
const handleClick = () => {
88+
const widget = feedbackInstance.createWidget({
89+
onFormClose: () => {
90+
widget.close();
91+
},
92+
onFormSubmited: () => {
93+
widget.removeFromDom();
94+
}
95+
});
96+
widget.appendToDom();
97+
widget.open();
98+
};
99+
100+
button.addEventListener('click', handleClick);
101+
return () => {
102+
button.removeEventListener('click', handleClick)
103+
}
104+
}
105+
```
106+
107+
Alternatively you can call `createForm()` and control the form directly:
108+
109+
```javascript
110+
const formPromise = feedbackInstance.createForm();
111+
112+
// Automatically insert and open the dialog after 5 seconds
113+
// then close and remove it after another 10 seconds
114+
setTimeout(() => {
115+
const form = await formPromise;
116+
form.appendToDom();
117+
form.open();
118+
119+
setTimeout(() => {
120+
form.close();
121+
form.removeFromDom();
122+
}, 10_000);
123+
}, 5_000);
124+
```
125+
126+
## Config changes in v8
127+
128+
Added new configuration values
129+
130+
| Field Name | Type | Description |
131+
| ------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
132+
| `enableScreenshot` | `boolean` | Default: true. 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. |
133+
| `onFormSubmitted` | `() => void` | Callback whenever the feedback form is submitted, but before success/failure is returned. |
134+
135+
Some new configuration values have been added & changed so you can tweak instructions, or translate labels for your
136+
users.
137+
138+
| Old Name | New Name | Default Value |
139+
| ---------------- | ----------------------- | ------------------------------ |
140+
| `buttonLabel` | `triggerLabel` | `"Report a bug"` |
141+
| `isRequiredText` | `isRequiredLabel` | `"(required)"` |
142+
| - | `addScreenshotLabel` | `"Add a screenshot"` |
143+
| - | `removeScreenshotLabel` | `"Remove Screenshot"` |
144+
| - | `confirmButtonLabel` | `"Confirm"` |
145+
| - | `successMessageText` | `"Thank you for your report!"` |
146+
147+
Some theme/color configuration values have been added & changed to make it easier to style the widget. Refer to the
148+
[Feedback Configuration docs](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#user-feedback-widget)
149+
to see the supported fields and their default values.

docs/v8-initializing.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ In an environment with multiple execution contexts (e.g. Node), you can setup mu
2121
different contexts, like this:
2222

2323
```js
24-
import * as Sentry from '@sentry/browser';
24+
import * as Sentry from '@sentry/node';
2525

2626
// Sets up the _default_ client
2727
Sentry.init({

0 commit comments

Comments
 (0)