otherPlatformsInfo.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import styled from '@emotion/styled';
  2. import {CodeSnippet} from 'sentry/components/codeSnippet';
  3. import ExternalLink from 'sentry/components/links/externalLink';
  4. import List from 'sentry/components/list';
  5. import ListItem from 'sentry/components/list/listItem';
  6. import LoadingError from 'sentry/components/loadingError';
  7. import LoadingIndicator from 'sentry/components/loadingIndicator';
  8. import {t} from 'sentry/locale';
  9. import {space} from 'sentry/styles/space';
  10. import type {Project, ProjectKey} from 'sentry/types';
  11. import {useApiQuery} from 'sentry/utils/queryClient';
  12. import useOrganization from 'sentry/utils/useOrganization';
  13. export function OtherPlatformsInfo({
  14. projectSlug,
  15. platform,
  16. }: {
  17. platform: string;
  18. projectSlug: Project['slug'];
  19. }) {
  20. const organization = useOrganization();
  21. const {
  22. data = [],
  23. isError,
  24. isLoading,
  25. refetch,
  26. } = useApiQuery<ProjectKey[]>([`/projects/${organization.slug}/${projectSlug}/keys/`], {
  27. staleTime: Infinity,
  28. });
  29. if (isLoading) {
  30. return <LoadingIndicator />;
  31. }
  32. if (isError) {
  33. return <LoadingError onRetry={refetch} />;
  34. }
  35. return (
  36. <Wrapper>
  37. {t(
  38. "We cannot provide instructions for '%s' projects. However, please find below the DSN key for this project, which is required to instrument Sentry.",
  39. platform
  40. )}
  41. <CodeSnippet dark language="bash">
  42. {t('dsn: %s', data[0].dsn.public)}
  43. </CodeSnippet>
  44. <Suggestion>
  45. {t(
  46. 'Since it can be a lot work creating a Sentry SDK from scratch, we suggest you review the following SDKs which are applicable for a wide variety of applications:'
  47. )}
  48. <List symbol="bullet">
  49. <ListItem>
  50. <ExternalLink href="https://docs.sentry.io/platforms/javascript/">
  51. Browser JavaScript
  52. </ExternalLink>
  53. </ListItem>
  54. <ListItem>
  55. <ExternalLink href="https://docs.sentry.io/platforms/python/">
  56. Python
  57. </ExternalLink>
  58. </ListItem>
  59. <ListItem>
  60. <ExternalLink href="https://docs.sentry.io/platforms/node/">
  61. Node.js
  62. </ExternalLink>
  63. </ListItem>
  64. <ListItem>
  65. <ExternalLink href="https://docs.sentry.io/platforms/dotnet/">
  66. .NET
  67. </ExternalLink>
  68. </ListItem>
  69. <ListItem>
  70. <ExternalLink href="https://docs.sentry.io/platforms/java/">
  71. JAVA
  72. </ExternalLink>
  73. </ListItem>
  74. </List>
  75. </Suggestion>
  76. </Wrapper>
  77. );
  78. }
  79. const Wrapper = styled('div')`
  80. display: flex;
  81. flex-direction: column;
  82. gap: ${space(2)};
  83. `;
  84. const Suggestion = styled(Wrapper)`
  85. gap: ${space(1)};
  86. `;