fix(vue): Update Vue `trackComponents` list to match components with or without `<>` #13543

Zen-cronic · 2024-08-30T20:36:08Z

Resolves #13510

Tests to be added.

If you've added code that should be tested, please add tests.
Ensure your code lints and the test suite passes (yarn lint) & (yarn test).

…or without `<>` Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic · 2024-08-30T20:38:48Z

packages/vue/src/tracing.ts

+    if (!(currentCompo.startsWith('<') && currentCompo.endsWith('>'))) {
+      currentCompo = `<${currentCompo}>`;
+    }
+    return formattedName === currentCompo;


formattedName from formatComponentName() always return a name with < >.

Oh, it can also be <Component> at Component.vue.

Lms24

Hey @Zen-cronic thanks for opening this PR!

The change looks good to me but I had a slightly more size-efficient solution.

Could you add a test as well? We already have a Vue 3 test E2E test application. I was thinking that we could set a trackComponents array option in the Sentry init call and adjust the pageload test that it also includes a ui.vue.* span for a component that matches one of the array entries.

If you don't have time, just let me know, then I'll add the test.

Lms24 · 2024-09-04T10:13:57Z

packages/vue/src/tracing.ts

+    let currentCompo = compo;
+
+    if (!(currentCompo.startsWith('<') && currentCompo.endsWith('>'))) {
+      currentCompo = `<${currentCompo}>`;
+    }
+    return formattedName === currentCompo;


I think we can replace this with a more bundle size efficient version:

Suggested change

let currentCompo = compo;

if (!(currentCompo.startsWith('<') && currentCompo.endsWith('>'))) {

currentCompo = `<${currentCompo}>`;

}

return formattedName === currentCompo;

return compo.replace(/^<(.*)>$/, '$1') === formattedName

Ah in this case we don't even need the block anymore but could inline it to the some call. So feel free to do that as well :)

hey, I've taken your approach and found that formattedName must also be replaced:

function findTrackComponent(trackComponents: string[], formattedName: string): boolean { function extractComponentName(name: string): string { return name.replace(/^<(.*)>(?:.*)?$/, "$1"); } const isMatched = trackComponents.some(compo => { return extractComponentName(formattedName) === extractComponentName(compo) } ); return isMatched; }

The regex is needed for both the user provided component and the formatted component.

User provided: either <App> or App

Formatted: either <App> or <App> at App.vue.

What do you think?

Good observation, you're right! Also, I didn't think about the <App> at App.vue case.

There's one unfortunate side effect of this regex though: It can lead to polynomial build up when evaluating an input. Given that we run extractComponentName on user input I'd rather not risk the (still unlikely but possible) chance of some kind of ReDoS attack (I used this ReDoS checker to test it)

I played around with the regex to make it safer and keep it linear and arrived at this one: /^<([^\s]*)>( at [^\s]*)?$
I think this should still cover all component names but would appreciate it if you could double check it as well :)

Also, since this logic is getting a little bit more involved now, could you add a couple of unit test for findTrackComponent? It's fine to export the function just for testing purposes btw. Thanks!

(I don't want to overburden you with tests btw, I just want to keep stuff like this covered and understandable for everyone. So if you don't have the time, just let me know. We appreciate your hard work either way!)

Noted, unit and e2e tests added.

Zen-cronic · 2024-09-04T12:58:02Z

Just read your comments and review, I'll take them up now. Thanks!

Lms24

Sorry, I realized I approved the PR yesterday on accident. Please don't mind the change request, I'm just putting it here so that we don't merge the PR accidentally before the extract name logic is resolved.

Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic · 2024-09-06T01:10:16Z

packages/vue/src/tracing.ts

+   *
+   */
+  function extractComponentName(name: string): string {
+    return name.replace(/^<([^\s]*)>(?: at [^\s]*)?$/, '$1');


Based on what you suggested @Lms24, just an added non-capture group. The ReDoS Checker passes.

Sounds good to me, thanks!

Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic · 2024-09-06T02:53:08Z

dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts

+          'sentry.op': 'ui.vue.mount',
+          'sentry.origin': 'auto.ui.vue',
+        },
+        description: 'Vue <<HomeView>>',


Just making sure, are the double brackets intended? They're formatted here.

Good observation! I don't think they're intended. Let's remove them.

Lms24

Thanks for making the changes! We're almost there :)

Lms24 · 2024-09-06T08:53:53Z

dev-packages/e2e-tests/test-applications/vue-3/tests/performance.test.ts

@@ -122,3 +122,101 @@ test('sends a pageload transaction with a route name as transaction name if avai
    },
  });
 });
