Error Reports for Your Projects with URIports and Vercel

Support for client-side generated reports are the standard for modern web browsers, and enabling this for your projects is a great way to identify and resolve issues, and improve site security, without relying on your users as testers.

Using URIports, you will only need to configure a few HTTP headers to start receiving reports.

What Reports?

Setting up reports with URIports, you can receive a variety of reports to inform you of various cases, including;

Crash: A visitor was unable to continue because the (mobile) browser crashed.
Deprecation: A browser API or feature has been used which is expected to stop working in a future update to the browser.
Intervention: A user-agent has not honored a request made, or javascript function called, by the website or web-based app (e.g., for security, performance, or user annoyance reasons.)
Network-Error-Logging (NEL): Receive reports on 4xx/5xx HTTP errors, and DNS/TLS related issues. For more information, see the URIports documentation.
Content Security Policy (CSP): Reports to help detect and mitigate certain types of attacks, like XSS and data injection, and thereby improve the security of the website or web-based apps.
Expect-CT: When browsers fail to detect the presence of Signed Certificate Timestamps (SCTs) in subsequent TLS connections. This prevents the use of misused certificates from going unnoticed.
Permissions Policy: The visitor triggered a violation of the Permissions Policy. A policy that allows you to selectively enable, disable, or modify the behavior of browser features.

Step 1: Setting up a project on Vercel

Vercel makes it effortless to deploy any static framework and Serverless Function so that you can focus on your project.

Firstly, signup for a free Vercel account, then using your project's Git repository, import and deploy your project:

To deploy your project with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice.

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Alternatively, you can learn about setting up your project on Vercel or use one of our many Quickstarts from the Vercel introduction documentation.

Once deployed, you will receive a default production URL for your project which you will need in the setup of your URIports account. Alternatively, you can assign a Custom Domain to your project.

Step 2: Setting up URIports and HTTP Headers

URIports collects, aggregates, and enriches all of the reports listed above and presents them in a uniform, intuitive way to navigate interface. With built-in (email and push) notifications, URIports keeps you informed on issues that require attention without the need to regularly log in.

Create an endpoint for your reports by setting up a free URIports account.

URIports will ask you for an email, password, and a domain for which your reports will be coming from. The domain will be the production URL that you received for your project in Step 1.

From your URIports dashboard, take note of your Report Endpoint.

Next, create a vercel.json file at the root of your project and fill it with the following contents, replacing my-report-endpoint with your endpoint ID:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Report-To",
          "value": "{\"group\":\"default\",\"max_age\":10886400,\"endpoints\":[{\"url\":\"https://my-report-endpoint.uriports.com/reports\"}],\"include_subdomains\":true}"
        },
        {
          "key": "NEL",
          "value": "{\"report_to\":\"default\",\"max_age\":2592000,\"include_subdomains\":true,\"failure_fraction\":1.0}"
        },
        {
          "key": "Content-Security-Policy-Report-Only",
          "value": "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; report-uri https://my-report-endpoint.uriports.com/reports/report; report-to default"
        },
        {
          "key": "Expect-CT",
          "value": "max-age=86400,report-uri=\"https://my-report-endpoint.uriports.com/reports/report\""
        },
        {
          "key": "Permissions-Policy",
          "value": "geolocation=(), camera=(), fullscreen=*, payment=self"
        }
      ]
    }
  ]
}

HTTP headers to tell your visitor's browser to send reports to your endpoint.

Note: You can learn more about URIports reporting types and how to use them from their Getting Started guide.

Step 3: Deploy and Receive Reports

With a Vercel project created and URIports setup for your project, you can now deploy your changes and start receiving reports.

For projects that were deployed from a Git repository, all you need is to push to the Production Branch (commonly main) and you will get a fresh Production Deployment.

Alternatively, run vercel --prod with Vercel CLI from your project's root.

That's all! You will now receive reports from your users and be able to act quickly on any issue that arises.

Avoiding Flooding Your URIports Account

Some report types can potentially flood your URIports account with reports and burn a lot of your quota if they are configured incorrectly.

The following is a few suggestions to help you stop flooding: