Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
overlay.js 5.67 KiB
1 
/* @flow */
2 
import {
3 
  register as registerError,
4 
  unregister as unregisterError,
5 
} from './effects/unhandledError';
6 
import {
7 
  register as registerPromise,
8 
  unregister as unregisterPromise,
9 
} from './effects/unhandledRejection';
10 
import {
11 
  register as registerShortcuts,
12 
  unregister as unregisterShortcuts,
13 
  handler as keyEventHandler,
14 
  SHORTCUT_ESCAPE,
15 
  SHORTCUT_LEFT,
16 
  SHORTCUT_RIGHT,
17 
} from './effects/shortcuts';
18 
import {
19 
  register as registerStackTraceLimit,
20 
  unregister as unregisterStackTraceLimit,
21 
} from './effects/stackTraceLimit';
22 
import {
23 
  permanentRegister as permanentRegisterConsole,
24 
  registerReactStack,
25 
  unregisterReactStack,
26 
} from './effects/proxyConsole';
27 
import { massage as massageWarning } from './utils/warnings';
28
29 
import {
30 
  consume as consumeError,
31 
  getErrorRecord,
32 
  drain as drainErrors,
33 
} from './utils/errorRegister';
34 
import type { ErrorRecordReference } from './utils/errorRegister';
35
36 
import type { StackFrame } from './utils/stack-frame';
37 
import { iframeStyle } from './styles';
38 
import { injectCss, applyStyles } from './utils/dom/css';
39 
import { createOverlay } from './components/overlay';
40 
import { updateAdditional } from './components/additional';
41
42 
const CONTEXT_SIZE: number = 3;
43 
let iframeReference: HTMLIFrameElement | null = null;
44 
let additionalReference = null;
45 
let errorReferences: ErrorRecordReference[] = [];
46 
let currReferenceIndex: number = -1;
47
48 
const css = [
49 
  '.cra-container {',
50 
  '  padding-right: 15px;',
51 
  '  padding-left: 15px;',
52 
  '  margin-right: auto;',
53 
  '  margin-left: auto;',
54 
  '}',
55 
  '',
56 
  '@media (min-width: 768px) {',
57 
  '  .cra-container {',
58 
  '    width: calc(750px - 6em);',
59 
  '  }',
60 
  '}',
61 
  '',
62 
  '@media (min-width: 992px) {',
63 
  '  .cra-container {',
64 
  '    width: calc(970px - 6em);',
65 
  '  }',
66 
  '}',
67 
  '',
68 
  '@media (min-width: 1200px) {',
69 
  '  .cra-container {',
70 
  '    width: calc(1170px - 6em);',
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
' }', '}', ].join('\n'); function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { disposeCurrentView(); const iframe = window.document.createElement('iframe'); applyStyles(iframe, iframeStyle); iframeReference = iframe; iframe.onload = () => { if (iframeReference == null) { return; } const w = iframeReference.contentWindow; const document = iframeReference.contentDocument; const { overlay, additional } = createOverlay( document, name, message, resolvedFrames, CONTEXT_SIZE, currReferenceIndex + 1, errorReferences.length, offset => { switchError(offset); }, () => { unmount(); } ); if (w != null) { w.onkeydown = event => { keyEventHandler(type => shortcutHandler(type), event); }; } injectCss(iframeReference.contentDocument, css); if (document.body != null) { document.body.appendChild(overlay); } additionalReference = additional; }; window.document.body.appendChild(iframe); } function renderErrorByIndex(index: number) { currReferenceIndex = index; const { error, unhandledRejection, enhancedFrames } = getErrorRecord( errorReferences[index] ); if (unhandledRejection) { render( 'Unhandled Rejection (' + error.name + ')', error.message, enhancedFrames ); } else { render(error.name, error.message, enhancedFrames); } } function switchError(offset) { const nextView = currReferenceIndex + offset; if (nextView < 0 || nextView >= errorReferences.length) { return; } renderErrorByIndex(nextView);