index.tsx 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // This is the entry point of Sentry's frontend application. Want to
  2. // understand how app boots? Read on!
  3. //
  4. // 1. Load the `bootstrap` and `initializeMain` functions
  5. //
  6. // a. Execute and wait for `bootstrap` to complete.
  7. //
  8. // Bootstrapping loads early-runtime configuration. See the
  9. // client_config.py backend view for more details.
  10. //
  11. // Bootstrapping will do different things depending on if the app is
  12. // running in SPA mode vs being booted from the django rendered layout
  13. // template.
  14. //
  15. // - SPA mode loads client-config via a HTTP request.
  16. // - Django rendered mode loads client-config from a window global.
  17. //
  18. // 2. Once the app has been bootstrapped with the client-config data we can
  19. // initialize the app.
  20. //
  21. // a. The locale module will be initialized using `initializeLocale`. See this
  22. // function in app/bootstrap/initializeLocale to understand the priority
  23. // for how it determines the locale
  24. //
  25. // This also handles lazily loading non English locale files if needed.
  26. // There is no English locale file as our locale strings are keyed using
  27. // the English strings.
  28. //
  29. // b. Call `initalizeApp`, which starts most everything else
  30. //
  31. // 3. App initialization does the following...
  32. //
  33. // a. Initialize the ConfigStore with client-config data.
  34. //
  35. // b. Initialize the Sentry SDK. This includes setting up integrations for
  36. // routing and tracing.
  37. //
  38. // c. The <Main /> component is rendered. See step 4 for more details.
  39. //
  40. // d. Run global init-queue tasks. These are essentially functions registered
  41. // in the `window.__onSentryInit` array from outside of the app. This is
  42. // specifically for old-style pages rendered as django templates, but
  43. // still need React frontend components.
  44. //
  45. // This also includes exporting some globals into the window.
  46. //
  47. // 4. Once the app is fully initialized we begin rendering React components. To
  48. // understand the rendering tree from this point forward it's best to follow
  49. // the component tree from <Main />
  50. //
  51. // For a quick overview, here's what most render trees will look like:
  52. //
  53. // <ThemeAndStyleProvider> <-- Provides emotions theme in context
  54. // |
  55. // <Router> <-- Matches URLs and renders nested views
  56. // |
  57. // <App> <-- The App view handles initializing basic
  58. // | parts of the application (such as loading
  59. // | your org list)
  60. // |
  61. // <OrganizationDetails> <-- Most routes live within the
  62. // OrganizationDetails, which handles loading
  63. // details for the org, projects, and teams.
  64. //
  65. //
  66. // Did you read through this whole thing and don't even work here? [1]
  67. //
  68. // [1]: https://sentry.io/careers/
  69. async function app() {
  70. // We won't need initalizeMainImport until we complete bootstrapping.
  71. // Initaite the fetch, just don't await it until we need it.
  72. const initalizeMainImport = import('sentry/bootstrap/initializeMain');
  73. const bootstrapImport = import('sentry/bootstrap');
  74. const {bootstrap} = await bootstrapImport;
  75. const config = await bootstrap();
  76. const {initializeMain} = await initalizeMainImport;
  77. initializeMain(config);
  78. }
  79. app();