Skip to content

Remove the source maps wizard for react-native projects #87702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

Remove the source maps wizard for react-native projects #87702

Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a8299ff
Remove the source maps wizard for react-native projects
smeubank Mar 24, 2025
c32d18d
shufflin some text
smeubank Mar 24, 2025
ff220f2
Adding a link to the source maps page
smeubank Mar 24, 2025
a4ab15a
Update static/app/components/events/interfaces/sourceMapsDebuggerModa…
smeubank Mar 25, 2025
253d3f8
Update static/app/components/events/interfaces/sourceMapsDebuggerModa…
smeubank Mar 25, 2025
e0f4e5c
empty state: rn source maps
smeubank Mar 25, 2025
2e0f370
update some copy
smeubank Mar 25, 2025
0f21922
Merge branch 'master' into (feat)no-sourcemaps-wizard-for-rn
smeubank Mar 25, 2025
b1aa878
update the android scripts
smeubank Mar 27, 2025
ff90d07
Update static/app/views/settings/projectSourceMaps/sourceMapsList.tsx
smeubank Mar 28, 2025
6f45ba7
Update static/app/views/settings/projectSourceMaps/sourceMapsList.tsx
smeubank Mar 28, 2025
a9ba34b
Update static/app/components/events/interfaces/sourceMapsDebuggerModa…
smeubank Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 80 additions & 42 deletions static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ function SentryWizardCallout({
<Fragment>
<WizardInstructionParagraph>
{tct(
'Firstly, have you already run the Sentry Wizard with [code:sourcemaps] in your project’s terminal? It’s the easiest way to get source maps set up:',
"Firstly, have you already run the Sentry Wizard with [code:sourcemaps] in your project's terminal? It's the easiest way to get source maps set up:",
{
code: <code />,
}
Expand Down Expand Up @@ -482,10 +482,25 @@ export function SourceMapsDebuggerModal({
<Body>
<p>
{t(
"It looks like the original source code for this stack frame couldn't be determined when this error was captured. To get the original code for this stack frame, Sentry needs source maps to be configured."
'It looks like the original source code for this stack frame. To get the original code for this stack frame, Sentry needs source maps to be uploaded.'
)}
</p>
{metaFrameworksWithSentryWizardInOnboarding.includes(platform) ? (
{isReactNativeSDK({
sdkName: sourceResolutionResults.sdkName,
}) ? (
<Fragment>
<WizardInstructionParagraph>
{tct(
"For React Native projects, source maps should be generated and uploaded automatically during the build process. If your source maps aren't showing up, consult our [link:React Native source maps documentation].",
{
link: (
<ExternalLinkWithIcon href="https://docs.sentry.io/platforms/react-native/sourcemaps/" />
),
}
)}
</WizardInstructionParagraph>
</Fragment>
) : metaFrameworksWithSentryWizardInOnboarding.includes(platform) ? (
<MetaFrameworkConfigInfo
framework={platform}
orgSlug={orgSlug}
Expand All @@ -499,9 +514,13 @@ export function SourceMapsDebuggerModal({
/>
)}
<p>
{t(
"Secondly, let's go through a checklist to help you troubleshoot why source maps aren't showing up. There are a few ways to configure them:"
)}
{isReactNativeSDK({sdkName: sourceResolutionResults.sdkName})
? t(
"Let's go through a checklist to help you troubleshoot why source maps aren't showing up. There are a few ways to configure them:"
)
: t(
"Secondly, let's go through a checklist to help you troubleshoot why source maps aren't showing up. There are a few ways to configure them:"
)}
</p>
<Tabs<'debug-ids' | 'release' | 'fetching'>
value={activeTab}
Expand Down Expand Up @@ -595,12 +614,14 @@ export function SourceMapsDebuggerModal({
<UploadedSourceFileWithCorrectDebugIdChecklistItem
shouldValidate={sourceResolutionResults.stackFrameDebugId !== null}
sourceResolutionResults={sourceResolutionResults}
projectSlug={project?.slug}
/>
<UploadedSourceMapWithCorrectDebugIdChecklistItem
shouldValidate={
sourceResolutionResults.uploadedSourceFileWithCorrectDebugId
}
sourceResolutionResults={sourceResolutionResults}
projectSlug={project?.slug}
/>
</CheckList>
{sourceResolutionResults.debugIdProgressPercent === 1 ? (
Expand All @@ -625,17 +646,19 @@ export function SourceMapsDebuggerModal({
sourceResolutionResults={sourceResolutionResults}
/>
<ReleaseHasUploadedArtifactsChecklistItem
shouldValidate={sourceResolutionResults.release !== null}
shouldValidate={sourceResolutionResults.releaseHasSomeArtifact}
sourceResolutionResults={sourceResolutionResults}
/>
<ReleaseSourceFileMatchingChecklistItem
shouldValidate={sourceResolutionResults.releaseHasSomeArtifact}
shouldValidate={
sourceResolutionResults.sourceFileReleaseNameFetchingResult ===
'found'
}
sourceResolutionResults={sourceResolutionResults}
/>
<ReleaseSourceMapMatchingChecklistItem
shouldValidate={
sourceResolutionResults.sourceFileReleaseNameFetchingResult ===
'found'
sourceResolutionResults.sourceMapReleaseNameFetchingResult === 'found'
}
sourceResolutionResults={sourceResolutionResults}
/>
Expand Down Expand Up @@ -1026,14 +1049,9 @@ function HasDebugIdChecklistItem({
"It seems you already uploaded artifacts with Debug IDs, however, this event doesn't contain any Debug IDs yet. Generally this means that your application doesn't include the same files you uploaded to Sentry."
)}
</p>
<p>
{t(
'For Sentry to be able to show your original source code, it is required that you build the application with the exact same files that you uploaded to Sentry.'
)}
</p>
<p>
{tct(
'The [bundlerPluginRepoLink:Sentry Metro Plugin] needs to be active when building your production app. You cannot do two separate builds, for example, one for uploading to Sentry with the plugin being active and one for deploying without the plugin. The plugin needs to be active for every build.',
'The [bundlerPluginRepoLink:Sentry Metro Plugin] needs to be active when building your production app. You cannot do two separate builds, for example, one for uploading to Sentry with the plugin being active and one for deploying without the plugin.',
{
bundlerPluginRepoLink: (
<ExternalLinkWithIcon
Expand Down Expand Up @@ -1067,14 +1085,6 @@ function HasDebugIdChecklistItem({
toolUsedToUploadSourceMaps={toolUsedToUploadSourceMaps}
/>
)}
<p>
{tct(
'Read the [link:Sentry Source Maps Documentation] to learn how to inject Debug IDs into your build artifacts and how to upload them to Sentry.',
{
link: <ExternalLinkWithIcon href={sourceMapsDocLinks.sourcemaps} />,
}
)}
</p>
</CheckListInstruction>
</CheckListItem>
);
Expand All @@ -1100,14 +1110,16 @@ function HasDebugIdChecklistItem({
function UploadedSourceFileWithCorrectDebugIdChecklistItem({
sourceResolutionResults,
shouldValidate,
projectSlug,
}: {
shouldValidate: boolean;
sourceResolutionResults: FrameSourceMapDebuggerData;
projectSlug?: string;
}) {
const platform = getPlatform(sourceResolutionResults);
const sourceMapsDocLinks = getSourceMapsDocLinks(platform);
const successMessage = t('Source file with a matching Debug ID was uploaded');
const errorMessage = t('Missing source file with a matching Debug ID');
const errorMessage = t('Missing a source file with a matching Debug ID');

if (!shouldValidate) {
return <CheckListItem status="none" title={successMessage} />;
Expand All @@ -1118,26 +1130,32 @@ function UploadedSourceFileWithCorrectDebugIdChecklistItem({
}

if (sourceResolutionResults.uploadedSomeArtifactWithDebugId) {
const debugId = sourceResolutionResults.stackFrameDebugId;

return (
<CheckListItem status="alert" title={errorMessage}>
<CheckListInstruction type="muted">
<h6>{t('No Source File With Matching Debug ID')}</h6>
<p>
{tct('We cannot find a source file with this Debug ID: [debugId].', {
debugId: <MonoBlock>{debugId}</MonoBlock>,
})}
</p>
<p>
{tct(
"You already uploaded artifacts with Debug IDs but none of the uploaded source files had a Debug ID matching this stack frame's Debug ID: [debugId]",
'Check your [link:source maps settings] to verify if the bundle with this Debug ID was uploaded properly.',
{
debugId: (
<MonoBlock>{sourceResolutionResults.stackFrameDebugId}</MonoBlock>
link: (
<LinkWithIcon
to={
projectSlug
? `/settings/projects/${projectSlug}/source-maps/?query=${debugId}`
: `/settings/projects/:projectId/source-maps/?query=${debugId}`
Copy link
Member

@priscilawebdev priscilawebdev Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this work? I have never written a link this way

}
/>
),
}
)}
</p>
<p>
{t(
'Make sure to inject Debug IDs into all of your source files and to upload all of them to Sentry.'
)}
</p>
{/* TODO: Link to Uploaded Artifacts */}
</CheckListInstruction>
</CheckListItem>
);
Expand All @@ -1164,14 +1182,16 @@ function UploadedSourceFileWithCorrectDebugIdChecklistItem({
function UploadedSourceMapWithCorrectDebugIdChecklistItem({
sourceResolutionResults,
shouldValidate,
projectSlug,
}: {
shouldValidate: boolean;
sourceResolutionResults: FrameSourceMapDebuggerData;
projectSlug?: string;
}) {
const platform = getPlatform(sourceResolutionResults);
const sourceMapsDocLinks = getSourceMapsDocLinks(platform);
const successMessage = t('Uploaded source map with a matching Debug ID');
const errorMessage = t('Missing source map with a matching Debug ID');
const errorMessage = t('Missing a source map with a matching Debug ID');

if (!shouldValidate) {
return <CheckListItem status="none" title={successMessage} />;
Expand All @@ -1182,6 +1202,8 @@ function UploadedSourceMapWithCorrectDebugIdChecklistItem({
}

if (sourceResolutionResults.uploadedSomeArtifactWithDebugId) {
const debugId = sourceResolutionResults.stackFrameDebugId;

return (
<CheckListItem status="alert" title={errorMessage}>
<CheckListInstruction type="muted">
Expand All @@ -1190,15 +1212,24 @@ function UploadedSourceMapWithCorrectDebugIdChecklistItem({
{tct(
"You already uploaded artifacts with Debug IDs but none of the uploaded source maps had a Debug ID matching this stack frame's Debug ID: [debugId]",
{
debugId: (
<MonoBlock>{sourceResolutionResults.stackFrameDebugId}</MonoBlock>
),
debugId: <MonoBlock>{debugId}</MonoBlock>,
}
)}
</p>
<p>
{t(
'Make sure to inject Debug IDs into all of your source files and to upload all of them to Sentry.'
{tct(
'Check your [link:source maps settings] to verify if the bundle with this Debug ID was uploaded properly.',
{
link: (
<LinkWithIcon
to={
projectSlug
? `/settings/projects/${projectSlug}/source-maps/?query=${debugId}`
: `/settings/projects/:projectId/source-maps/?query=${debugId}`
}
/>
),
}
)}
</p>
{/* TODO: Link to Uploaded Artifacts */}
Expand Down Expand Up @@ -1465,7 +1496,6 @@ function ReleaseSourceMapMatchingChecklistItem({
return (
<CheckListItem status="alert" title={errorMessage}>
<CheckListInstruction type="muted">
<h6>{t('Missing Source Map Reference')}</h6>
<p>
{tct(
'The source file for this stack frame is missing a source map reference. A source map reference is usually represented by a [sourceMappingUrl] comment at the bottom of your source file.',
Expand Down Expand Up @@ -1704,6 +1734,14 @@ function ExternalLinkWithIcon({href, children}: PropsWithChildren<{href: string}
);
}

function LinkWithIcon({to, children}: PropsWithChildren<{to: string}>) {
return (
<Link to={to}>
{children} <IconOpen size="xs" />
</Link>
);
}

function DistCodeSnippet() {
return (
<InstructionCodeSnippet language="javascript" dark hideCopyButton>
Expand Down
Loading