fix(react): Use history object for init transaction name (#3609)

When creating pageload transactions the current react
router v4/v5 relies on global.location.pathname (global
is the current window instance), which can produce
inconsistent basenames. This can cause pageload transctions
to be not paramaterized correctly.

This patch fixes this by using history.location.pathname
to generate pageload transaction names. This was tested locally
to confirm changes.

Author: AbhiPrasad

packages/react/src/reactrouter.tsx

@@ -52,6 +52,18 @@ function createReactRouterInstrumentation(
   allRoutes: RouteConfig[] = [],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
+  function getInitPathName(): string | undefined {
+    if (history && history.location) {
+      return history.location.pathname;
+    }
+
+    if (global && global.location) {
+      return global.location.pathname;
+    }
+
+    return undefined;
+  }
+
   function getTransactionName(pathname: string): string {
     if (allRoutes === [] || !matchPath) {
       return pathname;
@@ -69,9 +81,10 @@ function createReactRouterInstrumentation(
   }
 
   return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
-    if (startTransactionOnPageLoad && global && global.location) {
+    const initPathName = getInitPathName();
+    if (startTransactionOnPageLoad && initPathName) {
       activeTransaction = customStartTransaction({
-        name: getTransactionName(global.location.pathname),
+        name: getTransactionName(initPathName),
         op: 'pageload',
         tags: {
           'routing.instrumentation': name,