routeError.tsx 4.3 KB

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