ref(ui): Update Sentry to js sdk 7 beta

[k-fish]

Summary

This will let us try out the new beta sdk on Sentry itself to find out if we have any issues earlier and give feedback to the sdk team.

[billyvg]

No breaking changes?

[smeubank]

@billyvg there are breaking changes, but I am not sure which ones impact Sentry so please refer to the change log and let us know what you think of those as well. Since we also want to know if the way we communicate breaking changes is clear

[github-actions]

size-limit report 📦

Path	Size
src/sentry/static/sentry/dist/entrypoints/app.js	62.26 KB (-0.04% 🔽)
src/sentry/static/sentry/dist/entrypoints/sentry.css	69.93 KB (0%)

[k-fish]

@smeubank, I've gone over the migration guide w.r.t Sentry js and updated it now to fix the breaking change. The migration guide had pretty much all our breaking changes in it, there were only a couple notes.

The only thing still needing work is that it looks like we have a breaking change because our jest environment is using deprecated sdk api as well, so need to fix that, if someone from the sdk could confirm that child->startChild is correct? I don't see it in the guide. See the linked PR below.

Only other update for the migration guide is that maybe we could improve clarity for the BrowserClient changes since there are two sections referring to it. I was mistakenly looking at less-sync-api section for a minute before finding the explicit client options, might be worth adding a link in less-async-api if that's the same relation? I'm not 100% what the less-async-api section migration path is, seems a bit unclear in general since there is no action item.

needs re-review

[billyvg]

@smeubank have we considered providing codemods when making breaking changes?

[k-fish]

@billyvg that's basically what I did for ours, although pretty quick rough code just for our changes. Re-writes via codemods would probably encourage adoption, for simple things like renames.

import { Transform, MemberExpression } from "jscodeshift";

const FullSeverityExpression: (level: string) => MemberExpression = (
  level
) => ({
  type: "MemberExpression",
  object: {
    type: "MemberExpression",
    object: {
      type: "Identifier",
      name: "Sentry",
    },
    property: {
      type: "Identifier",
      name: "Severity",
    },
  },
  property: {
    type: "Identifier",
    name: level,
  },
});

const PartialSeverityExpression: (level: string) => MemberExpression = (
  level
) => ({
  type: "MemberExpression",
  object: {
    type: "Identifier",
    name: "Severity",
  },
  property: {
    type: "Identifier",
    name: level,
  },
});

const transform: Transform = (file, api) => {
  const jscodeshift = api.jscodeshift;
  const ast = jscodeshift(file.source);
  let modified = false;

  ["Error", "Warning", "Info"].forEach((level) => {
    ast
      .find(jscodeshift.MemberExpression, FullSeverityExpression(level))
      .replaceWith(() => jscodeshift.identifier(`'${level.toLowerCase()}'`))
      .filter(() => (modified = true));
    ast
      .find(jscodeshift.MemberExpression, PartialSeverityExpression(level))
      .replaceWith(() => jscodeshift.identifier(`'${level.toLowerCase()}'`))
      .filter(() => (modified = true));
  });

  ast
    .find(jscodeshift.CallExpression, {
      callee: {
        object: {
          type: "Identifier",
          name: "Sentry",
        },
        property: {
          type: "Identifier",
          name: "init",
        },
      },
    })
    .forEach((path) => {
      // Sentry.init call.
      jscodeshift(path)
        .find(jscodeshift.Identifier, {
          type: "Identifier",
          name: "whitelistUrls",
        })
        .replaceWith(jscodeshift.identifier("allowUrls"))
        .filter(() => (modified = true));
    });

  if (modified) {
    return ast.toSource();
  } else {
    return null;
  }
};

[billyvg]

@k-fish published 1.7.1 that fixed a syntax error

[smeubank]

@smeubank have we considered providing codemods when making breaking changes?

codemods has come up but we did not do any work on it for this major release

[lforst]

if someone from the sdk could confirm that child->startChild is correct? I don't see it in the guide. See the linked PR below.

This looks kinda weird. I can't find any reference to child() in the SDK whatsoever - not even when going back to old versions. Is it possible that this doesn't reference SDK code at all? 🤔

I'm not 100% what the less-async-api section migration path is, seems a bit unclear in general since there is no action item.

The less-async-api section is part of the migration guide from 4.x -> 5.x/6.x. I sadly don't have much context to share here. Is this relevant for the v7 version bump? If it is, let me know and I'll investigate further!

We will discuss creating a code mod for the major - definitely an awesome suggestion.

---

Thank you so much for helping us dogfood this release 🙏 - really important to get some early feedback in as this is a huge update!

If there's anything else you need from the SDK team for getting this merged in, feel free to ping me :)

[billyvg]

Ah need to apply this to getsentry too

[AbhiPrasad]

We just released a new beta: https://www.npmjs.com/package/@sentry/browser/v/7.0.0-beta.1

This shouldn't change anything with the migration though (and has the LCP fixes merged in!)

[k-fish]

Anyone want to give an approve?