\n\n> ⚠️ **Deprecation Notice:** From SDK versions >= `7.47.0` onwards, the `@sentry/tracing` package is officially\n> deprecated. This package will be removed in a future major release. More details can be found in the\n> [migration docs](https://github.com/getsentry/sentry-javascript/blob/7.47.0/MIGRATION.md/#remove-requirement-for-sentrytracing-package-since-7460).\n\n# Sentry Tracing Extensions\n\n[](https://www.npmjs.com/package/@sentry/tracing)\n[](https://www.npmjs.com/package/@sentry/tracing)\n[](https://www.npmjs.com/package/@sentry/tracing)\n\n## Package Discontinued\n\nThis package was discontinued with version 8.0.0 of the Sentry JavaScript SDKs. Instead, exports from this package are\nexported directly from the main SDK packages like `@sentry/react` or `@sentry/node`. For more information have a look at\nthe [Migration Guide](https://github.com/getsentry/sentry-javascript/blob/develop/MIGRATION.md#sentrytracing).\n\n## Links\n\n- [Official SDK Docs](https://docs.sentry.io/quickstart/)\n- [TypeDoc](http://getsentry.github.io/sentry-javascript/)\n\n## General\n\nThis package contains extensions to the `@sentry/hub` to enable Sentry AM related functionality. It also provides\nintegrations for Browser and Node that provide a good experience out of the box.\n\n## Migrating from @sentry/apm to @sentry/tracing\n\nThe tracing integration for JavaScript SDKs has moved from [`@sentry/apm`](https://www.npmjs.com/package/@sentry/apm) to\n[`@sentry/tracing`](https://www.npmjs.com/package/@sentry/tracing). While the two packages are similar, some imports and\nAPIs have changed slightly.\n\nThe old package `@sentry/apm` is deprecated in favor of `@sentry/tracing`. Future support for `@sentry/apm` is limited\nto bug fixes only.\n\n## Migrating from @sentry/apm to @sentry/tracing\n\n### Browser (CDN bundle)\n\nIf you were using the Browser CDN bundle, switch from the old `bundle.apm.min.js` to the new tracing bundle:\n\n```html\n\n```\n\nAnd then update `Sentry.init`:\n\n```diff\n Sentry.init({\n- integrations: [new Sentry.Integrations.Tracing()]\n+ integrations: [new Sentry.Integrations.BrowserTracing()]\n });\n```\n\n### Browser (npm package)\n\nIf you were using automatic instrumentation, update the import statement and update `Sentry.init` to use the new\n`BrowserTracing` integration:\n\n```diff\n import * as Sentry from \"@sentry/browser\";\n-import { Integrations } from \"@sentry/apm\";\n+import { Integrations } from \"@sentry/tracing\";\n\n Sentry.init({\n integrations: [\n- new Integrations.Tracing(),\n+ new Integrations.BrowserTracing(),\n ]\n });\n```\n\nIf you were using the `beforeNavigate` option from the `Tracing` integration, the API in `BrowserTracing` has changed\nslightly. Instead of passing in a location and returning a string representing transaction name, `beforeNavigate` now\naccepts a transaction context and is expected to return a transaction context. You can now add extra tags or change the\n`op` based on different parameters. If you want to access the location like before, you can get it from\n`window.location`.\n\nFor example, if you had a function like so that computed a custom transaction name:\n\n```javascript\nimport * as Sentry from '@sentry/browser';\nimport { Integrations } from '@sentry/apm';\n\nSentry.init({\n integrations: [\n new Integrations.Tracing({\n beforeNavigate: location => {\n return getTransactionName(location);\n },\n }),\n ],\n});\n```\n\nYou would now leverage the context to do the same thing:\n\n```javascript\nimport * as Sentry from '@sentry/browser';\nimport { Integrations } from '@sentry/tracing';\n\nSentry.init({\n integrations: [\n new Integrations.BrowserTracing({\n beforeNavigate: context => {\n return {\n ...context,\n // Can even look at context tags or other data to adjust\n // transaction name\n name: getTransactionName(window.location),\n };\n },\n }),\n ],\n});\n```\n\nFor the full diff:\n\n```diff\n import * as Sentry from \"@sentry/browser\";\n-import { Integrations } from \"@sentry/apm\";\n+import { Integrations } from \"@sentry/tracing\";\n\n Sentry.init({\n integrations: [\n- new Integrations.Tracing({\n- beforeNavigate: (location) => {\n- return getTransactionName(location)\n+ new Integrations.BrowserTracing({\n+ beforeNavigate: (ctx) => {\n+ return {\n+ ...ctx,\n+ name: getTransactionName(ctx.name, window.location)\n+ }\n }\n }),\n ]\n });\n```\n\n### Node\n\nIf you were using the Express integration for automatic instrumentation, the only necessary change is to update the\nimport statement:\n\n```diff\n import * as Sentry from \"@sentry/node\";\n-import { Integrations } from \"@sentry/apm\";\n+import { Integrations } from \"@sentry/tracing\";\n\n Sentry.init({\n integrations: [\n new Integrations.Express(),\n ]\n });\n```\n","readmeFilename":"README.md","users":{"flumpus-dev":true}}
![\"Sentry\"](\"https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png\")
\n \n