Skip to content

Commit

Permalink
ref(onboarding): Convert platform flutter to new structure (#59520)
Browse files Browse the repository at this point in the history 
- relates to #56549
  • Loading branch information
@ArthurKnaus
ArthurKnaus committed Nov 7, 2023
1 parent 10d97a0 commit 9dd57fc
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 173 deletions.
1 change: 1 addition & 0 deletions static/app/gettingStartedDocs/electron/electron.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const onboarding: OnboardingConfig = {
},
],
};

const docs: Docs = {
onboarding,
};
Expand Down
33 changes: 21 additions & 12 deletions static/app/gettingStartedDocs/flutter/flutter.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import {render, screen} from 'sentry-test/reactTestingLibrary';
import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout';
import {screen} from 'sentry-test/reactTestingLibrary';
import {textWithMarkupMatcher} from 'sentry-test/utils';

import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
import docs from './flutter';

import {GettingStartedWithFlutter, steps} from './flutter';
describe('flutter onboarding docs', function () {
it('renders docs correctly', async function () {
renderWithOnboardingLayout(docs, {
releaseRegistry: {
'sentry.dart.flutter': {
version: '1.99.9',
},
},
});

describe('GettingStartedWithFlutter', function () {
it('renders doc correctly', function () {
render(<GettingStartedWithFlutter dsn="test-dsn" projectSlug="test-project" />);
// Renders main headings
expect(screen.getByRole('heading', {name: 'Install'})).toBeInTheDocument();
expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument();
expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument();

// Steps
for (const step of steps()) {
expect(
screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]})
).toBeInTheDocument();
}
// Renders SDK version from registry
expect(
await screen.findByText(textWithMarkupMatcher(/sentry_flutter: \^1\.99\.9/))
).toBeInTheDocument();
});
});
287 changes: 126 additions & 161 deletions static/app/gettingStartedDocs/flutter/flutter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,27 @@
import ExternalLink from 'sentry/components/links/externalLink';
import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
import type {
Docs,
DocsParams,
OnboardingConfig,
} from 'sentry/components/onboarding/gettingStartedDoc/types';
import {t, tct} from 'sentry/locale';
import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';

// Configuration Start
export const steps = ({
dsn,
sourcePackageRegistries,
}: Partial<
Pick<ModuleProps, 'dsn' | 'sourcePackageRegistries'>
> = {}): LayoutProps['steps'] => [
{
type: StepType.INSTALL,
description: (
<p>
{tct(
'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]',
{
pubspec: <code />,
}
)}
</p>
),
configurations: [
{
language: 'yml',
partialLoading: sourcePackageRegistries?.isLoading,
code: `
type Params = DocsParams;

const getInstallSnippet = (params: Params) => `
dependencies:
sentry_flutter: ^${
sourcePackageRegistries?.isLoading
? t('\u2026loading')
: sourcePackageRegistries?.data?.['sentry.dart.flutter']?.version ?? '7.8.0'
}
`,
},
],
},
{
type: StepType.CONFIGURE,
description: (
<p>
{tct('Import [sentryFlutter: sentry_flutter] and initialize it', {
sentryFlutter: <code />,
})}
</p>
),
configurations: [
{
language: 'dart',
code: `
sentry_flutter: ^${getPackageVersion(params, 'sentry.dart.flutter', '7.8.0')}`;

const getConfigureSnippet = (params: Params) => `
import 'package:flutter/widgets.dart';
import 'package:sentry_flutter/sentry_flutter.dart';
Future<void> main() async {
await SentryFlutter.init(
(options) {
options.dsn = '${dsn}';
options.dsn = '${params.dsn}';
// Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
// We recommend adjusting this value in production.
options.tracesSampleRate = 1.0;
Expand All @@ -66,34 +30,9 @@ Future<void> main() async {
);
// or define SENTRY_DSN via Dart environment variable (--dart-define)
}
`,
additionalInfo: (
<p>
{tct(
'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.',
{
sentryDsn: <code />,
sentryRelease: <code />,
sentryDist: <code />,
sentryEnv: <code />,
dartDefine: <code />,
}
)}
</p>
),
},
],
},
{
type: StepType.VERIFY,
description: t(
'Create an intentional error, so you can test that everything is working:'
),
configurations: [
{
language: 'dart',
code: `
}`;

const getVerifySnippet = () => `
import 'package:sentry/sentry.dart';
try {
Expand All @@ -103,31 +42,11 @@ try {
exception,
stackTrace: stackTrace,
);
}
`,
additionalInfo: (
<p>
{tct(
"If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.",
{
break: <br />,
}
)}
</p>
),
},
],
},
{
title: t('Performance'),
description: t(
"You'll be able to monitor the performance of your app using the SDK. For example:"
),
configurations: [
{
language: 'dart',
code: `
}`;

const getPerformanceSnippet = () => `
import 'package:sentry/sentry.dart';
import { getPackageVersion } from 'sentry/utils/gettingStartedDocs/getPackageVersion';
final transaction = Sentry.startTransaction('processOrderBatch()', 'task');
Expand All @@ -152,65 +71,111 @@ Future<void> processOrderBatch(ISentrySpan span) async {
} finally {
await innerSpan.finish();
}
}
`,
additionalInfo: (
<p>
{tct(
'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].',
{
perfDocs: (
<ExternalLink href="https://docs.sentry.io/platforms/flutter/performance/instrumentation/" />
),
}
)}
</p>
),
},
],
},
{
title: t('Next Steps'),
configurations: [
{
description: (
<p>
{tct(
'[debugSymbols: Debug Symbols]: We offer a range of methods to provide Sentry with debug symbols so that you can see symbolicated stack traces and triage issues faster.',
{
debugSymbols: (
<ExternalLink href="https://docs.sentry.io/platforms/flutter/upload-debug/" />
),
}
)}
</p>
),
},
{
description: (
<p>
{tct(
"[sourceContext: Source Context]: If Sentry has access to your application's source code, it can show snippets of code source context around the location of stack frames, which helps to quickly pinpoint problematic code.",
{
sourceContext: (
<ExternalLink href="https://docs.sentry.io/platforms/flutter/upload-debug/#uploading-source-context-for-flutter-android-ios-and-macos" />
),
}
)}
</p>
),
},
],
},
];
// Configuration End
}`;

export function GettingStartedWithFlutter({
dsn,
sourcePackageRegistries,
...props
}: ModuleProps) {
return <Layout steps={steps({dsn, sourcePackageRegistries})} {...props} />;
}
const onboarding: OnboardingConfig = {
install: params => [
{
type: StepType.INSTALL,
description: tct(
'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]',
{
pubspec: <code />,
}
),
configurations: [
{
language: 'yml',
partialLoading: params.sourcePackageRegistries?.isLoading,
code: getInstallSnippet(params),
},
],
},
],
configure: params => [
{
type: StepType.CONFIGURE,
description: tct('Import [sentryFlutter: sentry_flutter] and initialize it', {
sentryFlutter: <code />,
}),
configurations: [
{
language: 'dart',
code: getConfigureSnippet(params),
additionalInfo: tct(
'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.',
{
sentryDsn: <code />,
sentryRelease: <code />,
sentryDist: <code />,
sentryEnv: <code />,
dartDefine: <code />,
}
),
},
],
},
],
verify: () => [
{
type: StepType.VERIFY,
description: t(
'Create an intentional error, so you can test that everything is working:'
),
configurations: [
{
language: 'dart',
code: getVerifySnippet(),
additionalInfo: tct(
"If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.",
{
break: <br />,
}
),
},
],
},
{
title: t('Performance'),
description: t(
"You'll be able to monitor the performance of your app using the SDK. For example:"
),
configurations: [
{
language: 'dart',
code: getPerformanceSnippet(),
additionalInfo: tct(
'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].',
{
perfDocs: (
<ExternalLink href="https://docs.sentry.io/platforms/flutter/performance/instrumentation/" />
),
}
),
},
],
},
],
nextSteps: () => [
{
name: t('Debug Symbols'),
description: t(
'We offer a range of methods to provide Sentry with debug symbols so that you can see symbolicated stack traces and triage issues faster.'
),
link: 'https://docs.sentry.io/platforms/flutter/upload-debug/',
},
{
name: t('Source Context'),
description: t(
"If Sentry has access to your application's source code, it can show snippets of code source context around the location of stack frames, which helps to quickly pinpoint problematic code."
),
link: 'https://docs.sentry.io/platforms/flutter/upload-debug/#uploading-source-context-for-flutter-android-ios-and-macos',
},
],
};

const docs: Docs = {
onboarding,
};

export default GettingStartedWithFlutter;
export default docs;

0 comments on commit 9dd57fc

Please sign in to comment.