2121var SockJS = require ( 'sockjs-client' ) ;
2222var stripAnsi = require ( 'strip-ansi' ) ;
2323var url = require ( 'url' ) ;
24+ var launchEditorEndpoint = require ( './launchEditorEndpoint' ) ;
2425var formatWebpackMessages = require ( './formatWebpackMessages' ) ;
25- var ansiHTML = require ( './ansiHTML' ) ;
26-
27- function createOverlayIframe ( onIframeLoad ) {
28- var iframe = document . createElement ( 'iframe' ) ;
29- iframe . id = 'react-dev-utils-webpack-hot-dev-client-overlay' ;
30- iframe . src = 'about:blank' ;
31- iframe . style . position = 'fixed' ;
32- iframe . style . left = 0 ;
33- iframe . style . top = 0 ;
34- iframe . style . right = 0 ;
35- iframe . style . bottom = 0 ;
36- iframe . style . width = '100vw' ;
37- iframe . style . height = '100vh' ;
38- iframe . style . border = 'none' ;
39- iframe . style . zIndex = 2147483647 ;
40- iframe . onload = onIframeLoad ;
41- return iframe ;
42- }
43-
44- function addOverlayDivTo ( iframe ) {
45- // TODO: unify these styles with react-error-overlay
46- iframe . contentDocument . body . style . margin = 0 ;
47- iframe . contentDocument . body . style . maxWidth = '100vw' ;
48-
49- var outerDiv = iframe . contentDocument . createElement ( 'div' ) ;
50- outerDiv . id = 'react-dev-utils-webpack-hot-dev-client-overlay-div' ;
51- outerDiv . style . width = '100%' ;
52- outerDiv . style . height = '100%' ;
53- outerDiv . style . boxSizing = 'border-box' ;
54- outerDiv . style . textAlign = 'center' ;
55- outerDiv . style . backgroundColor = 'rgb(255, 255, 255)' ;
56-
57- var div = iframe . contentDocument . createElement ( 'div' ) ;
58- div . style . position = 'relative' ;
59- div . style . display = 'inline-flex' ;
60- div . style . flexDirection = 'column' ;
61- div . style . height = '100%' ;
62- div . style . width = '1024px' ;
63- div . style . maxWidth = '100%' ;
64- div . style . overflowX = 'hidden' ;
65- div . style . overflowY = 'auto' ;
66- div . style . padding = '0.5rem' ;
67- div . style . boxSizing = 'border-box' ;
68- div . style . textAlign = 'left' ;
69- div . style . fontFamily = 'Consolas, Menlo, monospace' ;
70- div . style . fontSize = '11px' ;
71- div . style . whiteSpace = 'pre-wrap' ;
72- div . style . wordBreak = 'break-word' ;
73- div . style . lineHeight = '1.5' ;
74- div . style . color = 'rgb(41, 50, 56)' ;
75-
76- outerDiv . appendChild ( div ) ;
77- iframe . contentDocument . body . appendChild ( outerDiv ) ;
78- return div ;
79- }
80-
81- function overlayHeaderStyle ( ) {
82- return (
83- 'font-size: 2em;' +
84- 'font-family: sans-serif;' +
85- 'color: rgb(206, 17, 38);' +
86- 'white-space: pre-wrap;' +
87- 'margin: 0 2rem 0.75rem 0px;' +
88- 'flex: 0 0 auto;' +
89- 'max-height: 35%;' +
90- 'overflow: auto;'
91- ) ;
92- }
93-
94- var overlayIframe = null ;
95- var overlayDiv = null ;
96- var lastOnOverlayDivReady = null ;
97-
98- function ensureOverlayDivExists ( onOverlayDivReady ) {
99- if ( overlayDiv ) {
100- // Everything is ready, call the callback right away.
101- onOverlayDivReady ( overlayDiv ) ;
102- return ;
103- }
104-
105- // Creating an iframe may be asynchronous so we'll schedule the callback.
106- // In case of multiple calls, last callback wins.
107- lastOnOverlayDivReady = onOverlayDivReady ;
108-
109- if ( overlayIframe ) {
110- // We're already creating it.
111- return ;
112- }
113-
114- // Create iframe and, when it is ready, a div inside it.
115- overlayIframe = createOverlayIframe ( function onIframeLoad ( ) {
116- overlayDiv = addOverlayDivTo ( overlayIframe ) ;
117- // Now we can talk!
118- lastOnOverlayDivReady ( overlayDiv ) ;
119- } ) ;
120-
121- // Zalgo alert: onIframeLoad() will be called either synchronously
122- // or asynchronously depending on the browser.
123- // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
124- document . body . appendChild ( overlayIframe ) ;
125- }
26+ var ErrorOverlay = require ( 'react-error-overlay' ) ;
27+
28+ ErrorOverlay . startReportingRuntimeErrors ( {
29+ launchEditorEndpoint : launchEditorEndpoint ,
30+ onError : function ( ) {
31+ // TODO: why do we need this?
32+ if ( module . hot && typeof module . hot . decline === 'function' ) {
33+ module . hot . decline ( ) ;
34+ }
35+ } ,
36+ } ) ;
12637
127- function showErrorOverlay ( message ) {
128- ensureOverlayDivExists ( function onOverlayDivReady ( overlayDiv ) {
129- // TODO: unify this with our runtime overlay
130- overlayDiv . innerHTML =
131- '<div style="' +
132- overlayHeaderStyle ( ) +
133- '">Failed to compile</div>' +
134- '<pre style="' +
135- 'display: block; padding: 0.5em; margin-top: 0; ' +
136- 'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
137- 'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
138- '<code style="font-family: Consolas, Menlo, monospace;">' +
139- ansiHTML ( message ) +
140- '</code></pre>' +
141- '<div style="' +
142- 'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
143- 'flex: 0 0 auto">' +
144- 'This error occurred during the build time and cannot be dismissed.</div>' ;
38+ if ( module . hot && typeof module . hot . dispose === 'function' ) {
39+ module . hot . dispose ( function ( ) {
40+ // TODO: why do we need this?
41+ ErrorOverlay . stopReportingRuntimeErrors ( ) ;
14542 } ) ;
14643}
14744
148- function destroyErrorOverlay ( ) {
149- if ( ! overlayDiv ) {
150- // It is not there in the first place.
151- return ;
152- }
153-
154- // Clean up and reset internal state.
155- document . body . removeChild ( overlayIframe ) ;
156- overlayDiv = null ;
157- overlayIframe = null ;
158- lastOnOverlayDivReady = null ;
159- }
160-
16145// Connect to WebpackDevServer via a socket.
16246var connection = new SockJS (
16347 url . format ( {
@@ -205,9 +89,9 @@ function handleSuccess() {
20589 // Attempt to apply hot updates or reload.
20690 if ( isHotUpdate ) {
20791 tryApplyUpdates ( function onHotUpdateSuccess ( ) {
208- // Only destroy it when we're sure it's a hot update.
92+ // Only dismiss it when we're sure it's a hot update.
20993 // Otherwise it would flicker right before the reload.
210- destroyErrorOverlay ( ) ;
94+ ErrorOverlay . dismissBuildError ( ) ;
21195 } ) ;
21296 }
21397}
@@ -247,9 +131,9 @@ function handleWarnings(warnings) {
247131 // Only print warnings if we aren't refreshing the page.
248132 // Otherwise they'll disappear right away anyway.
249133 printWarnings ( ) ;
250- // Only destroy it when we're sure it's a hot update.
134+ // Only dismiss it when we're sure it's a hot update.
251135 // Otherwise it would flicker right before the reload.
252- destroyErrorOverlay ( ) ;
136+ ErrorOverlay . dismissBuildError ( ) ;
253137 } ) ;
254138 } else {
255139 // Print initial warnings immediately.
@@ -271,7 +155,7 @@ function handleErrors(errors) {
271155 } ) ;
272156
273157 // Only show the first error.
274- showErrorOverlay ( formatted . errors [ 0 ] ) ;
158+ ErrorOverlay . reportBuildError ( formatted . errors [ 0 ] ) ;
275159
276160 // Also log them to the console.
277161 if ( typeof console !== 'undefined' && typeof console . error === 'function' ) {
0 commit comments