8000 ref: Update apm package · rchl/sentry-javascript@d03b406 · GitHub
[go: up one dir, main page]
Skip to content

Commit d03b406

Browse files
HazATHazAT
committed
ref: Update apm package
1 parent 5becce1 commit d03b406

File tree

1 file changed

+133
-17
lines changed

1 file changed

+133
-17
lines changed

‎packages/apm/README.md

Lines changed: 133 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,140 @@
1-
<p align="center">
2-
<a href="https://sentry.io" target="_blank" align="center">
3-
<img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" width="280">
4-
</a>
5-
<br />
6-
</p>
1+
# Deprecated
72

8-
# Sentry APM Extensions
3+
The tracing integration for JavaScript SDKs has moved from
4+
[`@sentry/apm`](https://www.npmjs.com/package/@sentry/apm) to
5+
[`@sentry/tracing`](https://www.npmjs.com/package/@sentry/tracing). While the
6+
two packages are similar, some imports and APIs have changed slightly.
97

10-
[![npm version](https://img.shields.io/npm/v/@sentry/apm.svg)](https://www.npmjs.com/package/@sentry/apm)
11-
[![npm dm](https://img.shields.io/npm/dm/@sentry/apm.svg)](https://www.npmjs.com/package/@sentry/apm)
12-
[![npm dt](https://img.shields.io/npm/dt/@sentry/apm.svg)](https://www.npmjs.com/package/@sentry/apm)
13-
[![typedoc](https://img.shields.io/badge/docs-typedoc-blue.svg)](http://getsentry.github.io/sentry-javascript/)
8+
The old package `@sentry/apm` is deprecated in favor of `@sentry/tracing`.
9+
Future support for `@sentry/apm` is limited to bug fixes only.
1410

15-
## Links
11+
## Migrating from @sentry/apm to @sentry/tracing
1612

17-
- [Official SDK Docs](https://docs.sentry.io/quickstart/)
18-
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
13+
### Browser (CDN bundle)
1914

20-
## General
15+
If you were using the Browser CDN bundle, switch from the old
16+
`bundle.apm.min.js` to the new tracing bundle:
2117

22-
This package is deprecated and will be removed in the next major release. We recommend switching to using the `@sentry/tracing` package for the time being.
18+
```html
19+
<script
20+
src="https://browser.sentry-cdn.com/xxx/bundle.tracing.min.js"
21+
integrity="sha384-sha"
22+
crossorigin="anonymous"
23+
></script>
24+
```
2325

24-
This package contains extensions to the `@sentry/hub` to enable APM related functionality. It also provides integrations for Browser and Node that provide a good experience out of the box.
26+
And then update `Sentry.init`:
27+
28+
```diff
29+
Sentry.init({
30+
- integrations: [new Sentry.Integrations.Tracing()]
31+
+ integrations: [new Sentry.Integrations.BrowserTracing()]
32+
});
33+
```
34+
35+
### Browser (npm package)
36+
37+
If you were using automatic instrumentation, update the import statement and
38+
update `Sentry.init` to use the new `BrowserTracing` integration:
39+
40+
```diff
41+
import * as Sentry from "@sentry/browser";
42+
-import { Integrations } from "@sentry/apm";
43+
+import { Integrations } from "@sentry/tracing";
44+
45+
Sentry.init({
46+
integrations: [
47+
- new Integrations.Tracing(),
48+
+ new Integrations.BrowserTracing(),
49+
]
50+
});
51+
```
52+
53+
If you were using the `beforeNavigate` option from the `Tracing` integration,
54+
the API in `BrowserTracing` has changed slightly. Instead of passing in a
55+
location and returning a string representing transaction name, `beforeNavigate`
56+
now accepts a transaction context and is expected to return a transaction
57+
context. You can now add extra tags or change the `op` based on different
58+
parameters. If you want to access the location like before, you can get it from
59+
`window.location`.
60+
61+
For example, if you had a function like so that computed a custom transaction
62+
name:
63+
64+
```javascript
65+
import * as Sentry from "@sentry/browser";
66+
import { Integrations } from "@sentry/apm";
67+
68+
Sentry.init({
69+
integrations: [
70+
new Integrations.Tracing({
71+
beforeNavigate: location => {
72+
return getTransactionName(location);
73+
},
74+
}),
75+
],
76+
});
77+
```
78+
79+
You would now leverage the context to do the same thing:
80+
81+
```javascript
82+
import * as Sentry from "@sentry/browser";
83+
import { Integrations } from "@sentry/tracing";
84+
85+
Sentry.init({
86+
integrations: [
87+
new Integrations.BrowserTracing({
88+
beforeNavigate: context => {
89+
return {
90+
...context,
91+
// Can even look at context tags or other data to adjust
92+
// transaction name
93+
name: getTransactionName(window.location),
94+
};
95+
},
96+
}),
97+
],
98+
});
99+
```
100+
101+
For the full diff:
102+
103+
```diff
104+
import * as Sentry from "@sentry/browser";
105+
-import { Integrations } from "@sentry/apm";
106+
+import { Integrations } from "@sentry/tracing";
107+
108+
Sentry.init({
109+
integrations: [
110+
- new Integrations.Tracing({
111+
- beforeNavigate: (location) => {
112+
- return getTransactionName(location)
113+
+ new Integrations.BrowserTracing({
114+
+ beforeNavigate: (ctx) => {
115+
+ return {
116+
+ ...ctx,
117+
+ name: getTransactionName(ctx.name, window.location)
118+
+ }
119+
}
120+
}),
121+
]
122+
});
123+
```
124+
125+
### Node
126+
127+
If you were using the Express integration for automatic instrumentation, the
128+
only necessary change is to update the import statement:
129+
130+
```diff
131+
import * as Sentry from "@sentry/node";
132+
-import { Integrations } from "@sentry/apm";
133+
+import { Integrations } from "@sentry/tracing";
134+
135+
Sentry.init({
136+
integrations: [
137+
new Integrations.Express(),
138+
]
139+
});
140+
```

0 commit comments

Comments
 (0)
0