otherPlatformsInfo.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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, tct} 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="properties">
  42. {t('dsn: %s', data[0].dsn.public)}
  43. </CodeSnippet>
  44. <Suggestion>
  45. {t(
  46. 'Since it can be a lot of 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. <div>
  77. {tct(
  78. "Also there's a rich ecosystem of [link:community suported SDKs] (including NestJS, Nuxt2, Perl, CFML and Clojure).",
  79. {
  80. link: (
  81. <ExternalLink href="https://docs.sentry.io/platforms/#community-supported" />
  82. ),
  83. }
  84. )}
  85. </div>
  86. <div>
  87. {tct(
  88. 'Your favorite language or framework still cannot be found? Then we encourage you to consider [link:writing your own SDK].',
  89. {
  90. link: <ExternalLink href="https://develop.sentry.dev/sdk" />,
  91. }
  92. )}
  93. </div>
  94. </Wrapper>
  95. );
  96. }
  97. const Wrapper = styled('div')`
  98. display: flex;
  99. flex-direction: column;
  100. gap: ${space(2)};
  101. `;
  102. const Suggestion = styled(Wrapper)`
  103. gap: ${space(1)};
  104. `;