(fix): correctly handle channel load error and show it on screen

src/app/modules/pro/channel/channel.component.html

@@ -97,6 +97,10 @@
  </div>
 
  <div class="m-proChannel__body">
+ <div class="m-proChannel__error" *ngIf="error">
+ {{ error }}
+ </div>
+
  <router-outlet></router-outlet>
  </div>
 

src/app/modules/pro/channel/channel.component.scss

@@ -143,9 +143,26 @@ m-pro--channel {
  margin-bottom: 24px;
  }
 
- & > m-blog-view-infinite, m-blog-view {
+ & > m-blog-view-infinite,
+ m-blog-view {
  background-color: transparent !important;
  }
+
+ .m-proChannel__error {
+ display: inline-block;
+ margin: 16px 0;
+ padding: 17px 8px;
+ font-size: 40px;
+ text-align: center;
+
+ background: var(--m-pro--transparent-background-color);
+
+ border-radius: 4px;
+
+ @include m-theme() {
+ color: themed($m-red);
+ }
+ }
  }
 
  .m-proChannel__footer {

src/app/modules/pro/channel/channel.component.ts

@@ -243,6 +243,8 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  async load() {
+ this.error = null;
+
  if (!this.username) {
  return;
  }
@@ -255,7 +257,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  this.bindCssVariables();
  this.setTitle();
  } catch (e) {
- this.error = e.getMessage();
+ this.error = e.message;
  }
 
  this.shouldOpenWireModal();
@@ -264,10 +266,12 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  async reload() {
+ this.error = null;
+
  try {
  this.channel = await this.channelService.reload(this.username);
  } catch (e) {
- this.error = e.getMessage();
+ this.error = e.message;
  }
 
  this.shouldOpenWireModal();
@@ -283,7 +287,8 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  continue;
  }
 
- let value = styles[style].trim();
+ let value =
+ typeof styles[style] === 'string' ? styles[style].trim() : null;
 
  if (!value) {
  continue;