flamegraphProvider.tsx 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import {createContext, useContext, useMemo} from 'react';
  2. import * as Sentry from '@sentry/react';
  3. import {Flamegraph} from 'sentry/utils/profiling/flamegraph';
  4. import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphPreferences';
  5. import {useFlamegraphProfiles} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphProfiles';
  6. import {useProfileGroup} from 'sentry/views/profiling/profileGroupProvider';
  7. const LOADING_OR_FALLBACK_FLAMEGRAPH = Flamegraph.Empty();
  8. const FlamegraphContext = createContext<Flamegraph | null>(null);
  9. export const useFlamegraph = () => {
  10. const context = useContext(FlamegraphContext);
  11. if (!context) {
  12. throw new Error('useFlamegraph was called outside of FlamegraphProvider');
  13. }
  14. return context;
  15. };
  16. interface FlamegraphProviderProps {
  17. children: React.ReactNode;
  18. }
  19. export function FlamegraphProvider(props: FlamegraphProviderProps) {
  20. const profileGroup = useProfileGroup();
  21. const {threadId} = useFlamegraphProfiles();
  22. const {sorting, view} = useFlamegraphPreferences();
  23. const flamegraph = useMemo(() => {
  24. if (typeof threadId !== 'number') {
  25. return LOADING_OR_FALLBACK_FLAMEGRAPH;
  26. }
  27. // This could happen if threadId was initialized from query string, but for some
  28. // reason the profile was removed from the list of profiles.
  29. const activeProfile = profileGroup.profiles.find(p => p.threadId === threadId);
  30. if (!activeProfile) {
  31. return LOADING_OR_FALLBACK_FLAMEGRAPH;
  32. }
  33. const span = Sentry.withScope(scope => {
  34. scope.setTag('sorting', sorting.split(' ').join('_'));
  35. scope.setTag('view', view.split(' ').join('_'));
  36. return Sentry.startInactiveSpan({
  37. op: 'import',
  38. name: 'flamegraph.constructor',
  39. });
  40. });
  41. const newFlamegraph = new Flamegraph(activeProfile, {
  42. inverted: view === 'bottom up',
  43. sort: sorting,
  44. configSpace: undefined,
  45. });
  46. span?.end();
  47. return newFlamegraph;
  48. }, [sorting, threadId, view, profileGroup]);
  49. return (
  50. <FlamegraphContext.Provider value={flamegraph}>
  51. {props.children}
  52. </FlamegraphContext.Provider>
  53. );
  54. }