🐛 Display issue that view crashes with large requests

This commit is contained in:
Jan Oberhauser 2021-06-06 14:53:48 -05:00
parent 26bdc5c924
commit 09e14987f0

View file

@ -37,10 +37,11 @@
<span class="box-card__subtitle">Data below may contain sensitive information. Proceed with caution when sharing.</span> <span class="box-card__subtitle">Data below may contain sensitive information. Proceed with caution when sharing.</span>
</div> </div>
<div> <div>
<el-button class="copy-button" @click="copyCause" circle type="text" title="Copy to clipboard"> <el-button v-if="displayCause" class="copy-button" @click="copyCause" circle type="text" title="Copy to clipboard">
<font-awesome-icon icon="copy" /> <font-awesome-icon icon="copy" />
</el-button> </el-button>
<vue-json-pretty <vue-json-pretty
v-if="displayCause"
:data="error.cause" :data="error.cause"
:deep="3" :deep="3"
:showLength="true" :showLength="true"
@ -48,6 +49,9 @@
path="error" path="error"
class="json-data" class="json-data"
/> />
<span v-else>
The exact cause can sadly not displayed right now as the returned data is too large.
</span>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -67,13 +71,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue';
//@ts-ignore //@ts-ignore
import VueJsonPretty from 'vue-json-pretty'; import VueJsonPretty from 'vue-json-pretty';
import { copyPaste } from '@/components/mixins/copyPaste'; import { copyPaste } from '@/components/mixins/copyPaste';
import { showMessage } from '@/components/mixins/showMessage'; import { showMessage } from '@/components/mixins/showMessage';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
import {
MAX_DISPLAY_DATA_SIZE,
} from '@/constants';
export default mixins( export default mixins(
copyPaste, copyPaste,
@ -86,6 +91,11 @@ export default mixins(
components: { components: {
VueJsonPretty, VueJsonPretty,
}, },
computed: {
displayCause(): boolean {
return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
},
},
methods: { methods: {
copyCause() { copyCause() {
this.copyToClipboard(JSON.stringify(this.error.cause)); this.copyToClipboard(JSON.stringify(this.error.cause));