mirror of
https://github.com/Lissy93/dashy.git
synced 2024-12-24 09:22:53 +03:00
✨ Shows error details, if a critical error happens
This commit is contained in:
parent
2ce3b29ad2
commit
be513a0952
@ -1,24 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="critical-error-wrap" v-if="shouldShow">
|
||||||
class="critical-error-wrap" v-if="shouldShow">
|
<button class="close" title="Close Warning" @click="close">🗙</button>
|
||||||
<h3>Configuration Load Error</h3>
|
<h3>Configuration Load Error</h3>
|
||||||
<p>
|
<p>
|
||||||
It looks like there was an error loading the configuration.<br>
|
Dashy has failed to load correctly due to a configuration error.
|
||||||
</p>
|
</p>
|
||||||
<p>Please ensure that:</p>
|
<h4>Ensure that</h4>
|
||||||
<ul>
|
<ul>
|
||||||
<li>The configuration file can be found at the specified location</li>
|
<li>The configuration file can be found at the specified location</li>
|
||||||
<li>There are no CORS rules preventing client-side access</li>
|
<li>There are no CORS rules preventing client-side access</li>
|
||||||
<li>The YAML is valid, parsable and matches the schema</li>
|
<li>The YAML is valid, parsable and matches the schema</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<h4>Error Details</h4>
|
||||||
You can check the browser console for more details.<br>
|
<pre>{{ this.$store.state.criticalError }}</pre>
|
||||||
If this issue persists, open a ticket on our GitHub.
|
<h4>Next Steps</h4>
|
||||||
</p>
|
<ul>
|
||||||
<h4>Error Details:</h4>
|
<li>Check the browser console for more details
|
||||||
<p class="the-error">{{ this.$store.state.criticalError }}</p>
|
(<a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md#how-to-open-browser-console">see how</a>)
|
||||||
|
</li>
|
||||||
<button class="user-doesnt-care" @click="ignoreWarning">Ignore Error</button>
|
<li>View the
|
||||||
|
<a href="https://github.com/Lissy93/dashy/blob/master/docs/troubleshooting.md">Troubleshooting Guide</a>
|
||||||
|
and <a href="https://dashy.to/docs/">Docs</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
If you've verified the config is present, accessible and valid, and cannot find the solution
|
||||||
|
in the troubleshooting, docs or GitHub issues,
|
||||||
|
then <a href="https://github.com/Lissy93/dashy/issues/new/choose">open a ticket on GitHub</a>
|
||||||
|
</li>
|
||||||
|
<li>Click 'Ignore Critical Errors' below to not show this warning again</li>
|
||||||
|
</ul>
|
||||||
|
<button class="user-doesnt-care" @click="ignoreWarning">Ignore Critical Errors</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -28,24 +39,23 @@ import Keys from '@/utils/StoreMutations';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CriticalError',
|
name: 'CriticalError',
|
||||||
props: {
|
|
||||||
text: String,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
|
/* Determines if we should show this component.
|
||||||
|
* If error present AND user hasn't disabled */
|
||||||
shouldShow() {
|
shouldShow() {
|
||||||
return this.$store.state.criticalError
|
return this.$store.state.criticalError
|
||||||
&& !localStorage[localStorageKeys.DISABLE_CRITICAL_WARNING];
|
&& !localStorage[localStorageKeys.DISABLE_CRITICAL_WARNING];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/* Ignore all future errors, by putting a key in local storage */
|
||||||
ignoreWarning() {
|
ignoreWarning() {
|
||||||
this.$store.commit(Keys.CRITICAL_ERROR_MSG, null);
|
|
||||||
localStorage.setItem(localStorageKeys.DISABLE_CRITICAL_WARNING, true);
|
localStorage.setItem(localStorageKeys.DISABLE_CRITICAL_WARNING, true);
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
/* Close this dialog, by removing this error from the local store */
|
||||||
|
close() {
|
||||||
|
this.$store.commit(Keys.CRITICAL_ERROR_MSG, null);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -55,10 +65,10 @@ export default {
|
|||||||
@import '@/styles/media-queries.scss';
|
@import '@/styles/media-queries.scss';
|
||||||
.critical-error-wrap {
|
.critical-error-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30%;
|
top: 40%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
background: var(--background-darker);
|
background: var(--background-darker);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: var(--curve-factor);
|
border-radius: var(--curve-factor);
|
||||||
@ -67,33 +77,39 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
opacity: 0.95;
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
@include tablet-down {
|
@include tablet-down {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 85vw;
|
width: 85vw;
|
||||||
}
|
}
|
||||||
p, ul, h4 {
|
p, ul, h4, a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
pre {
|
||||||
|
color: var(--warning);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
overflow: auto;
|
||||||
|
background: var(--transparent-white-10);
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
}
|
||||||
h4 {
|
h4 {
|
||||||
margin-top: 1rem;
|
margin: 0.5rem 0 0 0;
|
||||||
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--danger);
|
background: var(--danger);
|
||||||
color: white;
|
color: var(--white);
|
||||||
margin: -1rem -1rem 1rem -1rem;
|
margin: -1rem -1rem 1rem -1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
.the-error {
|
|
||||||
color: var(--danger);
|
|
||||||
}
|
|
||||||
.user-doesnt-care {
|
.user-doesnt-care {
|
||||||
background: var(--background-darker);
|
background: var(--background-darker);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
@ -111,5 +127,26 @@ export default {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user