feat(onboarding): Add logs onboarding for React Native

[antonis]

Adds logs onboarding documentation for React Native SDK.

See https://docs.sentry.io/platforms/react-native/logs/

Part of getsentry/sentry-react-native#5610

To test:

• Get Cookie sync and sync cookies
• Visit Vercel Preview at https://sentry-j5iz9nq62.sentry.dev/explore/logs/?guidedStep=1

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[lucas-zimerman]

Looking good! I don't have power to approve here but have a 👍 :D

[priscilawebdev]

I’d suggest moving this test into its own file (logs.spec.tsx) and focusing on testing what the user sees in the UI rather than implementation details. That’s one of the core ideas behind React Testing Library 🙂

This approach would also make the test more resilient - for example, if we rename a property like verify, the test wouldn’t need to be updated.

I just noticed that we do not have a test utility for the stepper onboarding like we have for the main onboarding renderWithOnboardingLayout, so you would need to do something like:

import {OrganizationFixture} from 'sentry-fixture/organization';
import {ProjectFixture} from 'sentry-fixture/project';
import {ProjectKeysFixture} from 'sentry-fixture/projectKeys';

import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';

import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {LogsTabOnboarding} from 'sentry/views/explore/logs/logsOnboarding';

function renderMockRequests({
  organization,
  project,
}: {
  organization: Organization;
  project: Project;
}) {
  MockApiClient.addMockResponse({
    url: `/projects/${organization.slug}/${project.slug}/keys/`,
    method: 'GET',
    body: [ProjectKeysFixture()[0]],
  });
  MockApiClient.addMockResponse({
    url: `/subscriptions/${organization.slug}/`,
    method: 'GET',
    body: {},
  });
  MockApiClient.addMockResponse({
    url: `/organizations/${organization.slug}/sdks/`,
    method: 'GET',
    body: [],
  });
  MockApiClient.addMockResponse({
    url: `/organizations/${organization.slug}/stats_v2/`,
    method: 'GET',
    body: {},
  });
}

describe('getting started with react-native', () => {
  it('shows React Native logs onboarding content', async () => {
    const organization = OrganizationFixture();
    const project = ProjectFixture({platform: 'react-native'});
    renderMockRequests({organization, project});

    render(
      <LogsTabOnboarding
        datePageFilterProps={{}}
        organization={organization}
        project={project}
      />
    );

    expect(await screen.findByRole('heading', {name: /install/i})).toBeInTheDocument();
    expect(screen.getByRole('heading', {name: /configure/i})).toBeInTheDocument();
    expect(screen.getByRole('heading', {name: /verify/i})).toBeInTheDocument();

    // Goes to the configure step
    await userEvent.click(screen.getByRole('button', {name: 'Next'}));
    expect(await screen.findByText(/enableLogs: true/)).toBeInTheDocument();

    // Goes to the verify step
    await userEvent.click(screen.getByRole('button', {name: 'Next'}));
    expect(await screen.findByText(/Send a test log/)).toBeInTheDocument();
  });
});

It would be great if we could apply a similar approach to the metrics test in the same file as well (in a separate PR 🙏)

[antonis]

Thank you for the feedback @priscilawebdev! I really appreciate this 🙇
Updated with 3bb9829

It would be great if we could apply a similar approach to the metrics test in the same file as well (in a separate PR 🙏)

Opened a separate PR #107764

[philipphofmann]

LGTM

[priscilawebdev]

🚀