Finally fix!
This commit is contained in:
		
							parent
							
								
									63082ac8b8
								
							
						
					
					
						commit
						5e12df2143
					
				
					 1 changed files with 111 additions and 108 deletions
				
			
		|  | @ -14,10 +14,10 @@ | |||
| // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 | ||||
| (async () => { | ||||
| 	window.onerror = (e) => { | ||||
| 		renderError('SOMETHING_HAPPENED', e); | ||||
| 		await renderError('SOMETHING_HAPPENED', e); | ||||
| 	}; | ||||
| 	window.onunhandledrejection = (e) => { | ||||
| 		renderError('SOMETHING_HAPPENED_IN_PROMISE', e); | ||||
| 		await renderError('SOMETHING_HAPPENED_IN_PROMISE', e); | ||||
| 	}; | ||||
| 
 | ||||
| 	const v = localStorage.getItem('v') || VERSION; | ||||
|  | @ -47,7 +47,7 @@ | |||
| 			localStorage.setItem('localeVersion', v); | ||||
| 		} else { | ||||
| 			await checkUpdate(); | ||||
| 			renderError('LOCALE_FETCH_FAILED'); | ||||
| 			await renderError('LOCALE_FETCH_FAILED'); | ||||
| 			return; | ||||
| 		} | ||||
| 	} | ||||
|  | @ -57,7 +57,7 @@ | |||
| 	import(`/assets/${CLIENT_ENTRY}`) | ||||
| 		.catch(async e => { | ||||
| 			await checkUpdate(); | ||||
| 			renderError('APP_FETCH_FAILED', e); | ||||
| 			await renderError('APP_FETCH_FAILED', e); | ||||
| 		}) | ||||
| 	//#endregion
 | ||||
| 
 | ||||
|  | @ -102,112 +102,16 @@ | |||
| 		document.head.appendChild(style); | ||||
| 	} | ||||
| 
 | ||||
