pagesRouterRoutingInstrumentation.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. Object.defineProperty(exports, '__esModule', { value: true });
  2. const core = require('@sentry/core');
  3. const react = require('@sentry/react');
  4. const utils = require('@sentry/utils');
  5. const Router = require('next/router');
  6. const debugBuild = require('../../common/debug-build.js');
  7. const globalObject = react.WINDOW
  8. ;
  9. /**
  10. * Every Next.js page (static and dynamic ones) comes with a script tag with the id "__NEXT_DATA__". This script tag
  11. * contains a JSON object with data that was either generated at build time for static pages (`getStaticProps`), or at
  12. * runtime with data fetchers like `getServerSideProps.`.
  13. *
  14. * We can use this information to:
  15. * - Always get the parameterized route we're in when loading a page.
  16. * - Send trace information (trace-id, baggage) from the server to the client.
  17. *
  18. * This function extracts this information.
  19. */
  20. function extractNextDataTagInformation() {
  21. let nextData;
  22. // Let's be on the safe side and actually check first if there is really a __NEXT_DATA__ script tag on the page.
  23. // Theoretically this should always be the case though.
  24. const nextDataTag = globalObject.document.getElementById('__NEXT_DATA__');
  25. if (nextDataTag && nextDataTag.innerHTML) {
  26. try {
  27. nextData = JSON.parse(nextDataTag.innerHTML);
  28. } catch (e) {
  29. debugBuild.DEBUG_BUILD && utils.logger.warn('Could not extract __NEXT_DATA__');
  30. }
  31. }
  32. if (!nextData) {
  33. return {};
  34. }
  35. const nextDataTagInfo = {};
  36. const { page, query, props } = nextData;
  37. // `nextData.page` always contains the parameterized route - except for when an error occurs in a data fetching
  38. // function, then it is "/_error", but that isn't a problem since users know which route threw by looking at the
  39. // parent transaction
  40. // TODO: Actually this is a problem (even though it is not that big), because the DSC and the transaction payload will contain
  41. // a different transaction name. Maybe we can fix this. Idea: Also send transaction name via pageProps when available.
  42. nextDataTagInfo.route = page;
  43. nextDataTagInfo.params = query;
  44. if (props && props.pageProps) {
  45. nextDataTagInfo.sentryTrace = props.pageProps._sentryTraceData;
  46. nextDataTagInfo.baggage = props.pageProps._sentryBaggage;
  47. }
  48. return nextDataTagInfo;
  49. }
  50. const DEFAULT_TAGS = {
  51. 'routing.instrumentation': 'next-pages-router',
  52. } ;
  53. // We keep track of the active transaction so we can finish it when we start a navigation transaction.
  54. let activeTransaction = undefined;
  55. // We keep track of the previous location name so we can set the `from` field on navigation transactions.
  56. // This is either a route or a pathname.
  57. let prevLocationName = undefined;
  58. const client = core.getClient();
  59. /**
  60. * Instruments the Next.js pages router. Only supported for
  61. * client side routing. Works for Next >= 10.
  62. *
  63. * Leverages the SingletonRouter from the `next/router` to
  64. * generate pageload/navigation transactions and parameterize
  65. * transaction names.
  66. */
  67. function pagesRouterInstrumentation(
  68. startTransactionCb,
  69. startTransactionOnPageLoad = true,
  70. startTransactionOnLocationChange = true,
  71. startPageloadSpanCallback,
  72. startNavigationSpanCallback,
  73. ) {
  74. const { route, params, sentryTrace, baggage } = extractNextDataTagInformation();
  75. // eslint-disable-next-line deprecation/deprecation
  76. const { traceparentData, dynamicSamplingContext, propagationContext } = utils.tracingContextFromHeaders(
  77. sentryTrace,
  78. baggage,
  79. );
  80. core.getCurrentScope().setPropagationContext(propagationContext);
  81. prevLocationName = route || globalObject.location.pathname;
  82. if (startTransactionOnPageLoad) {
  83. const source = route ? 'route' : 'url';
  84. const transactionContext = {
  85. name: prevLocationName,
  86. op: 'pageload',
  87. origin: 'auto.pageload.nextjs.pages_router_instrumentation',
  88. tags: DEFAULT_TAGS,
  89. // pageload should always start at timeOrigin (and needs to be in s, not ms)
  90. startTimestamp: utils.browserPerformanceTimeOrigin ? utils.browserPerformanceTimeOrigin / 1000 : undefined,
  91. ...(params && client && client.getOptions().sendDefaultPii && { data: params }),
  92. ...traceparentData,
  93. metadata: {
  94. source,
  95. dynamicSamplingContext: traceparentData && !dynamicSamplingContext ? {} : dynamicSamplingContext,
  96. },
  97. } ;
  98. activeTransaction = startTransactionCb(transactionContext);
  99. startPageloadSpanCallback(transactionContext);
  100. }
  101. if (startTransactionOnLocationChange) {
  102. Router.default.events.on('routeChangeStart', (navigationTarget) => {
  103. const strippedNavigationTarget = utils.stripUrlQueryAndFragment(navigationTarget);
  104. const matchedRoute = getNextRouteFromPathname(strippedNavigationTarget);
  105. let transactionName;
  106. let transactionSource;
  107. if (matchedRoute) {
  108. transactionName = matchedRoute;
  109. transactionSource = 'route';
  110. } else {
  111. transactionName = strippedNavigationTarget;
  112. transactionSource = 'url';
  113. }
  114. const tags = {
  115. ...DEFAULT_TAGS,
  116. from: prevLocationName,
  117. };
  118. prevLocationName = transactionName;
  119. if (activeTransaction) {
  120. activeTransaction.end();
  121. }
  122. const transactionContext = {
  123. name: transactionName,
  124. op: 'navigation',
  125. origin: 'auto.navigation.nextjs.pages_router_instrumentation',
  126. tags,
  127. metadata: { source: transactionSource },
  128. } ;
  129. const navigationTransaction = startTransactionCb(transactionContext);
  130. startNavigationSpanCallback(transactionContext);
  131. if (navigationTransaction) {
  132. // In addition to the navigation transaction we're also starting a span to mark Next.js's `routeChangeStart`
  133. // and `routeChangeComplete` events.
  134. // We don't want to finish the navigation transaction on `routeChangeComplete`, since users might want to attach
  135. // spans to that transaction even after `routeChangeComplete` is fired (eg. HTTP requests in some useEffect
  136. // hooks). Instead, we'll simply let the navigation transaction finish itself (it's an `IdleTransaction`).
  137. // eslint-disable-next-line deprecation/deprecation
  138. const nextRouteChangeSpan = navigationTransaction.startChild({
  139. op: 'ui.nextjs.route-change',
  140. origin: 'auto.ui.nextjs.pages_router_instrumentation',
  141. description: 'Next.js Route Change',
  142. });
  143. const finishRouteChangeSpan = () => {
  144. nextRouteChangeSpan.end();
  145. Router.default.events.off('routeChangeComplete', finishRouteChangeSpan);
  146. };
  147. Router.default.events.on('routeChangeComplete', finishRouteChangeSpan);
  148. }
  149. });
  150. }
  151. }
  152. function getNextRouteFromPathname(pathname) {
  153. const pageRoutes = (globalObject.__BUILD_MANIFEST || {}).sortedPages;
  154. // Page route should in 99.999% of the cases be defined by now but just to be sure we make a check here
  155. if (!pageRoutes) {
  156. return;
  157. }
  158. return pageRoutes.find(route => {
  159. const routeRegExp = convertNextRouteToRegExp(route);
  160. return pathname.match(routeRegExp);
  161. });
  162. }
  163. /**
  164. * Converts a Next.js style route to a regular expression that matches on pathnames (no query params or URL fragments).
  165. *
  166. * In general this involves replacing any instances of square brackets in a route with a wildcard:
  167. * e.g. "/users/[id]/info" becomes /\/users\/([^/]+?)\/info/
  168. *
  169. * Some additional edgecases need to be considered:
  170. * - All routes have an optional slash at the end, meaning users can navigate to "/users/[id]/info" or
  171. * "/users/[id]/info/" - both will be resolved to "/users/[id]/info".
  172. * - Non-optional "catchall"s at the end of a route must be considered when matching (e.g. "/users/[...params]").
  173. * - Optional "catchall"s at the end of a route must be considered when matching (e.g. "/users/[[...params]]").
  174. *
  175. * @param route A Next.js style route as it is found in `global.__BUILD_MANIFEST.sortedPages`
  176. */
  177. function convertNextRouteToRegExp(route) {
  178. // We can assume a route is at least "/".
  179. const routeParts = route.split('/');
  180. let optionalCatchallWildcardRegex = '';
  181. if (routeParts[routeParts.length - 1].match(/^\[\[\.\.\..+\]\]$/)) {
  182. // If last route part has pattern "[[...xyz]]" we pop the latest route part to get rid of the required trailing
  183. // slash that would come before it if we didn't pop it.
  184. routeParts.pop();
  185. optionalCatchallWildcardRegex = '(?:/(.+?))?';
  186. }
  187. const rejoinedRouteParts = routeParts
  188. .map(
  189. routePart =>
  190. routePart
  191. .replace(/^\[\.\.\..+\]$/, '(.+?)') // Replace catch all wildcard with regex wildcard
  192. .replace(/^\[.*\]$/, '([^/]+?)'), // Replace route wildcards with lazy regex wildcards
  193. )
  194. .join('/');
  195. // eslint-disable-next-line @sentry-internal/sdk/no-regexp-constructor -- routeParts are from the build manifest, so no raw user input
  196. return new RegExp(
  197. `^${rejoinedRouteParts}${optionalCatchallWildcardRegex}(?:/)?$`, // optional slash at the end
  198. );
  199. }
  200. exports.pagesRouterInstrumentation = pagesRouterInstrumentation;
  201. //# sourceMappingURL=pagesRouterRoutingInstrumentation.js.map