feat(console): table error component (#442)

* feat(console): table error component

* fix: pr

packages/console/src/assets/images/table-error.svg

@@ -0,0 +1,37 @@
+<svg width="151" height="110" viewBox="0 0 151 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_307_1353)">
+<path d="M50.4734 106.868C45.8945 106.868 41.3225 106.797 36.7574 106.656C30.2344 106.454 23.4892 106.246 17.2198 103.249C12.8341 101.153 8.94993 97.7908 5.98723 93.5247C4.03267 90.6883 2.57705 87.5436 1.68228 84.2242C1.24457 82.6274 0.926928 81.0005 0.731988 79.357C0.198135 74.917 0.576405 70.4157 1.84397 66.1247C2.45954 64.0714 3.29828 62.0906 4.34541 60.2172C8.91741 52.0588 17.2564 46.5823 27.2242 45.192C27.3067 45.1828 27.3898 45.1813 27.4725 45.1875C27.5173 45.1895 27.562 45.1917 27.6076 45.1901L27.6662 45.174C27.8174 45.1288 27.9717 45.0947 28.1279 45.0719C43.501 43.0998 59.7525 47.0901 75.1244 56.611C87.01 63.9736 102.762 67.9382 123.28 68.7314L123.571 68.7446C129.283 69.0273 134.808 71.0565 139.549 74.613C144.182 78.0605 147.711 82.7642 149.711 88.1568C149.953 88.8091 150.175 89.4881 150.37 90.1749C150.74 91.4737 150.311 92.7862 149.192 93.7852V93.7865L149.141 93.8318C149.018 93.9371 148.889 94.0382 148.756 94.1323L148.601 94.2429C147.29 95.1736 146.254 95.9089 145.015 96.4799C144.178 96.8615 143.3 97.1471 142.398 97.3311C137.398 98.3816 132.321 99.3554 127.306 100.226C117.569 101.918 107.574 103.313 97.6012 104.374C81.9478 106.036 66.2161 106.869 50.4734 106.868ZM27.3559 45.4764C27.3253 45.4762 27.2947 45.478 27.2644 45.4818C17.3897 46.859 9.12969 52.2818 4.60303 60.3594C3.56623 62.2142 2.73579 64.1754 2.12634 66.2083C0.870261 70.4611 0.495517 74.9223 1.02472 79.3227C1.21795 80.9518 1.53279 82.5644 1.96666 84.1472C2.85268 87.4348 4.29418 90.5495 6.22988 93.3588C9.16358 97.583 13.0081 100.912 17.3478 102.986C23.5609 105.955 30.2742 106.163 36.7666 106.364C57.063 106.989 77.3788 106.227 97.5697 104.083C107.536 103.023 117.524 101.629 127.256 99.9378C132.266 99.068 137.34 98.0948 142.337 97.045C143.217 96.8655 144.074 96.5869 144.89 96.2146C146.105 95.6551 147.131 94.9269 148.429 94.005L148.585 93.8946C148.699 93.8136 148.81 93.7271 148.917 93.6371L148.948 93.6094C150.015 92.6825 150.43 91.4596 150.086 90.2544V90.2542C149.893 89.5748 149.674 88.9031 149.434 88.2575C145.414 77.3278 135.015 69.6038 123.557 69.0367L123.267 69.0236C113.895 68.6612 105.693 67.6573 98.195 65.9543C89.2438 63.9215 81.4292 60.8613 74.9683 56.8591C59.655 47.3746 43.4714 43.3992 28.1655 45.362C28.0231 45.3831 27.8826 45.4145 27.7449 45.4559L27.6392 45.4814C27.5783 45.4846 27.5185 45.4822 27.459 45.4796C27.4236 45.478 27.3894 45.4764 27.3559 45.4764Z" fill="#F0F0F0"/>
+<path d="M149.044 93.7196V93.7211C148.925 93.8234 148.8 93.9214 148.67 94.0135C146.507 95.5503 145.029 96.628 142.367 97.188C137.356 98.2408 132.328 99.2054 127.281 100.082C117.435 101.793 107.536 103.175 97.5851 104.229C77.3877 106.377 57.0648 107.14 36.7616 106.51C30.0002 106.301 23.4789 106.078 17.2834 103.117C12.7547 100.953 8.94951 97.5331 6.10817 93.4418C3.22704 89.2934 1.4748 84.3846 0.87793 79.3399C2.28083 78.7324 3.77128 78.3475 5.29468 78.1993C10.5824 77.6993 15.7861 79.6206 20.5949 81.8564C25.4051 84.0907 30.1284 86.7023 35.3365 87.7332C43.0116 89.2524 50.9344 87.1863 58.2927 84.5411C65.651 81.8959 72.8943 78.6292 80.6549 77.6305C91.0638 76.2896 101.508 79.1279 111.615 81.9383C122.38 84.9315 133.146 87.9252 143.913 90.9194C145.452 91.3464 147.048 91.8041 148.247 92.851C148.545 93.1103 148.812 93.4016 149.044 93.7196Z" fill="#E6E6E6"/>
+<path d="M149.045 93.7196V93.7211C148.925 93.8234 148.8 93.9214 148.67 94.0135C147.315 94.9757 146.228 95.7594 144.952 96.3472C140.565 96.7757 136.172 97.1466 131.773 97.46C120.45 98.2657 109.105 98.6941 97.7386 98.7453C74.6793 98.8623 50.4351 99.5788 30.2451 88.4658C23.527 84.768 13.7954 92.3509 7.14004 88.2961C5.22166 87.1235 3.43904 85.7451 1.82433 84.1858C1.38824 82.596 1.07198 80.9762 0.878195 79.3399C0.343941 74.9197 0.720481 70.4379 1.98496 66.1666C2.59673 64.1232 3.43137 62.1521 4.47408 60.2883C7.56595 61.3894 10.5311 62.9745 13.3533 64.6531C18.529 67.7282 23.5617 71.2201 29.3255 72.9806C37.8215 75.5761 47.0131 74.1489 55.6343 72.0024C64.2556 69.8558 72.8194 66.9956 81.7045 66.7544C93.621 66.4312 105.091 70.834 116.184 75.1667C127.312 79.5139 138.441 83.8607 149.572 88.2069C149.817 88.8664 150.036 89.5356 150.228 90.2146C150.622 91.5949 150.051 92.8452 149.045 93.7196Z" fill="#F2F2F2"/>
+<path d="M40.5444 37.5836C38.8684 36.4625 39.0323 34.0097 40.8047 33.0456C40.8408 33.0259 40.8762 33.0057 40.9108 32.9847C40.9997 32.5626 41.0885 32.1405 41.1773 31.7184C41.7002 32.2573 42.7283 32.1556 43.1337 31.5249C41.7203 28.5335 39.8617 25.7699 37.6202 23.3268C37.1316 22.7916 36.8575 22.0974 36.8496 21.3753C36.8417 20.6532 37.1006 19.9533 37.5774 19.4077C37.586 19.3978 37.5945 19.3878 37.6029 19.3777C38.8686 18.9536 40.0672 18.3531 41.1626 17.5942C37.4061 11.6058 30.2429 6.84834 28.5403 0C23.4182 5.45777 22.8432 7.37995 17.721 12.8377C17.721 12.8377 12.8709 17.1802 11.824 19.5139C12.0812 19.782 14.3841 20.4253 14.4726 20.9524C16.2288 21.0921 19.2714 19.1821 19.2714 19.1821C19.2714 19.1821 12.6305 26.2069 10.6143 30.5338C10.4327 30.9234 10.2603 31.3684 10.4124 31.7702C10.5338 32.0911 10.9694 32.2761 11.25 32.1486C10.9148 32.4693 10.6457 32.8517 10.4577 33.2743C11.0427 33.645 11.7367 33.8091 12.4274 33.7401C13.1181 33.6711 13.7652 33.373 14.264 32.894C13.9832 33.4146 13.7023 33.9352 13.4215 34.4557L13.422 34.457C13.8014 34.58 14.1419 34.7991 14.4098 35.0926C14.6777 35.3862 14.8638 35.744 14.9497 36.1308C15.0356 36.5175 15.0183 36.9198 14.8996 37.2979C14.7808 37.676 14.5647 38.0168 14.2725 38.2866C12.5298 39.8948 10.9374 41.5852 10.3539 42.6984C9.80501 43.7456 15.4411 45.008 16.7088 44.9562C17.9765 44.9045 19.1614 44.3518 20.3064 43.8094C20.2506 44.3274 20.3504 44.8502 20.5934 45.312C21.2204 45.463 21.8715 45.4881 22.5085 45.386C23.1455 45.2838 23.7554 45.0564 24.3026 44.717C24.252 45.753 25.5691 46.325 26.4832 46.0317C26.0268 53.1952 26.3607 63.2545 26.7991 73.6971H27.887V46.4447C28.1764 46.5902 28.486 46.6923 28.8057 46.7477C31.0313 47.1397 33.7171 47.378 35.1653 45.656C36.8321 47.3236 39.8867 47.292 41.5439 45.6302C41.3808 45.9169 41.6304 46.3993 41.9997 46.4754C42.4348 46.565 42.8582 46.3084 43.2277 46.0633C44.9003 44.9538 46.5729 43.8442 48.2456 42.7347C46.1815 41.3541 43.2494 39.3929 40.5444 37.5836Z" fill="#E6E6E6"/>
+<path d="M90.7543 34.2498C93.6551 34.2498 96.0067 31.9166 96.0067 29.0384C96.0067 26.1602 93.6551 23.827 90.7543 23.827C87.8535 23.827 85.502 26.1602 85.502 29.0384C85.502 31.9166 87.8535 34.2498 90.7543 34.2498Z" fill="#F2F2F2"/>
+<path d="M102.51 26.571C102.207 25.5613 101.348 24.9022 100.311 24.7576C100.3 24.756 100.289 24.7581 100.278 24.7574C100.263 24.753 100.248 24.7495 100.233 24.7472C98.7638 24.5695 97.2774 24.8905 96.0157 25.658C94.7999 26.411 93.3836 26.7516 91.9514 26.807C91.943 26.8073 91.9345 26.8077 91.9261 26.8081C91.3938 26.8433 90.8854 27.0404 90.47 27.3726C90.0546 27.7047 89.7525 28.1559 89.6048 28.6645C89.5891 28.7268 89.5938 28.7924 89.6182 28.8518C89.6425 28.9113 89.6854 28.9615 89.7404 28.9951C89.8991 29.1285 90.087 29.2232 90.2892 29.2715C90.7254 29.3632 91.1632 29.4472 91.6025 29.5235C92.4597 29.6723 93.3215 29.7927 94.1877 29.8845C95.946 30.0715 97.7152 30.1378 99.4827 30.0831C100.071 30.0649 100.639 30.0455 101.179 29.7877C101.571 29.5954 101.906 29.3052 102.151 28.9454C102.382 28.5997 102.534 28.2079 102.596 27.7977C102.658 27.3875 102.629 26.9688 102.51 26.571Z" fill="#E6E6E6"/>
+<path d="M91.5934 33.5195C91.2896 32.5099 90.4313 31.8508 89.3943 31.7062C89.3829 31.7046 89.372 31.7067 89.3607 31.706C89.346 31.7015 89.331 31.6981 89.3159 31.6957C87.8468 31.5181 86.3604 31.8391 85.0987 32.6065C83.883 33.3596 82.4666 33.7002 81.0345 33.7555C81.0261 33.7558 81.0176 33.7562 81.0091 33.7566C80.4768 33.7918 79.9683 33.9889 79.553 34.3211C79.1376 34.6533 78.8355 35.1044 78.6878 35.613C78.6721 35.6753 78.6768 35.7409 78.7012 35.8004C78.7256 35.8598 78.7684 35.91 78.8235 35.9437C78.9821 36.0771 79.17 36.1717 79.3722 36.22C79.8084 36.3117 80.2462 36.3957 80.6855 36.472C81.5427 36.6209 82.4045 36.7412 83.2707 36.8331C85.029 37.02 86.7982 37.0864 88.5658 37.0317C89.1544 37.0135 89.7221 36.9941 90.2615 36.7363C90.6539 36.5439 90.9892 36.2537 91.2344 35.894C91.4653 35.5482 91.6171 35.1565 91.6792 34.7462C91.7412 34.336 91.7119 33.9173 91.5934 33.5195Z" fill="#E6E6E6"/>
+<path d="M136.041 55.2767C134.365 54.1557 134.529 51.7028 136.302 50.7387C136.338 50.7191 136.373 50.6988 136.408 50.6778C136.497 50.2557 136.586 49.8336 136.674 49.4116C137.197 49.9504 138.225 49.8487 138.631 49.218C137.217 46.2266 135.359 43.463 133.117 41.0199C132.629 40.4847 132.355 39.7905 132.347 39.0684C132.339 38.3463 132.598 37.6464 133.075 37.1008C133.083 37.0909 133.092 37.0809 133.1 37.0708C134.366 36.6467 135.564 36.0462 136.66 35.2873C132.903 29.2989 125.74 24.5415 124.037 17.6931C118.915 23.1509 118.34 25.0731 113.218 30.5308C113.218 30.5308 108.368 34.8733 107.321 37.207C107.578 37.4751 109.881 38.1184 109.97 38.6455C111.726 38.7852 114.768 36.8753 114.768 36.8753C114.768 36.8753 108.128 43.9 106.111 48.2269C105.93 48.6166 105.757 49.0615 105.909 49.4633C106.031 49.7842 106.467 49.9692 106.747 49.8417C106.412 50.1625 106.143 50.5448 105.955 50.9675C106.54 51.3382 107.234 51.5023 107.924 51.4332C108.615 51.3642 109.262 51.0661 109.761 50.5871C109.48 51.1077 109.199 51.6283 108.919 52.1489L108.919 52.1501C109.298 52.2731 109.639 52.4922 109.907 52.7857C110.175 53.0793 110.361 53.4371 110.447 53.8239C110.533 54.2106 110.515 54.6129 110.397 54.991C110.278 55.3691 110.062 55.7099 109.77 55.9798C108.027 57.5879 106.434 59.2783 105.851 60.3915C105.302 61.4388 110.938 62.7011 112.206 62.6494C113.474 62.5976 114.658 62.0449 115.803 61.5025C115.748 62.0205 115.848 62.5433 116.09 63.0051C116.717 63.1561 117.369 63.1813 118.006 63.0791C118.643 62.9769 119.252 62.7495 119.8 62.4101C119.749 63.4461 121.066 64.0182 121.98 63.7248C121.524 70.8884 121.858 80.9476 122.296 91.3902H123.384V64.1378C123.673 64.2833 123.983 64.3855 124.303 64.4408C126.528 64.8328 129.214 65.0711 130.662 63.3491C132.329 65.0168 135.384 64.9851 137.041 63.3233C136.878 63.61 137.127 64.0925 137.497 64.1685C137.932 64.2581 138.355 64.0015 138.725 63.7564C140.397 62.6469 142.07 61.5374 143.743 60.4278C141.679 59.0472 138.746 57.086 136.041 55.2767Z" fill="#E6E6E6"/>
+<path d="M9.77997 83.058C9.88904 83.063 9.99701 83.0345 10.0893 82.9766C10.1815 82.9186 10.2536 82.834 10.2957 82.734C10.3378 82.6341 10.3479 82.5237 10.3247 82.4178C10.3015 82.312 10.2461 82.2158 10.1659 82.1422C10.1525 82.0893 10.1428 82.0513 10.1294 81.9983C10.1342 81.9868 10.139 81.9753 10.1439 81.9638C10.2538 81.7062 10.4379 81.4867 10.6731 81.3327C10.9083 81.1787 11.1842 81.0971 11.466 81.0981C11.7479 81.0991 12.0231 81.1828 12.2572 81.3385C12.4912 81.4943 12.6737 81.7152 12.7816 81.9735C13.2131 83.0044 13.7623 84.0372 13.8976 85.1272C13.9571 85.609 13.932 86.0975 13.8233 86.5708C14.8366 84.3777 15.3628 81.994 15.3661 79.5814C15.3664 78.976 15.3325 78.3711 15.2646 77.7694C15.2085 77.2762 15.1307 76.7865 15.0312 76.3002C14.4881 73.6621 13.3221 71.1895 11.6288 69.0853C10.8093 68.6416 10.1465 67.9594 9.72984 67.1305C9.57888 66.8325 9.47219 66.5144 9.41309 66.1861C9.50553 66.1981 9.59949 66.2056 9.69194 66.2117C9.72074 66.2132 9.75105 66.2147 9.77985 66.2162L9.79071 66.2167C9.89231 66.2212 9.99307 66.1965 10.0808 66.1455C10.1686 66.0945 10.2397 66.0195 10.2855 65.9293C10.3312 65.8392 10.3498 65.7379 10.3389 65.6376C10.328 65.5373 10.2881 65.4422 10.224 65.3638C10.1841 65.3151 10.1441 65.2664 10.1042 65.2177C10.0435 65.1425 9.98142 65.0688 9.9208 64.9936C9.9138 64.9865 9.90722 64.9789 9.90109 64.9711C9.83137 64.8853 9.76166 64.8011 9.69194 64.7154C9.8192 64.5195 9.99036 64.3553 10.1921 64.2357C10.8907 63.8297 11.8546 64.1109 12.3593 64.738C12.8655 65.365 12.961 66.2447 12.7852 67.0282C12.6123 67.6948 12.3263 68.3274 11.9395 68.8988C11.9774 68.947 12.0168 68.9936 12.0547 69.0417C12.7473 69.9254 13.351 70.8743 13.857 71.8748C13.7339 70.7539 13.8808 69.6201 14.2856 68.5665C14.6958 67.5847 15.4646 66.7577 16.1417 65.9089C16.955 64.8893 18.6227 65.3343 18.766 66.6267C18.7674 66.6393 18.7687 66.6518 18.7701 66.6643C18.6695 66.7206 18.571 66.7803 18.4747 66.8435C18.3537 66.9237 18.26 67.0384 18.2057 67.1723C18.1515 67.3063 18.1393 67.4535 18.1708 67.5944C18.2023 67.7354 18.2759 67.8637 18.3821 67.9624C18.4883 68.0611 18.6221 68.1257 18.7659 68.1477L18.7807 68.15C18.7448 68.5096 18.6815 68.866 18.5912 69.2161C18.3296 70.1935 17.8673 71.1068 17.2333 71.8986C16.5993 72.6904 15.8073 73.3437 14.9069 73.8176C14.8478 73.8477 14.7902 73.8777 14.7311 73.9063C15.0023 74.6646 15.2191 75.4409 15.3798 76.2296C15.5235 76.925 15.6237 77.6286 15.6798 78.3363C15.7486 79.2279 15.7445 80.1235 15.6677 81.0145L15.6723 80.9829C15.8663 79.9922 16.3989 79.0983 17.1802 78.4521C18.3407 77.5062 19.9802 77.1579 21.2322 76.3977C21.3652 76.3129 21.5199 76.2677 21.678 76.2673C21.8361 76.2669 21.9911 76.3114 22.1245 76.3955C22.258 76.4796 22.3644 76.5998 22.4313 76.742C22.4982 76.8842 22.5226 77.0424 22.5019 77.1979C22.5002 77.2089 22.4985 77.22 22.4968 77.2311C22.3101 77.3065 22.1284 77.3934 21.9527 77.4912C21.8521 77.5475 21.7537 77.6073 21.6573 77.6704C21.5363 77.7507 21.4426 77.8653 21.3884 77.9993C21.3341 78.1333 21.3219 78.2804 21.3534 78.4214C21.3849 78.5623 21.4586 78.6906 21.5648 78.7893C21.671 78.8881 21.8047 78.9526 21.9486 78.9747L21.9633 78.9769C21.9739 78.9784 21.983 78.9799 21.9936 78.9814C21.6747 79.7369 21.2272 80.4322 20.6705 81.037C19.9829 81.7691 19.1518 82.3542 18.2282 82.7562C17.3046 83.1583 16.308 83.369 15.2994 83.3753H15.2979C15.0241 84.5558 14.6275 85.7048 14.1143 86.8039H9.88592C9.87076 86.7573 9.85713 86.7091 9.84348 86.6625C10.2349 86.6869 10.6278 86.6637 11.0135 86.5934C10.6998 86.2114 10.3861 85.8264 10.0723 85.4445C10.0653 85.4373 10.0588 85.4298 10.0526 85.4219C9.8935 85.2265 9.73286 85.0325 9.57373 84.837L9.57364 84.8367C9.56516 84.2375 9.63446 83.6397 9.77984 83.0581L9.77997 83.058Z" fill="#E6E6E6"/>
+<path d="M135.783 87.1523C135.892 87.1573 136 87.1289 136.092 87.071C136.184 87.013 136.257 86.9283 136.299 86.8284C136.341 86.7284 136.351 86.618 136.328 86.5122C136.304 86.4063 136.249 86.3101 136.169 86.2366C136.155 86.1836 136.146 86.1456 136.132 86.0927C136.137 86.0811 136.142 86.0696 136.147 86.0581C136.257 85.8006 136.441 85.5811 136.676 85.427C136.911 85.273 137.187 85.1914 137.469 85.1925C137.751 85.1935 138.026 85.2771 138.26 85.4329C138.494 85.5886 138.677 85.8095 138.785 86.0678C139.216 87.0988 139.765 88.1315 139.9 89.2216C139.96 89.7034 139.935 90.1918 139.826 90.6652C140.84 88.472 141.366 86.0884 141.369 83.6758C141.369 83.0704 141.335 82.4654 141.268 81.8638C141.211 81.3705 141.134 80.8808 141.034 80.3946C140.491 77.7565 139.325 75.2838 137.632 73.1797C136.812 72.736 136.149 72.0537 135.733 71.2248C135.582 70.9268 135.475 70.6088 135.416 70.2805C135.508 70.2925 135.602 70.3 135.695 70.306C135.724 70.3075 135.754 70.309 135.783 70.3105L135.794 70.311C135.895 70.3155 135.996 70.2908 136.084 70.2398C136.172 70.1889 136.243 70.1138 136.288 70.0237C136.334 69.9336 136.353 69.8323 136.342 69.7319C136.331 69.6316 136.291 69.5365 136.227 69.4582C136.187 69.4095 136.147 69.3607 136.107 69.312C136.046 69.2369 135.984 69.1632 135.924 69.088C135.917 69.0808 135.91 69.0733 135.904 69.0654C135.834 68.9797 135.765 68.8955 135.695 68.8098C135.822 68.6138 135.993 68.4496 136.195 68.3301C136.894 67.9241 137.858 68.2053 138.362 68.8324C138.868 69.4594 138.964 70.3391 138.788 71.1226C138.615 71.7892 138.329 72.4218 137.942 72.9932C137.98 73.0413 138.02 73.0879 138.058 73.1361C138.75 74.0197 139.354 74.9686 139.86 75.9691C139.737 74.8483 139.884 73.7144 140.289 72.6609C140.699 71.679 141.468 70.8521 142.145 70.0033C142.958 68.9837 144.626 69.4286 144.769 70.7211C144.77 70.7336 144.772 70.7461 144.773 70.7586C144.672 70.8149 144.574 70.8747 144.478 70.9379C144.357 71.0181 144.263 71.1327 144.209 71.2667C144.154 71.4007 144.142 71.5478 144.174 71.6888C144.205 71.8298 144.279 71.958 144.385 72.0567C144.491 72.1555 144.625 72.2201 144.769 72.2421L144.784 72.2443C144.748 72.604 144.684 72.9604 144.594 73.3105C144.333 74.2879 143.87 75.2011 143.236 75.9929C142.602 76.7847 141.81 77.4381 140.91 77.9119C140.851 77.942 140.793 77.9721 140.734 78.0007C141.242 79.4303 141.561 80.9194 141.683 82.4307C141.752 83.3223 141.747 84.2179 141.671 85.1088L141.675 85.0773C141.869 84.0865 142.402 83.1926 143.183 82.5465C144.344 81.6006 145.983 81.2523 147.235 80.492C147.368 80.4073 147.523 80.362 147.681 80.3616C147.839 80.3612 147.994 80.4057 148.127 80.4899C148.261 80.574 148.367 80.6942 148.434 80.8364C148.501 80.9785 148.526 81.1367 148.505 81.2922C148.503 81.3033 148.501 81.3144 148.5 81.3254C148.313 81.4008 148.131 81.4877 147.956 81.5856C147.855 81.6419 147.757 81.7016 147.66 81.7648C147.539 81.845 147.446 81.9596 147.391 82.0936C147.337 82.2276 147.325 82.3747 147.356 82.5157C147.388 82.6567 147.462 82.785 147.568 82.8837C147.674 82.9824 147.808 83.047 147.951 83.069L147.966 83.0712C147.977 83.0728 147.986 83.0743 147.997 83.0758C147.678 83.8312 147.23 84.5266 146.673 85.1314C145.986 85.8635 145.155 86.4485 144.231 86.8506C143.308 87.2527 142.311 87.4634 141.302 87.4697H141.301C141.027 88.6501 140.63 89.7992 140.117 90.8982H135.889C135.874 90.8516 135.86 90.8035 135.846 90.7569C136.238 90.7813 136.631 90.7581 137.016 90.6877C136.703 90.3057 136.389 89.9208 136.075 89.5388C136.068 89.5317 136.062 89.5242 136.056 89.5163C135.896 89.3208 135.736 89.1268 135.577 88.9313L135.577 88.9311C135.568 88.3319 135.637 87.7341 135.783 87.1524L135.783 87.1523Z" fill="#E6E6E6"/>
+<path d="M85.529 75.0156C85.6381 75.0206 85.746 74.9922 85.8383 74.9343C85.9305 74.8763 86.0026 74.7916 86.0447 74.6917C86.0868 74.5917 86.097 74.4814 86.0737 74.3755C86.0505 74.2696 85.9951 74.1734 85.9149 74.0999C85.9015 74.0469 85.8918 74.0089 85.8784 73.956C85.8832 73.9444 85.8881 73.9329 85.8929 73.9214C86.0028 73.6639 86.1869 73.4444 86.4221 73.2903C86.6574 73.1363 86.9332 73.0547 87.215 73.0558C87.4969 73.0568 87.7721 73.1404 88.0062 73.2962C88.2402 73.4519 88.4227 73.6728 88.5307 73.9311C88.9621 74.9621 89.5113 75.9948 89.6466 77.0849C89.7061 77.5667 89.681 78.0551 89.5723 78.5285C90.5856 76.3353 91.1118 73.9517 91.1151 71.5391C91.1154 70.9337 91.0815 70.3287 91.0136 69.7271C90.9575 69.2338 90.8797 68.7441 90.7802 68.2579C90.2371 65.6198 89.0711 63.1472 87.3778 61.043C86.5583 60.5993 85.8955 59.9171 85.4789 59.0881C85.3279 58.7902 85.2212 58.4721 85.1621 58.1438C85.2546 58.1558 85.3485 58.1633 85.441 58.1694C85.4698 58.1708 85.5001 58.1724 85.5289 58.1739L85.5397 58.1743C85.6413 58.1789 85.7421 58.1542 85.8299 58.1032C85.9176 58.0522 85.9887 57.9772 86.0345 57.887C86.0803 57.7969 86.0988 57.6956 86.0879 57.5953C86.077 57.495 86.0371 57.3999 85.973 57.3215C85.9331 57.2728 85.8932 57.2241 85.8532 57.1754C85.7926 57.1002 85.7304 57.0265 85.6698 56.9513C85.6628 56.9442 85.6562 56.9367 85.6501 56.9288C85.5804 56.843 85.5107 56.7588 85.441 56.6731C85.5682 56.4772 85.7394 56.313 85.9411 56.1934C86.6398 55.7874 87.6036 56.0686 88.1083 56.6957C88.6145 57.3227 88.71 58.2024 88.5342 58.9859C88.3613 59.6525 88.0753 60.2851 87.6885 60.8565C87.7264 60.9047 87.7658 60.9513 87.8037 60.9994C88.4963 61.8831 89.1 62.832 89.606 63.8325C89.483 62.7116 89.6298 61.5778 90.0346 60.5242C90.4448 59.5423 91.2137 58.7154 91.8907 57.8666C92.704 56.847 94.3717 57.292 94.515 58.5844C94.5164 58.597 94.5177 58.6095 94.5191 58.622C94.4185 58.6783 94.3201 58.738 94.2237 58.8012C94.1027 58.8814 94.009 58.9961 93.9547 59.13C93.9005 59.264 93.8883 59.4112 93.9198 59.5521C93.9513 59.6931 94.0249 59.8214 94.1311 59.9201C94.2373 60.0188 94.3711 60.0834 94.5149 60.1054L94.5297 60.1077C94.4938 60.4673 94.4305 60.8237 94.3402 61.1738C94.0786 62.1512 93.6163 63.0644 92.9823 63.8563C92.3483 64.6481 91.5563 65.3014 90.6559 65.7753C90.5968 65.8053 90.5392 65.8354 90.4801 65.864C90.9885 67.2936 91.3075 68.7828 91.4289 70.294C91.4976 71.1856 91.4935 72.0812 91.4167 72.9722L91.4213 72.9406C91.6153 71.9499 92.1479 71.056 92.9292 70.4098C94.0897 69.4639 95.7292 69.1156 96.9812 68.3553C97.1142 68.2706 97.2689 68.2253 97.427 68.225C97.5851 68.2246 97.7401 68.2691 97.8735 68.3532C98.007 68.4373 98.1134 68.5575 98.1803 68.6997C98.2471 68.8419 98.2716 69 98.2509 69.1556C98.2492 69.1666 98.2475 69.1777 98.2457 69.1887C98.0591 69.2642 97.8774 69.351 97.7017 69.4489C97.6011 69.5052 97.5027 69.5649 97.4063 69.6281C97.2853 69.7083 97.1916 69.823 97.1373 69.9569C97.0831 70.0909 97.0709 70.2381 97.1024 70.379C97.1339 70.52 97.2076 70.6483 97.3137 70.747C97.4199 70.8457 97.5537 70.9103 97.6975 70.9323L97.7123 70.9346C97.7229 70.9361 97.732 70.9376 97.7426 70.9391C97.4237 71.6945 96.9761 72.3899 96.4195 72.9947C95.7319 73.7268 94.9008 74.3118 93.9772 74.7139C93.0536 75.116 92.057 75.3267 91.0485 75.333H91.0469C90.7732 76.5135 90.3765 77.6625 89.8633 78.7615H85.6349C85.6198 78.7149 85.6061 78.6668 85.5925 78.6202C85.9839 78.6446 86.3768 78.6214 86.7625 78.551C86.4488 78.1691 86.1351 77.7841 85.8214 77.4021C85.8144 77.395 85.8078 77.3875 85.8017 77.3796C85.6425 77.1841 85.4819 76.9901 85.3227 76.7946L85.3227 76.7944C85.3142 76.1952 85.3835 75.5974 85.5289 75.0157L85.529 75.0156Z" fill="#E6E6E6"/>
+<path d="M58.6621 106.897L60.4314 106.375L59.261 99.1979L56.6494 99.9683L58.6621 106.897Z" fill="#FFB6B6"/>
+<path d="M47.8105 104.064C47.9183 104.157 48.0262 104.249 48.1354 104.341C48.3525 104.525 48.5723 104.707 48.7926 104.887C48.9033 104.977 49.0153 105.067 49.1262 105.155L49.1256 105.159L49.1327 105.161L49.1349 105.163L49.3137 105.238L49.6925 104.58L49.8672 104.277L50.1141 103.847L50.5664 103.062L52.9481 98.9261L50.4392 97.8769L50.278 98.2583L50.2768 98.2581L50.1971 98.4471L48.6989 101.974L48.3931 102.696L48.3834 102.717L48.1995 103.148L48.0408 103.521L47.864 103.938L47.8105 104.064Z" fill="#FFB6B6"/>
+<path d="M34.7016 86.1662C34.825 86.4559 34.9523 86.745 35.0811 87.0319C35.3203 87.566 35.5692 88.0942 35.8276 88.6165C35.8274 88.6177 35.8286 88.6179 35.8297 88.6193C35.9957 88.8287 36.1857 89.0181 36.3959 89.1838C36.4045 89.1925 36.4146 89.199 36.4233 89.2066C36.5784 89.3265 36.7479 89.4271 36.9279 89.5058C36.9928 89.5332 37.059 89.5608 37.124 89.5883C37.3589 89.6842 37.5927 89.7713 37.8262 89.8522C38.2419 89.995 38.6569 90.1159 39.0712 90.215C39.1045 90.2239 39.1379 90.2316 39.1714 90.2393C40.8802 90.6369 42.5955 90.6988 44.4052 90.6428C45.2988 90.6161 46.2155 90.5599 47.1649 90.5014C47.4752 90.4814 47.7866 90.4627 48.1016 90.4446C48.1253 90.4435 48.1504 90.4413 48.1754 90.4403C48.6254 90.4139 49.0825 90.3899 49.5503 90.3688C50.1392 90.3421 50.7455 90.3219 51.3739 90.3113L51.194 91.1592C51.0528 91.811 50.8117 92.4375 50.4789 93.0167C50.097 93.7333 49.7947 94.3002 50.0316 95.6167L50.1454 96.2539C49.9885 96.5368 49.8999 96.8519 49.8864 97.1745C49.873 97.4971 49.935 97.8184 50.0678 98.1132L50.0999 98.1834L47.6444 102.309L47.4853 102.576L48.3829 102.717L49.487 102.892L51.3585 103.186L54.9169 98.235L55.0871 97.9988L55.0892 97.9856L56.4591 87.6119C56.47 87.5202 56.4775 87.4268 56.48 87.3338C56.4969 86.9119 56.4289 86.4909 56.28 86.0953C56.1312 85.6997 55.9044 85.3375 55.613 85.0299C55.334 84.733 54.9984 84.494 54.6255 84.327C54.2527 84.16 53.8501 84.0682 53.4411 84.0569L52.4979 84.0303L50.5709 83.9757L49.2133 83.9381L49.1861 83.9375L45.1828 83.8245L45.0831 82.6414L45.0342 82.6141L43.4785 81.7539L38.0978 78.7787L38.0841 78.7716L37.7301 78.5759L37.674 78.6408C37.6572 78.6603 37.6405 78.6798 37.625 78.6995C37.1481 79.3017 36.7345 79.9507 36.3906 80.6363C35.8178 81.7546 35.3097 82.9044 34.8687 84.08C34.8494 84.1311 34.8321 84.1775 34.8167 84.2193L34.811 84.2319C34.8041 84.2517 34.7996 84.2645 34.7978 84.268C34.5792 84.7915 34.565 85.4701 34.7016 86.1662Z" fill="#2F2E41"/>
+<path d="M35.0684 82.3214C35.0988 82.2475 35.1341 82.1732 35.1704 82.1015C35.4535 81.5596 35.7665 81.0337 36.108 80.526C36.4926 79.9475 36.9411 79.3335 37.4637 78.6746C37.7165 78.3555 37.9864 78.0248 38.2735 77.6824C38.4173 77.5108 38.5661 77.3364 38.72 77.159C38.7262 77.1507 38.7328 77.1427 38.7399 77.1351L38.7841 77.0831L44.3162 78.7217L44.3135 79.4733L44.7147 80.5383L44.6875 80.5696C44.6887 80.5698 44.6889 80.5686 44.6875 80.5696V80.4234L44.8349 80.5696L46.2612 82.3182L46.271 82.3186L49.4583 82.4078L52.7429 82.5L54.5072 82.55C54.9162 82.5611 55.3188 82.6529 55.6917 82.8199C56.0645 82.987 56.4002 83.2259 56.6791 83.5229C56.9704 83.8306 57.1972 84.1929 57.346 84.5884C57.4949 84.984 57.5629 85.405 57.5461 85.8269C57.5435 85.9125 57.537 85.9999 57.527 86.0856L58.5459 90.1768C59.1558 92.6237 59.3901 95.1478 59.2407 97.664L59.8311 101.646L59.6583 101.635L57.0862 101.47L56.4069 101.428L55.2737 99.0608C55.1446 98.7911 55.0252 98.5155 54.9175 98.2356C54.7397 97.7782 54.5915 97.3099 54.4737 96.8338L52.4871 88.8044C52.2339 88.8076 51.9835 88.8092 51.7358 88.8092C50.5895 88.8134 49.4932 88.7914 48.4469 88.7433C45.0448 88.5884 42.1453 88.1622 39.6184 87.4431C38.9087 87.2419 38.2275 87.0169 37.5749 86.7681C37.3355 86.6776 37.0999 86.5837 36.8681 86.4862C36.8135 86.4641 36.76 86.4422 36.7067 86.4191C36.2278 86.2128 35.8086 85.8907 35.4876 85.4822C35.1666 85.0736 34.954 84.5917 34.8693 84.0806C34.7654 83.4873 34.8345 82.877 35.0684 82.3214Z" fill="#2F2E41"/>
+<path d="M58.315 105.7L60.2298 105.134L60.5301 105.044L60.8026 106.2L63.8064 107.369C63.9549 107.427 64.081 107.53 64.1662 107.664C64.2513 107.798 64.2911 107.955 64.2798 108.113C64.2684 108.271 64.2065 108.421 64.103 108.541C63.9995 108.662 63.8599 108.746 63.7046 108.782L60.4671 109.536L59.6393 108.522L59.6915 109.716L58.4721 110L57.8496 105.838L58.315 105.7Z" fill="#2F2E41"/>
+<path d="M47.6445 102.309L47.4854 102.576L47.599 102.594L47.6445 102.309Z" fill="#2F2E41"/>
+<path d="M48.2091 102.752L49.9715 103.686L50.2482 103.833L49.6219 104.844L50.9275 107.772C50.9921 107.917 51.0085 108.078 50.9741 108.233C50.9398 108.387 50.8565 108.527 50.7365 108.631C50.6164 108.735 50.466 108.799 50.307 108.812C50.1481 108.825 49.989 108.788 49.853 108.705L47.0184 106.98L47.149 105.682L46.3393 106.567L45.2715 105.917L47.7804 102.526L48.2091 102.752Z" fill="#2F2E41"/>
+<path d="M60.9451 49.5022C60.962 49.696 60.9359 49.8911 60.8687 50.0738C60.8014 50.2565 60.6946 50.4224 60.5558 50.5597C60.4169 50.697 60.2494 50.8024 60.065 50.8686C59.8807 50.9347 59.684 50.9599 59.4887 50.9424L57.5286 55.252L56.2051 53.1754L58.2694 49.4013C58.3207 49.0778 58.4898 48.7843 58.7447 48.5762C58.9996 48.3682 59.3226 48.2601 59.6524 48.2726C59.9822 48.285 60.296 48.4171 60.5342 48.6437C60.7725 48.8703 60.9186 49.1758 60.9451 49.5022H60.9451Z" fill="#FFB6B6"/>
+<path d="M55.9588 62.3227L46.9781 69.1407C46.2656 69.6804 45.3665 69.9176 44.478 69.8003C43.5895 69.683 42.7842 69.2208 42.2387 68.5151C41.9372 68.124 41.7261 67.6719 41.6204 67.1908C41.5148 66.7097 41.5172 66.2114 41.6275 65.7313C41.7378 65.2513 41.9532 64.8012 42.2585 64.413C42.5638 64.0248 42.9515 63.7081 43.3941 63.4853L52.3473 58.9783L56.3526 51.2361L59.042 52.0291L55.9588 62.3227Z" fill="#5D34F2"/>
+<path d="M36.8322 70.4224L36.6501 77.0381C34.1445 81.2383 33.8595 83.2779 34.553 84.3654L44.8559 80.6312L45.0295 80.2198L45.5675 77.2638L46.543 74.2137C46.7147 73.8951 49.0464 71.9371 46.8606 68.223L42.4633 62.3453L38.94 62.1453C38.3591 63.6245 39.4069 64.4316 38.3604 64.7727C35.9938 66.9248 36.3415 67.275 36.8322 70.4224Z" fill="#5D34F2"/>
+<path d="M29.8251 88.9957C29.7453 88.818 29.7057 88.6252 29.7092 88.4307C29.7126 88.2362 29.759 88.0449 29.8451 87.8701C29.9311 87.6953 30.0548 87.5414 30.2073 87.4192C30.3598 87.297 30.5374 87.2094 30.7277 87.1626L31.1623 82.4542L33.0966 83.9883L32.3874 88.2243C32.4453 88.5467 32.382 88.8789 32.2096 89.1582C32.0371 89.4374 31.7674 89.6441 31.4516 89.7392C31.1357 89.8343 30.7957 89.8111 30.4959 89.6741C30.1962 89.5371 29.9575 89.2957 29.8251 88.9957V88.9957Z" fill="#FFB6B6"/>
+<path d="M30.3193 75.2626L36.5644 65.9088C37.0602 65.1679 37.8319 64.6524 38.7104 64.4754C39.5888 64.2985 40.502 64.4745 41.2498 64.9648C41.6635 65.2367 42.0118 65.5957 42.27 66.0162C42.5282 66.4368 42.6898 66.9085 42.7436 67.398C42.7973 67.8875 42.7418 68.3827 42.581 68.8485C42.4201 69.3143 42.1579 69.7393 41.8129 70.0932L34.8334 77.2537L33.5953 85.8692L30.7924 85.9909L30.3193 75.2626Z" fill="#5D34F2"/>
+<path d="M43.5544 54.1186C44.8002 56.5549 43.9864 59.377 41.6747 60.861C39.1749 62.4657 35.9292 62.1143 34.8794 58.9959C33.7103 55.5231 34.6707 54.0333 36.7591 52.2535C39.2065 50.1677 42.2084 51.4863 43.5544 54.1186Z" fill="#2F2E41"/>
+<path d="M37.4226 59.5459C38.0568 60.3705 38.9949 60.9115 40.0309 61.0501C41.0669 61.1888 42.116 60.9137 42.9477 60.2854C43.7794 59.657 44.3257 58.7267 44.4665 57.699C44.6073 56.6712 44.3312 55.63 43.6988 54.8041L43.6646 54.7595C43.0185 53.9571 42.0805 53.4389 41.0528 53.3166C40.025 53.1942 38.9901 53.4777 38.1711 54.1057C37.3521 54.7337 36.8147 55.656 36.6748 56.6736C36.535 57.6912 36.8039 58.7226 37.4236 59.5452L37.4226 59.5459Z" fill="#FFB6B6"/>
+<path d="M44.7624 53.7241C44.1214 54.3293 43.34 54.7686 42.4873 55.0032C42.3164 54.807 42.1138 54.6404 41.8878 54.5102C41.996 54.7335 42.0701 54.9716 42.1078 55.2166C41.7275 55.9996 40.1743 56.5625 38.6898 57.1382L36.7236 53.6952L39.3261 52.232C41.4173 50.7975 43.8792 51.4098 44.7624 53.7241Z" fill="#2F2E41"/>
+<path d="M35.2397 52.2578C34.8856 52.0954 34.4267 52.1957 34.0938 52.4238C33.7769 52.6628 33.5208 52.972 33.3457 53.3266C33.0274 53.9005 32.7987 54.5189 32.6674 55.1608C32.5552 55.7162 32.5742 56.3876 33.0764 56.6774C33.4954 56.9192 34.0945 56.7669 34.4796 56.4442C34.8647 56.1215 35.0817 55.6679 35.2696 55.225C35.4575 54.7821 35.6352 54.3229 35.9692 53.9551L35.6222 54.1158C35.7319 53.7855 35.783 53.4387 35.7732 53.091C35.7653 52.918 35.7119 52.7501 35.6183 52.6039C35.5247 52.4578 35.3942 52.3384 35.2397 52.2578Z" fill="#2F2E41"/>
+<path d="M39.741 52.709L36.949 54.2788C36.194 54.7033 35.6398 55.4079 35.4085 56.2378C35.1771 57.0676 35.2875 57.9546 35.7153 58.7038C36.3385 59.7947 37.3492 60.616 38.5501 61.007C39.7509 61.398 41.0556 61.3307 42.2091 60.8183L39.6577 58.5835L43.1188 60.3332L43.8578 59.9178C40.1459 59.2481 39.4298 56.3591 39.741 52.709Z" fill="#2F2E41"/>
+</g>
+<defs>
+<clipPath id="clip0_307_1353">
+<rect width="150" height="110" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

packages/console/src/components/Table/TableError.module.scss

@@ -0,0 +1,22 @@
+@use '@/scss/underscore' as _;
+
+.tableError {
+  text-align: center;
+
+  .image {
+    text-align: center;
+  }
+
+  .title {
+    text-align: center;
+    font: var(--font-subhead-2);
+    margin-bottom: _.unit(2);
+  }
+
+  .content {
+    text-align: center;
+    font: var(--font-body-2);
+    color: var(--color-neutral-50);
+    margin-bottom: _.unit(2);
+  }
+}

packages/console/src/components/Table/TableError.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ErrorImage from '@/assets/images/table-error.svg';
+
+import Button from '../Button';
+import * as styles from './TableError.module.scss';
+
+type Props = {
+  title?: string;
+  content?: string;
+  onRetry?: () => void;
+};
+
+const TableError = ({ title, content, onRetry }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <tr>
+      <td colSpan={0}>
+        <div className={styles.tableError}>
+          <div className={styles.image}>
+            <img src={ErrorImage} />
+          </div>
+          <div className={styles.title}>
+            {title ?? t('admin_console.errors.something_went_wrong')}
+          </div>
+          <div className={styles.content}>
+            {content ?? t('admin_console.errors.unknown_server_error')}
+          </div>
+          {onRetry && <Button title="general.retry" onClick={onRetry} />}
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default TableError;

packages/console/src/hooks/use-api.ts

@@ -1,5 +1,6 @@
 import { useLogto } from '@logto/react';
-import { RequestErrorBody, RequestErrorMetadata } from '@logto/schemas';
+import { RequestErrorBody } from '@logto/schemas';
+import { conditional } from '@silverhand/essentials';
 import { t } from 'i18next';
 import ky from 'ky';
 import { useMemo } from 'react';
@@ -8,11 +9,11 @@ import { toast } from 'react-hot-toast';
 import { logtoApiResource } from '@/consts/api';
 
 export class RequestError extends Error {
-  metadata: RequestErrorMetadata;
+  body: RequestErrorBody;
 
-  constructor(metadata: RequestErrorMetadata) {
+  constructor(body: RequestErrorBody) {
     super('Request error occurred.');
-    this.metadata = metadata;
+    this.body = body;
   }
 }
 
@@ -25,22 +26,28 @@ const toastError = async (response: Response) => {
   }
 };
 
-const useApi = () => {
+type Props = {
+  hideErrorToast?: boolean;
+};
+
+const useApi = ({ hideErrorToast }: Props = {}) => {
   const { isAuthenticated, getAccessToken } = useLogto();
 
   const api = useMemo(
     () =>
       ky.create({
         hooks: {
-          beforeError: [
-            (error) => {
-              const { response } = error;
+          beforeError: conditional(
+            !hideErrorToast && [
+              (error) => {
+                const { response } = error;
 
-              void toastError(response);
+                void toastError(response);
 
-              return error;
-            },
-          ],
+                return error;
+              },
+            ]
+          ),
           beforeRequest: [
             async (request) => {
               if (isAuthenticated) {
@@ -51,7 +58,7 @@ const useApi = () => {
           ],
         },
       }),
-    [getAccessToken, isAuthenticated]
+    [getAccessToken, isAuthenticated, hideErrorToast]
   );
 
   return api;

packages/console/src/hooks/use-swr-fetcher.ts

@@ -1,21 +1,26 @@
-import { RequestErrorMetadata } from '@logto/schemas';
+import { RequestErrorBody } from '@logto/schemas';
+import { HTTPError } from 'ky';
 import { useCallback } from 'react';
 import { BareFetcher } from 'swr';
 
 import useApi, { RequestError } from './use-api';
 
 const useSwrFetcher = () => {
-  const api = useApi();
+  const api = useApi({ hideErrorToast: true });
   const fetcher = useCallback<BareFetcher>(
     async (resource, init) => {
-      const response = await api.get(resource, init);
+      try {
+        const response = await api.get(resource, init);
 
-      if (!response.ok) {
-        const metadata = (await response.json()) as RequestErrorMetadata;
-        throw new RequestError(metadata);
+        return await response.json();
+      } catch (error: unknown) {
+        if (error instanceof HTTPError) {
+          const { response } = error;
+          const metadata = (await response.json()) as RequestErrorBody;
+          throw new RequestError(metadata);
+        }
+        throw error;
       }
-
-      return response.json();
     },
     [api]
   );

packages/console/src/pages/ApiResourceDetails/index.tsx

@@ -76,7 +76,7 @@ const ApiResourceDetails = () => {
       <BackLink to="/api-resources">{t('api_resource_details.back_to_api_resources')}</BackLink>
 
       {isLoading && <div>loading</div>}
-      {error && <div>{`error occurred: ${error.metadata.code}`}</div>}
+      {error && <div>{`error occurred: ${error.body.message}`}</div>}
       {data && (
         <>
           <Card className={styles.header}>

packages/console/src/pages/ApiResources/index.tsx

@@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableError from '@/components/Table/TableError';
 import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
@@ -69,9 +70,10 @@ const ApiResources = () => {
         </thead>
         <tbody>
           {error && (
-            <tr>
-              <td colSpan={2}>error occurred: {error.metadata.code}</td>
-            </tr>
+            <TableError
+              content={error.body.message}
+              onRetry={async () => mutate(undefined, true)}
+            />
           )}
           {isLoading && (
             <TableLoading>

packages/console/src/pages/ApplicationDetails/index.tsx

@@ -162,7 +162,7 @@ const ApplicationDetails = () => {
     <div className={styles.container}>
       <BackLink to="/applications">{t('application_details.back_to_applications')}</BackLink>
       {isLoading && <div>loading</div>}
-      {error && <div>{`error occurred: ${error.metadata.code}`}</div>}
+      {error && <div>{`error occurred: ${error.body.message}`}</div>}
       {data && oidcConfig && (
         <>
           <Card className={styles.header}>

packages/console/src/pages/Applications/index.tsx

@@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableError from '@/components/Table/TableError';
 import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
@@ -67,9 +68,10 @@ const Applications = () => {
         </thead>
         <tbody>
           {error && (
-            <tr>
-              <td colSpan={2}>error occurred: {error.metadata.code}</td>
-            </tr>
+            <TableError
+              content={error.body.message}
+              onRetry={async () => mutate(undefined, true)}
+            />
           )}
           {isLoading && (
             <TableLoading>

packages/console/src/pages/ConnectorDetails/index.tsx

@@ -98,7 +98,7 @@ const ConnectorDetails = () => {
     <div className={styles.container}>
       <BackLink to="/connectors">{t('connector_details.back_to_connectors')}</BackLink>
       {isLoading && <div>loading</div>}
-      {error && <div>{`error occurred: ${error.metadata.code}`}</div>}
+      {error && <div>{`error occurred: ${error.body.message}`}</div>}
       {data && (
         <Card className={styles.header}>
           {data.metadata.logo.startsWith('http') ? (

packages/console/src/pages/Connectors/index.tsx

@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import TabNav, { TabNavLink } from '@/components/TabNav';
+import TableError from '@/components/Table/TableError';
 import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 
@@ -21,7 +22,7 @@ const Connectors = () => {
   const isSocial = location.pathname === '/connectors/social';
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [createType, setCreateType] = useState<ConnectorType>();
-  const { data, error } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
+  const { data, error, mutate } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
   const isLoading = !data && !error;
 
   const emailConnector = useMemo(
@@ -75,9 +76,10 @@ const Connectors = () => {
           </thead>
           <tbody>
             {error && (
-              <tr>
-                <td colSpan={3}>error occurred: {error.metadata.code}</td>
-              </tr>
+              <TableError
+                content={error.body.message}
+                onRetry={async () => mutate(undefined, true)}
+              />
             )}
             {isLoading && (
               <TableLoading>

packages/console/src/pages/UserDetails/components/UserConnectors.tsx

@@ -7,6 +7,7 @@ import useSWR from 'swr';
 
 import Button from '@/components/Button';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
+import TableError from '@/components/Table/TableError';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useApi, { RequestError } from '@/hooks/use-api';
 
@@ -28,7 +29,7 @@ type DisplayConnector = {
 const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
   const api = useApi();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { data, error } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
+  const { data, error, mutate } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
   const isLoading = !data && !error;
   const [isSubmiting, setIsSubmiting] = useState(false);
 
@@ -81,7 +82,6 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
   return (
     <div>
       {isLoading && <div>Loading</div>}
-      {error && error}
       {displayConnectors && (
         <table className={styles.table}>
           <thead>
@@ -92,6 +92,12 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
             </tr>
           </thead>
           <tbody>
+            {error && (
+              <TableError
+                content={error.body.message}
+                onRetry={async () => mutate(undefined, true)}
+              />
+            )}
             {displayConnectors.length === 0 && (
               <tr>
                 <td rowSpan={3}>{t('user_details.connectors.not_connected')}</td>

packages/console/src/pages/UserDetails/index.tsx

@@ -105,7 +105,7 @@ const UserDetails = () => {
       <BackLink to="/users">{t('user_details.back_to_users')}</BackLink>
 
       {isLoading && <div>loading</div>}
-      {error && <div>{`error occurred: ${error.metadata.code}`}</div>}
+      {error && <div>{`error occurred: ${error.body.message}`}</div>}
       {id && data && (
         <>
           <Card className={styles.header}>

packages/console/src/pages/Users/index.tsx

@@ -10,6 +10,7 @@ import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import TableError from '@/components/Table/TableError';
 import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
@@ -20,7 +21,7 @@ import * as styles from './index.module.scss';
 const Users = () => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { data, error } = useSWR<User[], RequestError>('/api/users');
+  const { data, error, mutate } = useSWR<User[], RequestError>('/api/users');
   const isLoading = !data && !error;
   const navigate = useNavigate();
 
@@ -61,9 +62,10 @@ const Users = () => {
         </thead>
         <tbody>
           {error && (
-            <tr>
-              <td colSpan={2}>error occurred: {error.metadata.code}</td>
-            </tr>
+            <TableError
+              content={error.body.message}
+              onRetry={async () => mutate(undefined, true)}
+            />
           )}
           {isLoading && (
             <TableLoading>

packages/phrases/src/locales/en.ts

@@ -4,6 +4,7 @@ const translation = {
     add_another: '+ Add Another',
     skip: 'Skip',
     next: 'Next',
+    retry: 'Try again',
   },
   sign_in: {
     action: 'Sign In',
@@ -32,6 +33,7 @@ const translation = {
       required: 'Required',
     },
     errors: {
+      something_went_wrong: 'Oops! Something went wrong',
       unknown_server_error: 'Unknown server error occurred.',
     },
     tab_sections: {

packages/phrases/src/locales/zh-cn.ts

@@ -6,6 +6,7 @@ const translation = {
     add_another: '+ Add Another',
     skip: '跳过',
     next: '下一步',
+    retry: '重试',
   },
   sign_in: {
     action: '登录',
@@ -34,6 +35,7 @@ const translation = {
       required: '必填',
     },
     errors: {
+      something_went_wrong: '哎哟喂，遇到了一个错误',
       unknown_server_error: '服务器发生未知错误。',
     },
     tab_sections: {