+
+test('sends a lifecycle span for the tracked HomeView component - with `<>`', async ({ page }) => {


This is a bit of an unfortunate and very intransparent limitation of our e2e test setup but we shouldn't navigate to the same route in more than one e2e test. The reason is that we execute them in parallel in CI and the waitForTransaction call from one test might actually resolve for a transaction in another test, depending on the condition in the callback.

To avoid this confusion, we generally create a new route for each test. Suggestion: Either we create new routes for the two new tests or we integrate them in already existing tests and simply check for the spans there. I'll let you make the call, I'm fine with either option.
Also, feel free to test both kinds trackComponent notations in one route/test :)

hey, thanks for the info. i decided to go with creating a new route, and grouped the different notations together in a single test.

Signed-off-by: Kaung Zin Hein <[email protected]>

Group trackComponent tests together: 1. With <> 2. Without <> 3. Not tracked Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic · 2024-09-06T14:13:04Z

dev-packages/e2e-tests/test-applications/vue-3/src/views/ComponentMainView.vue

+  <h1>Demonstrating Component Tracking</h1>
+  <ComponentOneView />
+  <ComponentTwoView />
+</template>


Inspired by the sveltekit-2-svelte-5 test setup.

Lms24

Thanks a lot @Zen-cronic, looks great to me now!

By the way, the entire JS SDK team really appreciates your contributions! @mydea sent you a message with a small thank you gift on LinkedIn a couple of days ago, in case you missed it. If this message somehow got lost, please feel free to drop me or @mydea an email (email in GH bio) :)

This PR adds the external contributor to the CHANGELOG.md file, so that they are credited for their contribution. See #13543 Co-authored-by: Lms24 <[email protected]>

fix(vue): Update Vue trackComponents list to match components with …

10bc596

…or without `<>` Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic commented Aug 30, 2024

View reviewed changes

Zen-cronic marked this pull request as ready for review September 3, 2024 01:00

Lms24 approved these changes Sep 4, 2024

View reviewed changes

Lms24 self-assigned this Sep 4, 2024

Lms24 requested changes Sep 5, 2024

View reviewed changes

test(vue): Add unit test for findTrackComponent function

2c67d73

Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic commented Sep 6, 2024

View reviewed changes

test(vue): Add e2e test cases for trackComponents span

e7bc6a3

Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic commented Sep 6, 2024

View reviewed changes

Lms24 reviewed Sep 6, 2024

View reviewed changes

Zen-cronic added 2 commits September 6, 2024 09:02

fix(vue): Remove extra angle bracket in component span description

8f48f36

Signed-off-by: Kaung Zin Hein <[email protected]>

test(vue): Add new route for trackComponent tests

ab13a0b

Group trackComponent tests together: 1. With <> 2. Without <> 3. Not tracked Signed-off-by: Kaung Zin Hein <[email protected]>

Zen-cronic commented Sep 6, 2024

View reviewed changes

Lms24 approved these changes Sep 9, 2024

View reviewed changes

Lms24 merged commit a7d3a9d into getsentry:develop Sep 9, 2024
124 checks passed

Lms24 mentioned this pull request Sep 9, 2024

Vue trackComponents allowlist should match for components without <> #13510

Closed

3 tasks

github-actions bot mentioned this pull request Sep 9, 2024

ref: Add external contributor to CHANGELOG.md #13625

Merged

q1blue mentioned this pull request Oct 1, 2024

[Snyk] Upgrade @sentry/react from 7.16.0 to 8.30.0 https-quantumblockchainai-atlassian-net/ossinsight#909

Open

wkylin mentioned this pull request Oct 2, 2024

[Snyk] Upgrade @sentry/react from 8.27.0 to 8.30.0 wkylin/pro-react-admin#440

Closed

KeeghanM mentioned this pull request Oct 3, 2024

[Snyk] Upgrade @sentry/react from 8.26.0 to 8.30.0 KeeghanM/chess-training-app-2.0#99

Merged

This was referenced Oct 5, 2024

[Snyk] Upgrade @sentry/react from 8.28.0 to 8.30.0 mbreadmachine/arany-d-osztaly-weboldal#43

Closed

[Snyk] Upgrade @sentry/react from 8.28.0 to 8.30.0 mbreadmachine/arany-d-osztaly-weboldal#49

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(vue): Update Vue `trackComponents` list to match components with or without `<>` #13543

fix(vue): Update Vue `trackComponents` list to match components with or without `<>` #13543

Zen-cronic commented Aug 30, 2024

Zen-cronic Aug 30, 2024

Zen-cronic Sep 5, 2024

Lms24 left a comment

Lms24 Sep 4, 2024

Lms24 Sep 4, 2024

Zen-cronic Sep 4, 2024

Zen-cronic Sep 5, 2024

Lms24 Sep 5, 2024

Zen-cronic Sep 6, 2024

Zen-cronic commented Sep 4, 2024

Lms24 left a comment

Zen-cronic Sep 6, 2024

Lms24 Sep 6, 2024

Zen-cronic Sep 6, 2024

Lms24 Sep 6, 2024

Lms24 left a comment

Lms24 Sep 6, 2024

Zen-cronic Sep 6, 2024

Zen-cronic Sep 6, 2024

Lms24 left a comment

fix(vue): Update Vue trackComponents list to match components with or without <> #13543

fix(vue): Update Vue trackComponents list to match components with or without <> #13543

Conversation

Zen-cronic commented Aug 30, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Lms24 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zen-cronic commented Sep 4, 2024

Lms24 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Lms24 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Lms24 left a comment

Choose a reason for hiding this comment

fix(vue): Update Vue `trackComponents` list to match components with or without `<>` #13543

fix(vue): Update Vue `trackComponents` list to match components with or without `<>` #13543