Can't see any ui.react.update spans anywhere, custom transactions are not useful at all since no spans are added to them.

[ashwingairola]

I am new to Sentry instrumentation in React. I am using the withProfiler HOC around some of my components to collect performance data. However, the only transactions I see with any meaningful spans are pageload and navigation. They contain spans like ui.react.mount and ui.react.render, but never ui.react.update.

When I try creating custom transactions in my React code, the transactions are reported, but they don't contain any meaningful spans other than those that I create using startChild. I have never been able to see any spans related to component re-renders, which I assumed that the withProfiler HOC would provide.

How do I add spans generated by withProfiler instances to a custom transaction? Is this something that can/should be done?

Example:
Parent.tsx:

const Parent: FC = () => {
    const [time, setTime] = useState("");
    
    useEffect(() => {
          const interval = setInterval(() => {
                  const transaction = startTransaction({ name: "timerCard:render" });
                  const span = transaction.startChild({ op: "customOp" });
                  setTime(new Date().toISOString());
                  transaction.finish();
          }, 5000);
      
          return () => {
                  clearInterval(interval);
          };
    }, []);

    return <TimerCard time={time} />;
};

TimerCard.tsx:

interface Props {
  time: string;
}

const TimerCard: FC<Props> = (props) => {
  return <div>{props.time}</div>;
};

export default withProfiler(TimerCard);

The transaction created inside the useEffect contains span other than the one that I am creating (customOp). I know that spans need to be attached to transactions, so which transaction is it to which the withProfiler attaches the spans that it creates? Does it even generate spans? How do I debug that?

[AbhiPrasad]

@ashwingairola you'll have to set the transaction on the scope so that automatic instrumentation can figure out what transaction to attach spans to.

const transaction = startTransaction({ name: "timerCard:render" });
Sentry.getCurrentHub().getScope().setSpan(transaction);

[ashwingairola]

Can I get some help on these questions? The docs really aren't helping here.

[AbhiPrasad]

Hey @ashwingairola! pageload and navigation transactions automatically finish themselves when the page gets to an idle state. This is why getActiveTransaction can return undefined (there is no running transaction because the transaction was finished).

The updates spans do not get attached correctly when the first transaction is navigation

This is because ui.react.update spans can only be attached to ui.react.mount spans in the current implementation. If the component does not mount during navigation, it's updates are not visible.

One thing to note is not to run in React.StrictMode) when testing this out. In strict mode your components re-render an extra time, so this may cause issues.

I created a copy of Profiler in my codebase and added a console statement for getActiveTransaction inside shouldComponentUpdate

This just means there is no active transaction while the component is updating (no pageload, no navigation, no custom user created transaction).

[ashwingairola]

One thing to note is not to run in React.StrictMode) when testing this out. In strict mode your components re-render an extra time, so this may cause issues.

Sorry, forgot to give some background. I am not running my app in strict mode. There are no unnecessary re-renders or transactions being made.

This still doesn't answer my question of why there is no active transaction in the scope when I print the transaction inside the setTimeout in the above snippet. I called startTransaction, and transaction.finish() is called only when the component is about to be destroyed, so throughout the duration of the component being in the DOM, the transaction that I created in the beginning of the useEffect should exist.

This is because ui.react.update spans can only be attached to ui.react.mount spans in the current implementation. If the component does not mount during navigation, it's updates are not visible.

I know this is an explicit design choice, but it doesn't seem very useful. What if the developer wants to track component updates in a custom transaction long after the component has been mounted (as is my use-case)? I did try altering the shouldComponentUpdate behaviour by getting the active transaction instead of relying on the mount span, but like I said, getActiveTransaction ALWAYS returns undefined for some reason.

[AbhiPrasad]

Hey @ashwingairola - this seems to be a bug on our side! Our automatic instrumentation forcefully removes transactions off the scope. Will fix!

[AbhiPrasad]

#7725 should fix the weird behaviour with active transactions.

As for your latter point - this is the behaviour we are choosing for now. If you have any suggestions - PRs are welcome!