I'm loading information from a SharePoint list in the onInit method. Now I'm wondering how to handle errors. My expectation was that if there's an error the returned promise would fail and some internal procedure would render an error message. Instead, nothing happens. So I've tried to use this:

protected onInit(): Promise<void> {
    return this.initializeServices().then(() => this.loadData()).catch((error) => {this.renderError(error); return Promise.reject(error); });

Which might not be nice, but renders a proper error message after loading the web part. But I can't change the web part properties anymore. A click on the 'Edit Webpart' buttons yields no results anymore when there has been an error. It's still working fine when there has been no error.

Any suggestion on how to handle errors properly would be greatly appreciated.

Best regards, Phil


In onInit() I get the error and store it in a class-level variable and resolve the promise. Then in render() I check to see if the class-level variable has a value and I show the error message if it does.


  .then((client) => {
    let repo = new EmployeeDirectoryRepository();
    let call = repo.GetAllOfficeGroups(client);
    call.then((response) => {
      this.officeGroups = response;
    call.catch((err) => {
      this.onInitError = err;


if (this.onInitError) {
  let message = this.onInitError.message + "\r\n" + navigator.userAgent;
  this.context.statusRenderer.renderError(this.domElement, message);
} else {
  // ...
  • My colleague suggested something similiar, but it just felt like there should be a more streamlined variant. :-/ – Phil Feb 22 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.