\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## 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 integrations 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\n[`@sentry/apm`](https://www.npmjs.com/package/@sentry/apm) to\n[`@sentry/tracing`](https://www.npmjs.com/package/@sentry/tracing). While the\ntwo packages are similar, some imports and APIs have changed slightly.\n\nThe old package `@sentry/apm` is deprecated in favor of `@sentry/tracing`.\nFuture support for `@sentry/apm` is limited to 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\n`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\nupdate `Sentry.init` to use the new `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,\nthe API in `BrowserTracing` has changed slightly. Instead of passing in a\nlocation and returning a string representing transaction name, `beforeNavigate`\nnow accepts a transaction context and is expected to return a transaction\ncontext. You can now add extra tags or change the `op` based on different\nparameters. 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\nname:\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\nonly necessary change is to update the import 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","_attachments":{},"homepage":"https://github.com/getsentry/sentry-javascript/tree/master/packages/tracing","bugs":{"url":"https://github.com/getsentry/sentry-javascript/issues"},"license":"MIT"}
![\"Sentry\"](\"https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png\")
\n \n