Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
// DO NOT IMPORT window.config HERE!
// to make sure the error handler always works, we should never import `window.config`, because some user's custom template breaks it.
// This sets up the URL prefix used in webpack's chunk loading.
// This file must be imported before any lazy-loading is being attempted.
2023-08-30 21:46:44 -05:00
_ _webpack _public _path _ _ = ` ${ window . config ? . assetUrlPrefix ? ? '/assets' } / ` ;
Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
export function showGlobalErrorMessage ( msg ) {
const pageContent = document . querySelector ( '.page-content' ) ;
if ( ! pageContent ) return ;
2024-01-21 09:23:08 -05:00
// compact the message to a data attribute to avoid too many duplicated messages
const msgCompact = msg . replace ( /\W/g , '' ) . trim ( ) ;
let msgDiv = pageContent . querySelector ( ` .js-global-error[data-global-error-msg-compact=" ${ msgCompact } "] ` ) ;
if ( ! msgDiv ) {
const el = document . createElement ( 'div' ) ;
el . innerHTML = ` <div class="ui container negative message center aligned js-global-error" style="white-space: pre-line;"></div> ` ;
msgDiv = el . childNodes [ 0 ] ;
}
// merge duplicated messages into "the message (count)" format
const msgCount = Number ( msgDiv . getAttribute ( ` data-global-error-msg-count ` ) ) + 1 ;
msgDiv . setAttribute ( ` data-global-error-msg-compact ` , msgCompact ) ;
msgDiv . setAttribute ( ` data-global-error-msg-count ` , msgCount . toString ( ) ) ;
msgDiv . textContent = msg + ( msgCount > 1 ? ` ( ${ msgCount } ) ` : '' ) ;
pageContent . prepend ( msgDiv ) ;
Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
}
/ * *
* @ param { ErrorEvent } e
* /
function processWindowErrorEvent ( e ) {
2024-02-22 16:21:43 -05:00
const err = e . error ? ? e . reason ;
const assetBaseUrl = String ( new URL ( _ _webpack _public _path _ _ , window . location . origin ) ) ;
// error is likely from browser extension or inline script. Do not show these in production builds.
if ( ! err . stack ? . includes ( assetBaseUrl ) && window . config ? . runModeIsProd ) return ;
let message ;
2023-08-21 21:30:02 -05:00
if ( e . type === 'unhandledrejection' ) {
2024-02-22 16:21:43 -05:00
message = ` JavaScript promise rejection: ${ err . message } . ` ;
} else {
message = ` JavaScript error: ${ e . message } ( ${ e . filename } @ ${ e . lineno } : ${ e . colno } ). ` ;
2023-08-21 21:30:02 -05:00
}
2024-02-22 16:21:43 -05:00
2022-07-05 07:27:13 -05:00
if ( ! e . error && e . lineno === 0 && e . colno === 0 && e . filename === '' && window . navigator . userAgent . includes ( 'FxiOS/' ) ) {
// At the moment, Firefox (iOS) (10x) has an engine bug. See https://github.com/go-gitea/gitea/issues/20240
// If a script inserts a newly created (and content changed) element into DOM, there will be a nonsense error event reporting: Script error: line 0, col 0.
return ; // ignore such nonsense error event
}
2022-10-15 17:04:00 -05:00
2024-02-22 16:21:43 -05:00
showGlobalErrorMessage ( ` ${ message } Open browser console to see more details. ` ) ;
Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
}
function initGlobalErrorHandler ( ) {
2023-08-21 21:30:02 -05:00
if ( window . _globalHandlerErrors ? . _inited ) {
showGlobalErrorMessage ( ` The global error handler has been initialized, do not initialize it again ` ) ;
return ;
}
Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
if ( ! window . config ) {
showGlobalErrorMessage ( ` Gitea JavaScript code couldn't run correctly, please check your custom templates ` ) ;
}
// we added an event handler for window error at the very beginning of <script> of page head
// the handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before this init
// then in this init, we can collect all error events and show them
for ( const e of window . _globalHandlerErrors || [ ] ) {
processWindowErrorEvent ( e ) ;
}
// then, change _globalHandlerErrors to an object with push method, to process further error events directly
2023-08-21 21:30:02 -05:00
window . _globalHandlerErrors = { _inited : true , push : ( e ) => processWindowErrorEvent ( e ) } ;
Show messages for users if the ROOT_URL is wrong, show JavaScript errors (#18971)
* ROOT_URL issues: some users did wrong to there app.ini config, then:
* The assets can not be loaded (AppSubUrl != "" and users try to access http://host:3000/)
*The ROOT_URL is wrong, then many URLs in Gitea are broken.
Now Gitea show enough information to users.
* JavaScript error issues, there are many users affected by JavaScript errors, some are caused by frontend bugs, some are caused by broken customized templates. If these JS errors can be found at first time, then maintainers do not need to ask about how bug occurs again and again.
* Some people like to modify the `head.tmpl`, so we separate the script part to `head_script.tmpl`, then it's much safer.
* use specialized CSS class "js-global-error", end users still have a chance to hide error messages by customized CSS styles.
2022-03-30 00:52:24 -05:00
}
initGlobalErrorHandler ( ) ;