[docs] SDK 50 guide for Sentry

[brentvatne]

Why

Ensure we have instructions for using @sentry/react-native with SDK 50.

TODO

• Test the latest release after speaking with the Sentry team on Jan 10
• Update this page to indicate that sentry-expo is deprecated in SDK 50

[expo-bot]

📘 Your docs preview website is ready!

[krystofwoldrich]

This is true. Users will be able to use it to set up apps with CNG.

After getsentry/sentry-wizard#505

[quinlanj]

Should be nested array as per https://docs.expo.dev/config-plugins/introduction/#use-a-config-plugin

Suggested change

	```json app.json
	{
	"expo": {
	"plugins": ["sentry-expo", {
	"organization": "sentry org slug, or use the `SENTRY_ORG` environment variable",
	"project": "sentry project name, or use the `SENTRY_PROJECT` environment variable"
	}]
	/* @hide ... your existing configuration */ /* @end */
	}
	}
	```
	```json app.json
	{
	"expo": {
	"plugins": [["@sentry/react-native", {
	"organization": "sentry org slug, or use the `SENTRY_ORG` environment variable",
	"project": "sentry project name, or use the `SENTRY_PROJECT` environment variable"
	}]
	/* @hide ... your existing configuration */ /* @end */
	]
	}
	}

[amandeepmittal]

I feel, we should provide more context on what that safe place can be, may be can mention one or two examples here?

[krystofwoldrich]

Would it make sense to move this above the Tag configuration section? I know it logically makes sense to first set tags, but I believe uploaded source maps are more important than the tags and I don't want users to overlook this.

[jparkrr]

Just FYI, I was trying this out in sdk 50 beta, and was getting some type errors for this metadata stuff.

[brentvatne]

cc @quinlanj

[quinlanj]

How about this: #25712 (comment)

Open to suggestions for this suggestion 😄

[wschurman]

Should be able to disambiguate the subtype by checking for the presence of metadata: https://github.com/expo/expo/blob/main/apps/expo-go/src/menu/DevMenuTaskInfo.tsx#L28

Something like:

const { metadata, extra } =
    'metadata' in manifest ? manifest : { metadata: undefined, extra: undefined };

or this might be cleaner:

const metadata = 'metadata' in manifest ? manifest.metadata : undefined;
const extra = 'metadata' in manifest ? manifest.extra : undefined;

metadata in the manifest has type object and extra has type ManifestExtra.

[quinlanj]

based on will's feedback: #25712 (comment)

In this snippet, updateGroup is typed as unknown, so we do a runtime check for 'string' where necessary

[brentvatne]

would this also preserve types?

const { manifest } = Updates;
const metadata = manifest?.metadata;
const extra = metadata ? manifest.extra : undefined;
const updateGroup = metadata?.updateGroup;

[Simek]

Can't we use, or cast to the exported Manifest type?

• expo/packages/expo-updates/src/Updates.types.ts

  Line 3 in ab91257

  export type Manifest = ExpoUpdatesManifest | EmbeddedManifest;

We should be able to discern which exact type it is, by checking the presence of i.e. metadata key, via in operator before casting, if needed, as Will suggested:

const typedManifest = 'metadata' in manifest ? (manifest as ExpoUpdatesManifest) : (manifest as EmbeddedManifest); 

[brentvatne]

this seems like a good suggestion @Simek. up to @quinlanj / @wschurman

[wschurman]

It's also possible that it is empty object, though it's somewhat hard to tell when that's the case. Looks like it's when the library is disabled, either explicitly or due to an initialization error. So the actual type of Updates.manifest is ExpoUpdatesManifest | EmbeddedManifest | {} (I'll file a task to change it to not use Partial<Manifest>).

[fobos531]

@brentvatne Sidenote, is Sentry yet to publish an updated version of their SDK which includes support for SDK 50? I tried migrating away from sentry-expo in one of my side projects using the instructions in this PR, and it couldn't find the config plugin.

[brentvatne]

@brentvatne Sidenote, is Sentry yet to publish an updated version of their SDK which includes support for SDK 50? I tried migrating away from sentry-expo in one of my side projects using the instructions in this PR, and it couldn't find the config plugin.

hello! yes! give this version a try: "@sentry/react-native": "5.16.0-alpha.4" - it will work with the info in this guide. a stable release with these changes is coming very soon

[quinlanj]

Suggested change

	```js
	import * as Updates from 'expo-updates';
	const { metadata, extra } = Updates.manifest;
	Sentry.init({
	// dsn, release, dist, etc...
	});
	Sentry.configureScope(scope => {
	scope.setTag('expo-update-group-id', metadata?.updateGroup);
	scope.setTag('expo-update-id', Updates.updateId);
	// This will be `true` if the update is the one embedded in the build, and not one downloaded from the updates server.
	scope.setTag('expo-is-embedded-update', Updates.isEmbeddedLaunch);
	scope.setTag(
	'expo-update-debug-url',
	Updates.isEmbeddedLaunch
	? 'not applicable for embedded updates'
	: `https://expo.dev/accounts/${extra?.expoClient?.owner}/projects/${extra?.expoClient?.slug}/updates/${metadata?.updateGroup}`
	);
	});
	```js
	import * as Updates from 'expo-updates';
	const manifest = Updates.manifest;
	const metadata = "metadata" in manifest ? manifest.metadata : undefined;
	const extra = "metadata" in manifest ? manifest.extra : undefined;
	const updateGroup =
	metadata && "updateGroup" in metadata ? metadata.updateGroup : undefined;
	Sentry.init({
	// dsn, release, dist, etc...
	});
	Sentry.configureScope((scope) => {
	if (typeof updateGroup === "string") {
	scope.setTag("expo-update-group-id", updateGroup);
	}
	scope.setTag("expo-update-id", Updates.updateId);
	// This will be `true` if the update is the one embedded in the build, and not one downloaded from the updates server.
	scope.setTag("expo-is-embedded-update", Updates.isEmbeddedLaunch);
	scope.setTag(
	"expo-update-debug-url",
	Updates.isEmbeddedLaunch
	? "not applicable for embedded updates"
	: `https://expo.dev/accounts/${extra?.expoClient?.owner}/projects/${extra?.expoClient?.slug}/updates/${updateGroup}`
	);
	});

