routeError.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import {Component} from 'react';
  2. import {withRouter, WithRouterProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import * as Sentry from '@sentry/react';
  5. import Alert from 'sentry/components/alert';
  6. import List from 'sentry/components/list';
  7. import ListItem from 'sentry/components/list/listItem';
  8. import {IconWarning} from 'sentry/icons';
  9. import {t, tct} from 'sentry/locale';
  10. import space from 'sentry/styles/space';
  11. import {Organization, Project} from 'sentry/types';
  12. import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
  13. import withOrganization from 'sentry/utils/withOrganization';
  14. import withProject from 'sentry/utils/withProject';
  15. type Props = WithRouterProps & {
  16. organization: Organization;
  17. /**
  18. * Disable logging to Sentry
  19. */
  20. disableLogSentry?: boolean;
  21. disableReport?: boolean;
  22. error?: Error;
  23. project?: Project;
  24. };
  25. class RouteError extends Component<Props> {
  26. UNSAFE_componentWillMount() {
  27. const {error} = this.props;
  28. const {disableLogSentry, disableReport, organization, project, routes} = this.props;
  29. if (disableLogSentry) {
  30. return;
  31. }
  32. if (!error) {
  33. return;
  34. }
  35. const route = getRouteStringFromRoutes(routes);
  36. const enrichScopeContext = scope => {
  37. scope.setExtra('route', route);
  38. scope.setExtra('orgFeatures', (organization && organization.features) || []);
  39. scope.setExtra('orgAccess', (organization && organization.access) || []);
  40. scope.setExtra('projectFeatures', (project && project.features) || []);
  41. return scope;
  42. };
  43. if (route) {
  44. /**
  45. * Unexpectedly, error.message would sometimes not have a setter property, causing another exception to be thrown,
  46. * and losing the original error in the process. Wrapping the mutation in a try-catch in an attempt to preserve
  47. * the original error for logging.
  48. * See https://github.com/getsentry/sentry/issues/16314 for more details.
  49. */
  50. try {
  51. error.message = `${error.message}: ${route}`;
  52. } catch (e) {
  53. Sentry.withScope(scope => {
  54. enrichScopeContext(scope);
  55. Sentry.captureException(e);
  56. });
  57. }
  58. }
  59. // TODO(dcramer): show something in addition to embed (that contains it?)
  60. // throw this in a timeout so if it errors we don't fall over
  61. this._timeout = window.setTimeout(() => {
  62. Sentry.withScope(scope => {
  63. enrichScopeContext(scope);
  64. Sentry.captureException(error);
  65. });
  66. if (!disableReport) {
  67. Sentry.showReportDialog();
  68. }
  69. });
  70. }
  71. componentWillUnmount() {
  72. if (this._timeout) {
  73. window.clearTimeout(this._timeout);
  74. }
  75. document.querySelector('.sentry-error-embed-wrapper')?.remove();
  76. }
  77. private _timeout: undefined | number;
  78. render() {
  79. // TODO(dcramer): show additional resource links
  80. return (
  81. <Alert icon={<IconWarning size="md" />} type="error">
  82. <Heading>
  83. <span>{t('Oops! Something went wrong')}</span>
  84. </Heading>
  85. <p>
  86. {t(`
  87. It looks like you've hit an issue in our client application. Don't worry though!
  88. We use Sentry to monitor Sentry and it's likely we're already looking into this!
  89. `)}
  90. </p>
  91. <p>{t("If you're daring, you may want to try the following:")}</p>
  92. <List symbol="bullet">
  93. {window && window.adblockSuspected && (
  94. <ListItem>
  95. {t(
  96. "We detected something AdBlock-like. Try disabling it, as it's known to cause issues."
  97. )}
  98. </ListItem>
  99. )}
  100. <ListItem>
  101. {tct(`Give it a few seconds and [link:reload the page].`, {
  102. link: (
  103. <a
  104. onClick={() => {
  105. window.location.href = window.location.href;
  106. }}
  107. />
  108. ),
  109. })}
  110. </ListItem>
  111. <ListItem>
  112. {tct(`If all else fails, [link:contact us] with more details.`, {
  113. link: <a href="https://github.com/getsentry/sentry/issues/new/choose" />,
  114. })}
  115. </ListItem>
  116. </List>
  117. </Alert>
  118. );
  119. }
  120. }
  121. const Heading = styled('h3')`
  122. display: flex;
  123. align-items: center;
  124. font-size: ${p => p.theme.headerFontSize};
  125. font-weight: normal;
  126. margin-bottom: ${space(1.5)};
  127. `;
  128. export default withRouter(withOrganization(withProject(RouteError)));
  129. export {RouteError};