Web share api is throwing unhandled error on close even with try catch block included?

Question

I am simply trying to implement web share api, it works when I click the button, but everytime I close it it throws unhandled error.

Here are some notes:

• I am using ios simulator safari browser to test it.
• It is supported and it works when I click the button
• Why I get unhandled error - I think that I am handling errors correctly with try/catch
• Why does, web share api throw error on close anyways, how is that an error?

Here is my code:

import React from 'react';

function Share() {
  const handleShareClick = () => {
    try {
      navigator.share({
        title: 'My App',
        text: 'Check out this awesome app!',
        url: 'https://my-app.com'
      });
    } catch (error: any) {
      console.log(error);
    }
  };

  return (
    <div className="flex flex-col justify-center items-center w-full h-full p-2">
      <h1>This is share page</h1>
      <button className="bg-blue-500 p-4 text-white" onClick={handleShareClick}>
        Share this app
      </button>
    </div>
  );
}

export default Share;

Is this a bug? what can I do about it?

Answer 1

A try catch needs to be in an async function. Declare the handleShareClick Async.