[brentvatne]

${extra?.expoClient?.owner}

will this possibly lead to /accounts/undefined ever? or is this owner field always actually present and this is just a typing quirk?

/updates/${updateGroup}

it looks like updateGroup can be undefined, so this would lead to /updates/undefined if so

[quinlanj]

Amended suggestion: #25712 (comment)

on the owner field -- the docs say that this should fall back to username but I tested this and it is indeed undefined. I've made a change where it falls back to [account], and the website should handle this case. The edge case is if slug is undefined but owner isnt (website doesnt handle that). But most manifests have slug so that field should be relatively safe.

[quinlanj]

Suggested change

	import * as Updates from 'expo-updates';
	const { metadata, extra } = Updates.manifest;
	Sentry.init({
	// dsn, release, dist, etc...
	});
	Sentry.configureScope(scope => {
	scope.setTag('expo-update-group-id', metadata?.updateGroup);
	scope.setTag('expo-update-id', Updates.updateId);
	// This will be `true` if the update is the one embedded in the build, and not one downloaded from the updates server.
	scope.setTag('expo-is-embedded-update', Updates.isEmbeddedLaunch);
	scope.setTag(
	'expo-update-debug-url',
	Updates.isEmbeddedLaunch
	? 'not applicable for embedded updates'
	: `https://expo.dev/accounts/${extra?.expoClient?.owner}/projects/${extra?.expoClient?.slug}/updates/${metadata?.updateGroup}`
	);
	});
	import * as Updates from 'expo-updates';
	const manifest = Updates.manifest;
	const metadata = "metadata" in manifest ? manifest.metadata : undefined;
	const extra = "metadata" in manifest ? manifest.extra : undefined;
	const updateGroup =
	metadata && "updateGroup" in metadata ? metadata.updateGroup : undefined;
	Sentry.init({
	// dsn, release, dist, etc...
	});
	Sentry.configureScope((scope) => {
	if (typeof updateGroup === "string") {
	scope.setTag("expo-update-group-id", updateGroup);
	}
	scope.setTag("expo-update-id", Updates.updateId);
	// This will be `true` if the update is the one embedded in the build, and not one downloaded from the updates server.
	scope.setTag("expo-is-embedded-update", Updates.isEmbeddedLaunch);
	if (Updates.isEmbeddedLaunch) {
	scope.setTag(
	"expo-update-debug-url",
	"not applicable for embedded updates"
	);
	} else if (typeof updateGroup === "string") {
	const owner = extra?.expoClient?.owner ?? "[account]";
	const slug = extra?.expoClient?.slug ?? "[project]";
	scope.setTag(
	"expo-update-debug-url",
	`https://expo.dev/accounts/${owner}/projects/${slug}/updates/${updateGroup}`
	);
	}
	});

[brentvatne]

@quinlanj - what do you think about this for the configureScope section instead?

Sentry.configureScope((scope) => {
  scope.setTag("expo-update-id", Updates.updateId);
  scope.setTag("expo-is-embedded-update", Updates.isEmbeddedLaunch);

  if (typeof updateGroup === "string") {
    scope.setTag("expo-update-group-id", updateGroup);

    const owner = extra?.expoClient?.owner ?? "[account]";
    const slug = extra?.expoClient?.slug ?? "[project]";
    scope.setTag(
      "expo-update-debug-url",
      `https://expo.dev/accounts/${owner}/projects/${slug}/updates/${updateGroup}`
    );
  } else if (Updates.isEmbeddedLaunch) {
    // This will be `true` if the update is the one embedded in the build, and not one downloaded from the updates server.
    if (Updates.isEmbeddedLaunch) {
      scope.setTag(
        "expo-update-debug-url",
        "not applicable for embedded updates"
      );
    }
  }
});

[quinlanj]

lgtm!

[wschurman]

that configureScope suggestion looks good. can remove the second nested Updates.isEmbeddedLaunch check in the else if.

[brentvatne]

oops thanks