Flash an alert when Jenkins build fails

Jenkins Alert Development teams need to keep track of builds on Jenkins and sometimes an email alert is not flashy enough. Using this simple javascript on your team dashboard you can easily track failed builds and urge developers to fix it.

The script uses Jenkins JSON API with JSONP method to request the latest failed builds with author name and last commit that caused the failure. You will need to add the domain of the page where the request is sent to your “Jenkins” > “Configure Global Security” > “Domains from which to allow requests” configuration. Also the cookie from Jenkins is needed on the same browser so you will need to login to Jenkins from the same browser before running the script or proxy the request and use Basic Authorization using your API token to do the request.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src=""></script>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
        #jenkins, #jenkins .background {
            z-index: 9999;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            font-family: serif;

        #jenkins {
            display: none;
            background: rgba(249, 144, 144, 0.73);

        #jenkins .background {
            z-index: 10000;
            animation: blinker 1s cubic-bezier(0, -0.36, 1, 1.39) infinite alternate;
            background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 255) 400%);

        @keyframes blinker {
            to {
                opacity: 0;

        #jenkins .center-block {
            z-index: 10001;
            width: 75%;
            margin-top: 10%;
            position: relative;
            top: 0;
            left: 0;

        #jenkins .pull-left {
            height: 358px;
            width: 307px;

        #jenkins h1 {
            font-size: 50px;
            font-weight: 700;
            font-family: fantasy;

        #jenkins-error {
            font-size: 30px;
            padding: 60px 0 0 350px;

<a class="twitter-timeline" href="">Tweets by gadelkareem</a>
<script async src="//" charset="utf-8"></script>
<div id="jenkins">
    <div class="background"></div>
    <div class="center-block">
        <img id="photo" src="" class="pull-left">
            <h1>Oops!! <span class="author"></span> just put us on Fire!</h1>
            <ul id="jenkins-error"></ul>
    function jenkins() {
        var baseUrl = "";

            url: baseUrl + "/api/json",
            data: "depth=1&tree=jobs[displayName,lastBuild[result,timestamp,changeSet[items[msg,author[fullName]]]]]&jsonp=callBack",
            jsonpCallback: "callBack",
            dataType: 'jsonp',
            success: function (json) {
                var allJobs = json["jobs"],
                        currentTimestamp = moment().unix(),
                        nonSuccessfulJobs = allJobs.filter(function (job) {
                            return job["lastBuild"] != null && job["lastBuild"]["result"] == "FAILURE" && (currentTimestamp - (job["lastBuild"]["timestamp"] / 1000)) < 180 /* display for 3 min */;

                if (nonSuccessfulJobs.length) {

                    $.each(nonSuccessfulJobs, function (index, value) {
                        var changeSet = value['lastBuild']['changeSet']['items'],
                                item = changeSet[changeSet.length - 1],
                                author = item && 'author' in item && 'fullName' in item['author'] ? item['author']['fullName'] : 'Someone';
                                "<li><strong>" + author + "</strong> just broke <strong>" + value["displayName"] + "</strong> while trying to <em>" + ( item && 'msg' in item ? item['msg'] : 'hmm.. not sure!') + '</em></li>');
                else {
                setTimeout(jenkins, 15000);
            error: function (error) {

    var jenkinsDiv = $("#jenkins"), jenkinsError = $('#jenkins-error');
    jenkinsDiv.on('click', function () {


Fork here

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.