| 	function renderError(code, details) { | ||||
| 	async function addStyle(styleText) { | ||||
| 		let css = document.createElement('style'); | ||||
| 		css.appendChild(document.createTextNode(styleText)); | ||||
| 		document.head.appendChild(css); | ||||
| 	} | ||||
| 
 | ||||
| 	async function renderError(code, details) { | ||||
| 		let errorsElement = document.getElementById('errors'); | ||||
| 
 | ||||
| 		if (!errorsElement) { | ||||
| 			document.head.insertAdjacentHTML("beforeend", ` | ||||
| 			<style> | ||||
| 			* { | ||||
| 				font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; | ||||
| 			} | ||||
| 
 | ||||
| 			body, | ||||
| 			html { | ||||
| 				background-color: #222; | ||||
| 				color: #dfddcc; | ||||
| 				justify-content: center; | ||||
| 				margin: auto; | ||||
| 				width: 80%; | ||||
| 				padding: 10px; | ||||
| 				text-align: center; | ||||
| 			} | ||||
| 
 | ||||
| 			button { | ||||
| 				border-radius: 999px; | ||||
| 				padding: 0px 12px 0px 12px; | ||||
| 				border: none; | ||||
| 				cursor: pointer; | ||||
| 				margin-bottom: 12px; | ||||
| 			} | ||||
| 
 | ||||
| 			.button-big { | ||||
| 				background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); | ||||
| 				line-height: 50px; | ||||
| 			} | ||||
| 
 | ||||
| 			.button-big:hover { | ||||
| 				background: rgb(153, 204, 0); | ||||
| 			} | ||||
| 
 | ||||
| 			.button-small { | ||||
| 				background: #444; | ||||
| 				line-height: 40px; | ||||
| 			} | ||||
| 
 | ||||
| 			.button-small:hover { | ||||
| 				background: #555; | ||||
| 			} | ||||
| 
 | ||||
| 			.button-label-big { | ||||
| 				color: #222; | ||||
| 				font-weight: bold; | ||||
| 				font-size: 20px; | ||||
| 				padding: 12px; | ||||
| 			} | ||||
| 
 | ||||
| 			.button-label-small { | ||||
| 				color: rgb(153, 204, 0); | ||||
| 				font-size: 16px; | ||||
| 				padding: 12px; | ||||
| 			} | ||||
| 
 | ||||
| 			a { | ||||
| 				color: rgb(134, 179, 0); | ||||
| 				text-decoration: none; | ||||
| 			} | ||||
| 
 | ||||
| 			p, | ||||
| 			li { | ||||
| 				font-size: 16px; | ||||
| 			} | ||||
| 
 | ||||
| 			.dont-worry, | ||||
| 			#msg { | ||||
| 				font-size: 18px; | ||||
| 			} | ||||
| 
 | ||||
| 			.icon-warning { | ||||
| 				color: #dec340; | ||||
| 				height: 4rem; | ||||
| 			} | ||||
| 
 | ||||
| 			h1 { | ||||
| 				font-size: 32px; | ||||
| 			} | ||||
| 
 | ||||
| 			code { | ||||
| 				font-family: Fira, FiraCode, monospace; | ||||
| 			} | ||||
| 
 | ||||
| 			details { | ||||
| 				background: #333; | ||||
| 				margin-bottom: 2rem; | ||||
| 				padding: 0.5rem 1rem; | ||||
| 				border-radius: 5px; | ||||
| 				justify-content: center; | ||||
| 				margin: auto; | ||||
| 			} | ||||
| 
 | ||||
| 			summary { | ||||
| 				cursor: pointer; | ||||
| 			} | ||||
| 
 | ||||
| 			summary > * { | ||||
| 				display: inline; | ||||
| 			} | ||||
| 			</style> | ||||
| 			`)
 | ||||
| 			document.documentElement.innerHTML = ` | ||||
| 			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> | ||||
|    			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||||
|  | @ -242,10 +146,109 @@ | |||
| 			`;
 | ||||
| 			errorsElement = document.getElementById('errors'); | ||||
| 		} | ||||
| 
 | ||||
| 		const detailsElement = document.createElement('details'); | ||||
| 		detailsElement.innerHTML = `<br><summary><code>ERROR CODE: ${code}</code></summary>${JSON.stringify(details)}`; | ||||
| 		errorsElement.appendChild(detailsElement); | ||||
| 		await addStyle(` | ||||
| 		* { | ||||
| 			font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; | ||||
| 		} | ||||
| 
 | ||||
| 		body, | ||||
| 		html { | ||||
| 			background-color: #222; | ||||
| 			color: #dfddcc; | ||||
| 			justify-content: center; | ||||
| 			margin: auto; | ||||
| 			width: 80%; | ||||
| 			padding: 10px; | ||||
| 			text-align: center; | ||||
| 		} | ||||
| 
 | ||||
| 		button { | ||||
| 			border-radius: 999px; | ||||
| 			padding: 0px 12px 0px 12px; | ||||
| 			border: none; | ||||
| 			cursor: pointer; | ||||
| 			margin-bottom: 12px; | ||||
| 		} | ||||
| 
 | ||||
| 		.button-big { | ||||
| 			background: linear-gradient(90deg, rgb(134, 179, 0), rgb(74, 179, 0)); | ||||
| 			line-height: 50px; | ||||
| 		} | ||||
| 
 | ||||
| 		.button-big:hover { | ||||
| 			background: rgb(153, 204, 0); | ||||
| 		} | ||||
| 
 | ||||
| 		.button-small { | ||||
| 			background: #444; | ||||
| 			line-height: 40px; | ||||
| 		} | ||||
| 
 | ||||
| 		.button-small:hover { | ||||
| 			background: #555; | ||||
| 		} | ||||
| 
 | ||||
| 		.button-label-big { | ||||
| 			color: #222; | ||||
| 			font-weight: bold; | ||||
| 			font-size: 20px; | ||||
| 			padding: 12px; | ||||
| 		} | ||||
| 
 | ||||
| 		.button-label-small { | ||||
| 			color: rgb(153, 204, 0); | ||||
| 			font-size: 16px; | ||||
| 			padding: 12px; | ||||
| 		} | ||||
| 
 | ||||
| 		a { | ||||
| 			color: rgb(134, 179, 0); | ||||
| 			text-decoration: none; | ||||
| 		} | ||||
| 
 | ||||
| 		p, | ||||
| 		li { | ||||
| 			font-size: 16px; | ||||
| 		} | ||||
| 
 | ||||
| 		.dont-worry, | ||||
| 		#msg { | ||||
| 			font-size: 18px; | ||||
| 		} | ||||
| 
 | ||||
| 		.icon-warning { | ||||
| 			color: #dec340; | ||||
| 			height: 4rem; | ||||
| 		} | ||||
| 
 | ||||
| 		h1 { | ||||
| 			font-size: 32px; | ||||
| 		} | ||||
| 
 | ||||
| 		code { | ||||
| 			font-family: Fira, FiraCode, monospace; | ||||
| 		} | ||||
| 
 | ||||
| 		details { | ||||
| 			background: #333; | ||||
| 			margin-bottom: 2rem; | ||||
| 			padding: 0.5rem 1rem; | ||||
| 			border-radius: 5px; | ||||
| 			justify-content: center; | ||||
| 			margin: auto; | ||||
| 		} | ||||
| 
 | ||||
| 		summary { | ||||
| 			cursor: pointer; | ||||
| 		} | ||||
| 
 | ||||
| 		summary > * { | ||||
| 			display: inline; | ||||
| 		} | ||||
| 		`)
 | ||||
| 	} | ||||
| 
 | ||||
| 	// eslint-disable-next-line no-inner-declarations
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue