From 09e14987f02af424480911216d7bb2bd4a3537d3 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Sun, 6 Jun 2021 14:53:48 -0500
Subject: [PATCH] :bug: Display issue that view crashes with large requests

---
 .../src/components/Error/NodeViewError.vue       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/Error/NodeViewError.vue b/packages/editor-ui/src/components/Error/NodeViewError.vue
index 2c8cc2f05..ccb553246 100644
--- a/packages/editor-ui/src/components/Error/NodeViewError.vue
+++ b/packages/editor-ui/src/components/Error/NodeViewError.vue
@@ -37,10 +37,11 @@
 							<span class="box-card__subtitle">Data below may contain sensitive information. Proceed with caution when sharing.</span>
 						</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" />
 							</el-button>
 							<vue-json-pretty
+								v-if="displayCause"
 								:data="error.cause"
 								:deep="3"
 								:showLength="true"
@@ -48,6 +49,9 @@
 								path="error"
 								class="json-data"
 							/>
+							<span v-else>
+								The exact cause can sadly not displayed right now as the returned data is too large.
+							</span>
 						</div>
 					</el-card>
 				</div>
@@ -67,13 +71,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
 //@ts-ignore
 import VueJsonPretty from 'vue-json-pretty';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
-
+import {
+	MAX_DISPLAY_DATA_SIZE,
+} from '@/constants';
 
 export default mixins(
 	copyPaste,
@@ -86,6 +91,11 @@ export default mixins(
 	components: {
 		VueJsonPretty,
 	},
+	computed: {
+		displayCause(): boolean {
+			return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
+		},
+	},
 	methods: {
 		copyCause() {
 			this.copyToClipboard(JSON.stringify(this.error.cause));